图像未在 HTML5 画布上拖动

Question

我正在使用以下 JavaScript 函数将图像（节点）添加到 HTML5 画布：

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 事件。我查看了各种样本，但无法确定我在做什么不同。

作为测试，我将 draggable="true" 添加到 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/