如何在Fabric.js多边形中打洞 [英] How to make a hole in fabricjs polygon

问题描述

我想用fabricjs在多边形内部打洞.我可以使用带有逆时针方向的普通html5画布来制作它，如下所示，但是我更喜欢使用fabricjs来制作它.有人知道如何使用"fabriicjs"实现附加的图片吗?

I want to make a hole inside of polygon with fabricjs. I can make it using normal html5 canvas with counter-clockwise as shown below, but I would prefer to make it using fabricjs. Does anyone know how to implement the attached image using 'fabriicjs'?

赞:

推荐答案

这是在FabricJS上绘制抠图多边形的一种方法:

FAIK，FabricJS尚不支持从多边形创建切口所需的合成，因此这是一种解决方法.

AFAIK, FabricJS does not yet support the compositing necessary to create cutouts from its polygons, so here's a workaround.

1. 将剪切出的多边形绘制到html5画布上. 例如

• 从指定点绘制多边形.
• 设置.globalCompositeOperation='destination-out'.这将导致所有新图形都充当橡皮擦"，并剪切出新图形下的所有现有像素.
• 从指定点绘制切口.

• Draw the polygon from your specified points.
• Set .globalCompositeOperation='destination-out'. This will cause all new drawings to act as an "eraser" and will cut out any existing pixels under the new drawings.
• Draw the cutout from your specified points.

使用html5画布作为新Fabric.Image的图像源.

Use the html5 canvas as an image source for a new 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);

这篇关于如何在Fabric.js多边形中打洞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！