我想用fabricjs
在多边形内部打一个洞。我可以使用普通的 html5 Canvas 逆时针制作它,如下所示,但我更喜欢使用 fabricjs 制作它。有谁知道如何使用“fabriicjs”实现附加图像?
像这样:
最佳答案
这是在 FabricJS 上绘制剪切多边形的一种方法:
据我所知,FabricJS 尚不支持从多边形创建切口所需的合成,因此这里有一个解决方法。
将剪切的多边形绘制到 html5 Canvas 上。 For example
- 从指定点绘制多边形。
- 设置
.globalCompositeOperation='destination-out'
。这将使所有新绘图充当“橡皮擦”,并删除新绘图下的任何现有像素。 - 从指定点绘制切口。
使用 html5 canvas 作为新
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);
关于javascript - 如何在fabricjs多边形上打洞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35773416/