Изображения Не перетаскивание на HTML5 Canvas

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]); 
    } 
}

Я надеюсь, чтобы иметь возможность перемещать изображения вокруг на холсте перетаскивание, но у меня проблемы с самого начала. Кажется, что атрибут draggable на изображении никогда не устанавливается, потому что событие dragstart никогда не поднимается. Я просмотрел различные образцы, но я не смог определить, что я делаю.

В качестве теста, я добавил перетаскиваемым = «истина» к следующему изображению в DIV и протестировали его в Chrome:

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

С выше изображения в DIV, я заметил, Chrome начинает перетаскивание как Я бы ожидал. В чем разница между тем, что я делаю выше, и тем, что я делаю с изображением на холсте (помимо очевидного бита об использовании разметки)?

Answer 1

Перетаскивание работает только с элементами DOM. Холст является элементом DOM, но содержит только растровое изображение (набор пикселей). При вызове drawImage (или любой другой вызов вызова) вызов вычисляется в данные необработанного изображения, представленные на растровом изображении.

Чтобы походить на перетаскивание, вы должны вручную выполнить вычисления. Обычно это делается путем отдельного хранения позиции (на холсте/в объектах «мир» или «сцена») нарисованного объекта, вычисления координат экрана на основе сохраненной позиции и, наконец, сопоставления их с координатами мыши. Я уверен, что есть несколько библиотек, которые могут выполнять эту работу за вас, я никогда не использовал ее, поэтому я не могу ее рекомендовать.

Это кажется многообещающим: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/