圖像不拖在HTML5畫布

Question

我添加圖像（節點）的HTML5畫布下面的JavaScript函數：

function drawNodes(nodes, context) { 
    for (var x in nodes) { 
     // Create a closure to prevent a modified closure with the image.onload event handler 
     var f = (function (node) { 
      var image = new Image(); 

      image.id = myGetIdFunction(); 
      image.src = 'image.png'; 
      image.draggable = true; 
      image.dragstart = function (e) { 
       alert('Test'); 
      }; 
      image.onload = function() { 
       context.drawImage(image, node.attributes.position.x, node.attributes.position.y); 
      }; 
     }); 

     f(nodes[x]); 
    } 
}

我希望能夠通過左右移動圖像在畫布上拖放，但我從一開始就遇到問題。看起來圖像上的可拖動屬性從未設置，因爲dragstart事件從不會引發。我已經看過各種樣本，但我一直無法確定我在做什麼不同。

作爲測試，我在一個div加入可拖動=「真」，以下面的圖像和內鉻進行了測試：

<div style="background-color: #eeeeee; height: 100px; width: 100px;"> 
    <img src="image.png" draggable="true" /> 
</div>

隨着一個div上述圖像，我注意到鉻開始象拖拽我會期待的。我在上面做的和我在畫布上用圖像做什麼之間有什麼區別（除了關於使用標記的顯而易見的地方）？

Answer 1

拖放只能使用DOM元素。畫布是一個DOM元素，但只包含一個位圖（一組像素）。當您調用drawImage（或進行任何其他繪製調用）時，該調用將被計算爲位圖上表示的原始圖像數據。

要模擬拖放，您必須手動進行計算。這通常是通過單獨存儲繪製對象的位置（在畫布上/在對象「世界」或「場景」中），根據存儲的位置計算屏幕座標，最後將它們與鼠標座標進行匹配。我確信有幾個庫可以爲你做這項工作，我從來沒有使用過自己，所以我不能真正推薦任何。

這似乎前途：http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/