图像不在HTML5画布上拖动-Java 学习之路

我正在使用以下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开始像我期望的那样拖动 . 我正在做什么和我在画布中使用图像做什么之间有什么区别（除了关于使用标记的明显一点）？

1 回答

2

拖放仅适用于DOM元素 . 画布是DOM元素，但仅包含位图（像素集合） . 当您调用 drawImage （或执行任何其他绘制调用）时，将调用计算到位图上表示的原始图像数据 .

要像拖放一样，您必须手动执行计算 . 这通常通过分别存储绘制对象的位置（在画布上/在对象“世界”或“场景中”），基于存储的位置计算屏幕坐标并最终将它们与鼠标坐标匹配来完成 . 我敢肯定有几个库可以为你做这个工作，我从来没有自己用过，所以我不能真正推荐任何一个 .

这看起来很有希望：http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

回复于 2024-04-20T21:26:23+08:00

图像不在HTML5画布上拖动

1 回答

相关问题