消しゴム使用時に背景画像を保存する

PaperJSを使用して消去機能付きの描画ボードを構築する必要があります。描画ボードには背景イメージが必要で、人々はキャンバスに描画したり、既存のパスを消去したりすることができます。消しゴム使用時に背景画像を保存する

//erase function 
function onMouseDown(event) { 
    path = new paper.Path(); 
    path.strokeColor = 'red'; 
    path.strokeWidth = 10; 
    path.strokeCap = 'round'; 
    path.blendMode = 'destination-out'; 
}  

function onMouseDrag(event) {   
    path.add(event.point);     
} 

//setup background image 
var bgimage = "./cat.jpg"; 
var raster = new paper.Raster({ 
    source: bgimage, 
    position: paper.view.center 
});

この方法を使用する際の問題は、背景イメージも消去されることです。

消去結果：http://i.stack.imgur.com/0D4TU.png
JSFiddle：https://jsfiddle.net/9kaffsg4/2/

背景画像を消去せずに、既存のパスを消去する方法はありますか？

出典

2016-05-04 kkkkky

正確に何をしたいですか？背景画像は編集可能になりますか？ –

消しゴムに白い部分（コードがする部分）を追加するか、色を削除するか（バックグラウンドイメージが表示されます）、または既存のパスをカット/分割/削除しますか？ –

背景画像が変更されない場合は、<canvas>に<img>と記載してください。

イメージを編集できるようにするには、イメージを描画してから、図面（別々に扱う）をフレームごとに再描画することができます。

出典

2016-05-04 07:50:35

私はすでにimgをキャンバスの外に置いています。これは私の動作例https://jsfiddle.net/9kaffsg4/2です。 – kkkkky

あなたの方法を説明するコードを投稿できますか？ – kkkkky

あなたの問題についてもっと教えてくれるわけではありません。 –

私は2つのキャンバスを使用して問題を解決しました（1つは基本的な描画機能用で、もう1つは背景キャンバスです）。そして、2つのキャンバスを重ねる。

出典

2016-05-12 08:07:34 kkkkky

レイヤーの使用を検討しましたか？ –

最初のコード例を拡張して、レイヤーをソリューションとして実証できるようにしました。基本的に、3つのレイヤーが作成されます。それらは表示された順序で作成されます（1：背景、2：前景、3：clearBtn）。前に作成されたレイヤーは、後で作成されるレイヤーの「下に」視覚的に表示されます。

スタティックラスタグラフィックを一番下のレイヤー（背景）に保ち、中間レイヤー（フォアグラウンド）に "消しゴム"パスを作成し、これらの "消しゴム"パスを削除/クリアすることができます「クリア」ボタンをクリックしてください。消去ボタンは最上層にあり、「消しゴムパス」によって隠されることはありません。レイヤーが提供する追加された組織的コントロールを強調する明確なボタンを追加しました。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.12/paper.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style type="text/css"> 
 
    canvas { 
 
     border: 1px solid #000; 
 
    } 
 
    </style> 
 
    <script type="text/paperscript" canvas="myCanvas"> 
 
    var layers = { 
 
    "background": new Layer(), 
 
    "foreground": new Layer(), 
 
    "clearBtn": new Layer() 
 
    }; 
 
    
 
    var paths = []; 
 
    
 
    //erase function 
 
    function onMouseDown(event) { 
 
     layers.foreground.activate(); 
 
     path = new paper.Path(); 
 
     path.strokeColor = 'red'; 
 
     path.strokeWidth = 10; 
 
     path.strokeCap = 'round'; 
 
     path.blendMode = 'destination-out'; 
 
     paths.push(path); 
 
    }  
 
    
 
    function onMouseDrag(event) { 
 
     layers.foreground.activate(); 
 
     path.add(event.point); 
 
    } 
 
    
 
    //setup background image 
 
    layers.background.activate(); 
 
    var bgimage = "http://placehold.it/300x150"; 
 
    var raster = new paper.Raster({ 
 
     source: bgimage, 
 
     position: paper.view.center 
 
    }); 
 
    
 
    // Build a "clear button" 
 
    // Clicking this will remove all children 
 
    // from the foreground layer 
 
    layers.clearBtn.activate(); 
 
    var clearBtn = new Path.Rectangle({ 
 
    point: new Point(250, 2), 
 
    size: new Size(50, 20), 
 
    style: { 
 
     fillColor: 'white', 
 
     strokeColor: 'black' 
 
    } 
 
    }); 
 
    var txt = new PointText({ 
 
    point: clearBtn.position + new Point(0,4), 
 
    content: 'Clear', 
 
    justification: 'center' 
 
    }); 
 
    var clearBtnGrp = new Group({ 
 
    children: [clearBtn, txt] 
 
    }); 
 
    clearBtnGrp.on('mousedown', function() { 
 
    for (var i = 0; i < paths.length; i++) { 
 
     paths[i].remove(); 
 
    } 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <canvas id="myCanvas"></canvas> 
 
</body> 
 
</html>

編集前の例では、すべての層の子供必ずしも明確でなかったので、私は、アレイ内のキャッシュパスにこれを更新しました。

出典

2016-06-05 13:48:29

描画したい各レイヤーをアクティブにする必要があることを付け加えておきます。 –

消しゴム使用時に背景画像を保存する

答えて

関連する問題