javascript - paper.js でパスを消去しますか?

Question

基本的に、キャンバスのglobalCompositeOperationを「destination-out」に設定して新しいパスを作成したいと考えています。これは可能ですか？もしそうなら、どのように？

Item にはhttp://paperjs.org/reference/item#blendmodeという 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();

新しいレイヤーを作成するたびに、それがプロジェクトのアクティブなレイヤーになり、必要に応じて 2 番目のレイヤーの上に描画できます。

単純な「元に戻す」ボタンが必要な場合は、次のことができます。

 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;
     }
}