我创建了一个 Canvas 元素。在这里,我从工具栏中拖放图像。现在我想要获取图像,并根据鼠标移动事件定位它。但无法获取图像。我只想仅当鼠标位于图像上方时移动图像,而不是当鼠标位于 Canvas 边界内时移动图像。
我的代码示例:
$scope.moves = function () {
x = document.getElementById("canvasOne");
canvas = x.getContext("2d");
img = document.getElementById("gn");
x.addEventListener("dragenter", function (e) {
e.preventDefault();
}, false);
x.addEventListener("dragover", function (e) {
e.preventDefault();
}, false);
x.addEventListener("drop", droped, false);
};
function droped(e) {
var xpos = e.clientX;
var ypos = e.clientY;
canvas.drawImage(img, xpos, ypos);
}
function moving(e) {
canvas.clearRect(0, 0, x.width, x.height);
var xpos = e.clientX;
var ypos = e.clientY;
canvas.drawImage(img, xpos - 250, ypos - 250);
}
最佳答案
canvas 2d api 以所谓的“立即模式”进行绘制。这意味着,API 不会跟踪绘制的形状和对象。画完之后它就会忘记自己画的是什么。
所以你必须自己跟踪图像。您可以使用 ImageModel 列表来做到这一点,如下所示:
var images = [];
images[0] = {x: 100,
y: 100,
width : 300,
height : 400,
imageData};
您可以为 Canvas 上放置并绘制的每张图像创建一个与上面类似的对象,并将其添加到列表中。之后,您只需迭代 MouseListener 中的列表图像,并测试当前鼠标坐标是否在列表中的这些图像之一内。然后您可以在新坐标处重新绘制图像
关于javascript - 有没有办法获取canvas的子元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26843330/