如何用kineticjs 5.1.0制作橡皮擦作用于多层？
我想用kineticjs制作橡皮擦，但我有一些问题。
橡皮擦需要在多层（我的代码中的layerA，layerB）上有效，并且使用简单的按钮或一些复选框，我可以选择橡皮擦是否可以在第一层或第二层上工作，为什么不在所有层上工作。 我还需要保持它们的可拖动性。
她是一个小伙子，展示了我所解释的内容：
http://jsfiddle.net/junkees/jA2V8/2/
var stage = new Kinetic.Stage({ container: 'container', width: 400, height: 500 }); var layerA = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function() { var x = new Kinetic.Image({ x: 0, y: 0, image: imageObj, draggable:false }); // add the shape to the layer layerA.setListening(false); layerA.add(x); // add the layer to the stage stage.add(layerA); layerA.setZIndex(10); //layerA.draw(); }; imageObj.src="https://imagizer.imageshack.us/v2/595x397q90/707/u8q3.jpg" var layerB = new Kinetic.Layer(); var imagj = new Image(); imagj.onload = function() { var x = new Kinetic.Image({ x: 0, y: 0, image: imagj, }); // add the shape to the layer layerB.setDraggable(true); layerB.setListening(true); layerB.add(x); // add the layer to the stage stage.add(layerB); layerB.setZIndex(100); layerB.draw(); }; imagj.src = 'http://jsfiddle.net/img/initializing.png'; 我想要能够擦掉青蛙（或其他某些层）并用我的鼠标擦掉咖啡的一部分（第二层），用圆圈（半径无关紧要，我会做的）一个jquery滑块来定义它的大小;））
我正在使用最新版本的kineticjs，即5.1.0
对于这个问题的所有上一篇文章感到抱歉，我已经阅读了它们，但由于版本的原因，它们对我不起作用。 我已经搜索到谷歌让我搜索，并没有找到可以帮助我的东西，所以我问她我的问题
在这里，我发现了一些部分有用的东西：
http://jsfiddle.net/junkees/jA2V8/3/
在这个我已经创建了一个新形状并将其附加到图层，因为形状和图像都在同一层中，并且图层是可拖动的，所以它会像你看到的那样拖动它们但它只是一个我想要的微观部分：/
我编辑了我的代码和她我可以一点一点地说，我会成功做到这一点！ 她的新jsfiddle： http ： //jsfiddle.net/junkees/jA2V8/5/和她的一些问题：
- 即使我把目的地设置出去，我也无法擦除，juste写道
- 我真的不知道如何继续当我想停止“擦除”
我是否以正确的方式完成了这项工作？
globalCompositeOperation用于使用新绘图（如用鼠标拖动圆圈）“擦除”现有的canvas像素。
KineticJS还不太适合创建“橡皮擦”工具。 那是因为它还不支持globalCompositeOperation 。
解决方法是创建一个Kinetic.Shape对象，该对象允许您使用本机canvas命令进行绘制。
然后在使用像这样的Kinetic.Shape时获得对本机canvas上下文的引用：
var ctx=yourLayer.getContext()._context;
使用此本机canvas上下文，您可以使用globalCompositeOperation将自定义形状转换为橡皮擦。
ctx.globalCompositeOperation='destination-out'; // now any new drawings will erase existing pixels
你需要在每一层都要有一个Kinetic.Shape“橡皮擦”，你要用它来穿透它们。
这是一个演示： http ： //jsfiddle.net/m1erickson/tf7m3/
- 左侧25％的图像是底层（显示原始图像）
- 接下来的25％显示中间层（红色矩形，50％不透明度）
- 接下来的25％显示中间层和顶层（顶部=蓝色矩形，50％不透明度）
- 最后25％显示顶层（同样，蓝色矩形显示50％不透明度）
圆圈显示了中间层和顶层上的Kinetic.Shape橡皮擦。 他们使用’目的地’合成来擦除中间和顶层的红色和蓝色矩形。 结果是底层显示通过“擦除”的圆圈。
示例代码：
Prototype Click to "erase" top 2 layers & reveal bottom image