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

Question

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

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

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

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

这是显示我的意思的图形的链接：

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

这可能吗？

Answer 1

使用另一种形状更改一种形状称为合成。

在您的情况下，从现有矩形中减去新圆将是一种称为“ destination-out”的合成操作。

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的来源

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