Свободное рисование внутри объекта с использованием ткани JS

Question

Свободное рисование внутри объекта с использованием ткани JS

1

Я загрузил несколько объектов из 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?

Sefat Noor 15 дек. 2018, в 01:01

Источник

Теги:

javascript

canvas

fabricjs

1 ответ

Ещё вопросы

a--m · Accepted Answer · 2018-12-14T22-30-00.000Z

Вы можете замаскировать холст (используя 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>

Спасибо! но если я хочу обрезать путь svg вместо круга, что я должен использовать вместо дуги?
Вы можете нарисовать весь холст API , он не ограничен только дугой. Я использовал круг, так как он соответствовал вашим требованиям и примеру.