KineticJS从另一个中减去一个形状

Question

我有一个KineticJs舞台，用户可以在其中绘制对象 - 矩形和多边形。

我希望用户能够选择任意两个对象，并从第二个选定的形状中减去第一个选择的形状。

理想情况下，用户可以从上下文菜单中选择选项（“减去此形状”，“从此形状中”），切割形状不会受到影响，只有切割形状会发生变化。

我坚持的是如何从形状B中减去形状A.

这是一张图纸的链接，显示了我的意思：

https://docs.google.com/drawings/d/1X8ccw2YqDwMF8JwUYy_TeUnMX-4q6PcPsH8SjViyO3E/edit?usp=sharing（“上下文菜单”项是浮动矩形）。

这可能吗？

Answer 1

使用其他形状更改一个形状称为合成。

在你的情况下，从现有矩形中减去新圆圈将是一个称为“目的地输出”的合成操作。

KineticJS不对其对象提供复合操作。

如何使用非动态html画布合成矩形减去圆圈：

// draw the rectangle

ctx.fillStyle="lightblue";
ctx.fillRect(20,20,80,160);

// save the context state

ctx.save();

// set compositing to destination-out
// all new drawings will "cut-out" existing
// drawings where they both overlap

ctx.globalCompositeOperation="destination-out";

// draw the circle

ctx.beginPath();
ctx.arc(100,90,30,0,Math.PI*2);
ctx.closePath();
ctx.fill();

// restore the context state
// This also turns off compositing 

ctx.restore();

您可以采取哪些措施来实现您在KineticJS中的效果

演示：http://jsfiddle.net/m1erickson/m34tn/

• 创建离屏画布
• 在画布上绘制矩形 - 负圆圈
• 使用该画布作为Kinetic.Image的来源

结果是你将拥有一个具有所需形状的动态图像对象。