キャンバス内のオブジェクトをドラッグします
キャンバス内の複数のオブジェクト（画像、形状など）にドラッグ動作を割り当てる使いやすい方法を探しています。オブジェクトをドラッグするための良い方法やライブラリを知っている人はいますか？ありがとう
独自のマウスイベントを作成するには少し手間がかかります。理想的には、何らかのミニライブラリを作成または使用する必要があります。近い将来、こういうものを作ろうと思っています。とにかく、私はjsFiddleにドラッグアンドドロップのデモを作成して、画像をドラッグする方法を示しました- ここで表示できます 。
次のようなドラッグ可能な画像を作成できます。
var myImage = new DragImage(sourcePath, x, y);
これについて質問があれば教えてください。それが役に立てば幸い。
編集
複数の画像をドラッグするときにバグがありました。 これが新しいバージョンです 。
あなたがチェックしたいと思うかもしれないもう一つのことは easeljs それはAS3のスタイルのようなものです... mouseEventsドラッグなど...
HTML Canvasは、SVGやHTMLとは異なり、非保持（または即時）グラフィックAPIを使用します。これは、キャンバスに何か（画像など）を描画しても、そのことについての知識が残っていないことを意味します。残っているのは、前のすべてのピクセルとブレンドされたキャンバス上のピクセルだけです。ピクセルのサブセットを実際にドラッグすることはできません。一つには、それらの下にあったピクセルがなくなっています。あなたがしなければならないことは：
mousedownイベントを追跡し、ドラッグするのに「正しい」場所にあるかどうかを確認します。 （どの画像/オブジェクトがどこにあるかを追跡し、マウスヒット検出を実行する必要があります。）- ユーザーがマウスをドラッグすると、キャンバス全体を最初から再描画し、現在のマウスの位置と最初のマウスダウンの位置の間のオフセットに基づいて、毎回新しい位置に画像を描画します。
私が提案するかもしれないいくつかの選択肢：
- SVG
- 純粋なHTML
- 複数のレイヤードキャンバス、および1つの透明なキャンバスを別のキャンバスの上にドラッグします。
HTML Canvasは、多くのことに適しています。明確に見える（しかしそうではない）「要素」とのユーザーの相互作用は、それらの1つではありません。
Update：キャンバス上でのドラッグを示すいくつかの例を次に示します。
- http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
- http://www.redsquirrel.com/dave/work/interactivecanvas/
- http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html
ただし、これらのいずれも、形状を追跡するための個別のライブラリを作成していません。
KineticJSは、アニメーション専用に使用できるJavascriptライブラリの1つです。
ここにリンクがあります html5canvastutorials
キャンバスと jCanvas
あなたは間違いなくチェックアウトしたいと思うでしょう jCanvas 。これはCanvasの非常にクリーンなラッパーであり、コードを複雑にすることなく多くの扉を開くことができます。こんな風になります。
たとえば、ドラッグと再描画が組み込まれた、目的に近いものの小さなサンドボックスを次に示します。
2つの要素の間に矢印を描く。
私はDIVとjQueryを使ってすべてを行うという道を進んでいましたが、対話性と品質が常に不足していました。
それが私のような他の人を助けることを願っています。
JP
ドラッグ可能なウィンドウ、カード、図形、画像などの新しいオブジェクトを作成するときに、それらを「現在選択されていないオブジェクト」の配列に格納できます。それらをクリックするか、選択するか、ドラッグを開始すると、「選択されていないオブジェクト」の配列からそれらを削除できます。このように、特定のmousedownイベントまたはmousemoveイベントが選択されていないかどうかを確認することで、そのイベントで何を移動できるかを制御できます。選択されている場合、「選択されていない」配列には含まれず、図形をドラッグしながら、ドラッグされることなく他の図形の上にマウスポインタを移動できます。
ドラッグするオブジェクトの配列を作成すると、階層化にも役立ちます。 Canvasは、最前面のオブジェクトに属するピクセルを最後に描画します。したがって、オブジェクトが配列内にある場合は、配列内の要素のようにインスタンスをobjectArray [20]からobjectArray [4]に切り替えるだけで、配列を反復処理し、配列要素に格納されているオブジェクトを描画するときに、他の要素かどうかを変更できます。オブジェクトは、他のオブジェクトの上または後ろに表示されます。