如何在fabricjs多边形中打一个洞

Question

我想用fabricjs 在多边形内部打一个洞。我可以使用普通的 html5 画布逆时针制作它，如下所示，但我更喜欢使用 fabricjs 制作它。有谁知道如何使用“fabriicjs”实现附加图像？

像这样：

Answer 1

这是在 FabricJS 上绘制剪切多边形的一种方法：

据我所知，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);