如何在fabricjs多边形中创建一个洞

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

像这样：

Answer 1

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

AFAIK，FabricJS还不支持从多边形创建剪切所需的合成，所以这是一个解决方法。

1. 将剪切多边形绘制到html5canvas上。 例如

   • 从指定点绘制多边形。
   • 设置.globalCompositeOperation='destination-out' 。 这将导致所有新绘图充当“橡皮擦”，并将删除新绘图下的任何现有像素。
   • 从指定点绘制切口。

2. 使用html5canvas作为新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);