Как сделать отверстие в polyjon fabricjs

Question

Я хочу сделать отверстие внутри многоугольника с fabricjs. Я могу сделать это с использованием обычного холста html5 против часовой стрелки, как показано ниже, но я бы предпочел сделать это с помощью fabricjs. Кто-нибудь знает, как реализовать прикрепленное изображение с помощью «fabriicjs»?

Как это:

Answer 1

Вот один из способов сделать вырез-многоугольник на FabricJS:

AFAIK, FabricJS еще не поддерживают композитинга необходимо создать вырезы из своих полигонов , так что обходной путь.

1. Нарисуйте многоугольник выреза на холсте html5. For example

   • Нарисуйте многоугольник из указанных вами точек.
   • .globalCompositeOperation='destination-out'. Это приведет к тому, что все новые чертежи будут действовать как «ластик» и вырезают любые существующие пиксели под новыми чертежами.
   • Нарисуйте вырез из указанных вами точек.

2. Используйте html5-холст в качестве источника изображения для нового Fabric.Image.

   // Create your polygon with transparent cuts on this html5 canvas 
   // Use destination-out compositing to "punch holes" in your polygon 
   var html5canvas=document.getElementById('myhtml5CanvasElement'); 
   
   // then use the html5 canvas as an image source for a new Fabric.Image 
   var c=new Fabric.Image(html5Canvas);