有没有办法获取画布的子元素？答案

【问题标题】：Is there a way to get child element of canvas?有没有办法获取画布的子元素？
【发布时间】：2015-01-06 17:29:51
【问题描述】：

我创建了一个画布元素。在这里，我从工具栏中拖放图像。现在我想获取图像，它相对于鼠标移动事件的位置。但无法获取图像。我只想在鼠标悬停在图像上时移动图像，而不是在鼠标位于画布边界内时移动图像。

我的代码示例：

$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);
}

【问题讨论】：

您可以将图像的位置和尺寸保存在画布上，然后使用它。

标签： javascript html angularjs canvas

【解决方案1】：

canvas 2d api 以所谓的“立即模式”进行绘制。这意味着，api 不会跟踪绘制的形状和对象。它会在画完后马上忘记它画过的东西。

因此，您必须自己跟踪图像。您可以使用 ImageModels 列表来做到这一点，如下所示：

var images = [];
images[0] = {x: 100,
             y: 100,
             width : 300,
             height : 400,
             imageData};

您为每个在画布上拖放和绘制的图像创建一个与上述类似的对象，并将其添加到列表中。之后，您只需要遍历 MouseListener 中的列表 images 并测试当前鼠标坐标是否在列表中的这些图像之一内。然后你可以在新坐标处重新绘制图像

【讨论】：