Изображение не перетаскивается на холст 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]);
    }
}

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

В качестве теста я добавил draggable = "true" к следующему изображению в div и протестировал его в Chrome:

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

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

Answer 1

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

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

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