如何在 fabricjs 多边形中打洞
How to make a hole in fabricjs polygon
我想用 fabricjs 在多边形内部打一个洞。我可以使用正常的 html5 canvas 逆时针旋转，如下所示，但我更愿意使用 fabricjs。有谁知道如何使用 'fabriicjs' 实现附加图像？
像这样：
这是一种在 FabricJS 上绘制裁剪多边形的方法：
据我所知，FabricJS 尚不支持从其多边形创建切口所需的合成，因此这里有一个解决方法。
将切出的多边形绘制到 html5 canvas 上。 For example
- 从您指定的点绘制多边形。
- 设置
.globalCompositeOperation='destination-out'。这将导致所有新绘图都充当 "eraser" 并将删除新绘图下的所有现有像素。
- 从您指定的点绘制切口。
使用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);
我想用 fabricjs 在多边形内部打一个洞。我可以使用正常的 html5 canvas 逆时针旋转，如下所示，但我更愿意使用 fabricjs。有谁知道如何使用 'fabriicjs' 实现附加图像？
像这样：
这是一种在 FabricJS 上绘制裁剪多边形的方法：
据我所知，FabricJS 尚不支持从其多边形创建切口所需的合成，因此这里有一个解决方法。
将切出的多边形绘制到 html5 canvas 上。 For example
- 从您指定的点绘制多边形。
- 设置
.globalCompositeOperation='destination-out'。这将导致所有新绘图都充当 "eraser" 并将删除新绘图下的所有现有像素。 - 从您指定的点绘制切口。
使用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);