kineticjs domからキャンバスに画像をドラッグアンドドロップする

Question

私は既にdomに画像をロードしています。その画像をキャンバスにドラッグしてキャンバスにドロップし、そこからkineticjsオブジェクトを作成したいと考えています。

イメージをドラッグ可能にする方法がわかりません。また、DOM上に既に存在するイベントをドラッグアンドドロップする方法をキャンバスに反映させる方法がわかりません。誰かが私にこれを行う方法を教えてもらえますか？

チュートリアルのほとんどは、キャンバスやファイルシステムからドラッグアンドドロップする方法を示していますが、私はDOMからキャンバスにドラッグする方法を探しています。

背景情報： 写真を拡大するために、キャンバスにドラッグアンドドロップできるメニューシステムやサムネイルがたくさんあります。

ありがとうございます！

Answer 1

問題ありません！

1 html5から「ドラッグアンドドロップ」を使用する必要があります。チュートリアル：http://www.html5rocks.com/en/tutorials/dnd/basics/

2画像に設定DOMイベント：コンテナオブジェクトのための

var dragSrcEl = null; 
//image 
document.getElementById("yoda").addEventListener('dragstart',function(e){ 
     dragSrcEl = this; 
}); 

3イベント：

var con = stage.getContainer();   
con.addEventListener('dragover',function(e){ 
    e.preventDefault(); // !!important 
}); 
//insert image to stage 
con.addEventListener('drop',function(e){ 
    var image = new Kinetic.Image({ 
     draggable : true 
    }); 
    layer.add(image); 
    imageObj = new Image(); 
    imageObj.src = dragSrcEl.src; 
    imageObj.onload = function(){ 
     image.setImage(imageObj) 
     layer.draw() 
    }; 
}); 

そしてもちろん、完全な例を：http://jsfiddle.net/lavrton/n4w44/