14

fabricjs によって管理されているキャンバスにアイテム (画像や他のキャンバスからの他のオブジェクトなど) をドロップするにはどうすればよいですか? キャンバス内でアイテムを移動する方法の例をたくさん見つけましたが、アイテムを外側の要素からキャンバスにドラッグ アンド ドロップしたいと思います。

4

3 に答える 3

21

あなたが例を求めたので、私はまだ自分で試していません。

フィドルの例

マークアップ

<div id="images">
    <img draggable="true" src="http://i.imgur.com/8rmMZI3.jpg" width="250" height="250"></img>
    <img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="252" height="295"></img>
    <img draggable="true" src="http://i.imgur.com/wMU4SFn.jpg" width="238" height="319"></img>
</div>

<div id="canvas-container">
    <canvas id="canvas" width="800" height="600"></canvas>
</div>

JSの内訳

1.Fabric.canvasインスタンス

もちろん、最初にキャンバスが必要です。

var canvas = new fabric.Canvas('c');

2. 特徴検出 (オプション)

キャンバスがあるという事実により、ブラウザにもドラッグアンドドロップがある可能性が非常に高くなるため、これが必要かどうかはわかりません。Modernizrを使用すると、次のように使用できます。

if (Modernizr.draganddrop) {
    // Browser supports HTML5 DnD.

    // Bind the event listeners for the image elements

    // Bind the event listeners for the canvas
} else {
    // Replace with a fallback to a library solution.
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

3. イベント

繰り返しますが、以下のソース記事とは異なり、ソース要素とターゲット要素が異なります (その記事の例ではdiv、同じ親コンテナー内で s を移動するだけです)。ドラッグされますが、ほとんどはドロップ先の要素にバインドされています。

注: これは技術的には Fabric.js に関する質問であることは承知していますが<canvas>、Fabric.js を使用してオブジェクトを に追加するコンテキストでのドラッグ アンド ドロップに関する質問であるため、もう少し詳しく説明します。今DnDのものについて。

のために<img>

  • dragstart（不透明度を下げるためにここにクラスを追加しました）
  • dragend（そしてここでそのクラスを削除しました）

の場合#canvas-container:

  • dragenter（キャンバスコンテナに気の利いた点線を与えるクラスを追加しました）
  • dragover: ここでevent.dataTransfer.dropEffectは、ネイティブ カーソル タイプのいずれかを表示するようにプロパティを設定できます。デフォルトは'move'ここにありますが、'copy'実際には要素を削除しないため、に設定し<img>ます（実際、フィドルでは、たとえば複数のMcCluresを作成できます）。
  • dragleave（ここで点線を削除）
  • drop: このイベントのハンドラーは、fabric.Imageオブジェクトを作成して追加します (フィドルを参照)。
if (Modernizr.draganddrop) {
    // Browser supports HTML5 DnD.

    // Bind the event listeners for the image elements
    var images = document.querySelectorAll('#images img');
    [].forEach.call(images, function (img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
    });
    // Bind the event listeners for the canvas
    var canvasContainer = document.getElementById('canvas-container');
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
} else {
    // Replace with a fallback to a library solution.
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

ソース:

于 2013-06-18T17:14:33.340 に答える