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事件。我看过各种样本，但我无法确定我做的不同。

作为测试，我在div中将以下图像添加了draggable =“true”并在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/

图像不在HTML5画布上拖动

1 个答案: