javascript - 擦除 paper.js 中的路径？

Question

我基本上想创建一个新路径，将画布 globalCompositeOperation 设置为“destination-out”。这可能吗？如果是这样，怎么做？

我注意到 Item 有一个 blendMode 属性：http://paperjs.org/reference/item#blendmode，但尝试不同的值并不能提供预期的效果。

Answer 1

http://jsfiddle.net/D8vMG/12/

根据您最近的评论，您需要创建图层，如下所述：

http://paperjs.org/tutorials/project-items/project-hierarchy/#removing-items-and-children

然后您可以将路径添加到图层并执行以下操作：

 //add image to project as background
 // ... your code here ...

 var secondLayer = new Layer();

每当您创建一个新层时，它就会成为项目的活动层，然后您可以在第二层之上绘制您想要的所有内容。

如果你想要一个简单的“撤消”按钮，你可以这样做：

 function onMouseDown(event) {
     if (window.mode == "drawing") {
        myPath = new Path();
        myPath.strokeColor = 'black';
     }
     else if (window.mode == "undo") {
        myPath.opacity = '0'; //this makes the last path used completely see through
        // or myPath.remove(); // this removes the path.
        //if you're intent on something that writes and erases, you could do 
     }
 }

但是你正在寻找的是这样的：

 function onMouseDrag(event) {
   if (window.mode == "drawing") {
     myPath.add(event.point);
   }
   else if (window.mode == "erasing") {
     myPath.removeSegment(0);
   }
 }

这会从头到尾擦除路径段。对于完整的功能，您需要在点击时标识路径的东西（layer.getChildren() ？然后选择子项）。然后使用鼠标移动点，您需要识别段索引并使用 .removeSegment(index) 将其从路径中删除。

http://paperjs.org/reference/path#removesegment-index

Answer 2

好吧，简单的解决方案是只创建一条白色的路径。 http://jsfiddle.net/D8vMG/11/

function onMouseDown(event) {
    if (window.mode == "drawing") {
       myPath = new Path();
       myPath.strokeColor = 'black';
     }
     else if (window.mode == "erasing") {
        myPath = new Path();
        myPath.strokeColor = 'white';
        myPath.strokeWidth =  10;
     }
}