私はステージ上にImageを持っていて、それを描画して消去しています。以下の方法動的に描画されたグラフィックスを使用してjsクローンを作成する
http://jsfiddle.net/lannymcnie/ZNYPD/
を使用して今私は、ユーザーの図面のクローンを取りたいが、その動作していません。試しました
var drawingAreaClone = drawingArea.clone(true);
しかし、それは動作しません。
クローンする方法はありますか？親切にヘルプ
あなたが投稿デモはクリアされません。代わりに各フレームのグラフィックスをクリアします。シェイプを複製すると、指示がありません。あなただけのビジュアルが必要な場合はカタリンの答え@
は右である - しかし、別のオプションではなく、グラフィックをクリアするグラフィック・ストア（）メソッドを使用することです：http://createjs.com/docs/easeljs/classes/Graphics.html#method_store
基本的に、このメソッドは単に内部ポインタを設定しますグラフィックはから引かれる。各ドローの後に記憶することにより、将来のドローコールのみが行われる。これはあなたが投稿したデモと同じアプリケーションを持ちますが、後でunstore()と呼ぶだけで、最初から描画するグラフィックスをリセットすることができます。この方法でクローンを作成すると、うまくいくはずです。
var erase = document.getElementById("toggle").checked;
wrapper.updateCache(erase?"destination-out":"source-over");
//drawing.graphics.clear();
drawing.graphics.store(); // Don't draw anything before this point
// Later
var newGraphics = drawing.graphics.clone();
newGraphics.unstore(); // Might be redundant
var shape = new Shape(newGraphics);
グラフィックスの複製はグラフィックスツリー全体を再作成せず、単に命令を格納する配列を複製することに注意してください。ファクトの後に個々の命令を変更すると、そのGraphicsオブジェクトのクローンに影響を与えます。
希望に役立ちます。
描画された線の形状がdrawingAreaCloneの子である場合、クローンは正常に動作するはずです。しかし
、あなたはそれはそれで動作させることができない何らかの理由で、あなたはキャンバスのスナップショットを取ることができ、このようなimg型varaibleとして保存した場合：
var snapshot = new Image(); snapshot.src = canvas.toDataURL();
また、あなたが最初の画像を保存した後、あなたはこれらの余分な命令でrectangleに描画領域を制限することができ、全体のキャンバスのスナップショットを作成したくない場合：
var ctx = canvas.getContext('2d');
canvas.width = snapshot.width;
canvas.height = snapshot.height;
ctx.drawImage(snapshot, rectangle.x, rectangle.y, rectangle.width, rectangle.height, 0, 0, rectangle.width, rectangle.height);
snapshot.src = canvas.toDataURL();