html - HTML5 キャンバスから別のキャンバスに図形をドラッグ アンド ドロップする

Question

2 つのキャンバスがあるとします。キャンバスにある図形をドラッグして、別のキャンバスにドロップしたいと思います。それは可能ですか？

私の質問を理解してくれてありがとう。

Answer 1

それは間違いなく可能です。ただし、特に簡単なことではありません。基本的な考え方をお伝えします。計算と実装は自分で行う必要があります。

1. ソース形状の境界を把握します。
2. そのピクセルデータを取得し、それを使用して、古いものの上に新しいキャンバス要素を構築します。これを使用してドラッグを処理します。
3. この一時的なキャンバスにドラッグロジックを実装します。
4. ターゲットキャンバス上の「ドロップ」を検出し、境界がどこに当たるかを把握します。ターゲットピクセルデータをドラッグ可能なデータに置き換えます。
5. ドラッグ可能なキャンバスを取り除きます。

これがお役に立てば幸いです。

Answer 2

最も簡単なのは、DOM プロキシ オブジェクトを使用して、マウス イベントをキャッチし、キャンバスをオーバーレイすることです。問題のコードは、ライブラリの使用を考慮すると非常に複雑であるため:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

キャンバスからキャンバスへの移動は、まだ自分で理解する必要があります。ユースケースは非常にまれであり、ドラッグがキャンバス上にないときにオブジェクトをアニメーション化する必要があるためです。確かに可能ですが、非常に複雑です。

Answer 3

私はあなたの質問を理解していないかもしれませんが、形はあなたが描いた文脈にあるのではないでしょうか?

例：

context1.drawImage(...);
context2.drawImage(...);

単にコンテキストを変更しますか？