使用 fabric js 在对象内部自由绘图

Question

我通过以下代码从 svg 加载了多个对象：

 var canvas = new fabric.Canvas('drawing');
 fabric.loadSVGFromURL('images/circle.svg', function(objects) {
 canvas.add.apply(canvas, objects);
 canvas.forEachObject(function(o){ o.hasBorders = o.hasControls = false; 
         });
 canvas.renderAll();
 });

现在我只想在一个物体内部自由绘制（如下图）。如何使用fabric.js实现？

Answer 1

您可以 屏蔽 canvas（使用 canvas.clipTo）并使其与您的 SVG 表单匹配。如果它像您的示例图像中那样是一个圆圈，那将很简单。

参见以下示例：

// define a drawing canvas
const canvas = new fabric.Canvas(
  'drawing', 
  { isDrawingMode: true }
);
canvas.freeDrawingBrush.color = 'red'

// create a circle (here you could load your svg circle instead)
const circle = new fabric.Circle({
  top: 25, 
  left: 25, 
  radius: 50, 
  fill: 'transparent', 
  stroke: 'black' 
});

// create the clipping mask using the circle coordinates
canvas.clipTo = function (ctx) {
  ctx.arc(
    circle.top + circle.radius, 
    circle.left + circle.radius, 
    circle.radius + 1, // +1px for the circle stroke
    circle.radius + 1, 
    Math.PI*2, 
    true
  )
}

// add the circle to the canvas
canvas.add(circle);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.min.js"></script>

<canvas id="drawing" width="600" height="600"></canvas>

使用 fabric js 在对象内部自由绘图

Free drawing inside a object using fabric js

javascript

canvas

fabricjs