使用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.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>