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

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

0 голосов
/ 15 декабря 2018

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

1 Ответ

0 голосов
/ 15 декабря 2018

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