Есть ли способ получить дочерний элемент холста?

Question

Я создал элемент холста. Здесь я перетаскиваю изображения с панели инструментов. Теперь я хочу получить изображение, положение по отношению к событию перемещения мыши. Но не смог получить изображение. Я просто хочу перемещать изображение только тогда, когда мышь находится над изображением, а не когда мышь находится внутри границы холста.

Мой пример кода:

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

Answer 1

Полотно 2d апи рисует в так называемом "непосредственном режиме". Это означает, что api не отслеживает окрашенные фигуры и объекты. Он забудет, что он нарисовал сразу после того, как он был нарисован.

Таким образом, вам придется отслеживать изображения самостоятельно. Вы можете сделать это со списком ImageModels как так:

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

Вы создаете объект, как один выше, для каждого изображения, что был брошен и нарисованной на холсте и добавить, что в список. После этого вам просто нужно перебрать по списку изображения в свой MouseListener и проверить, находятся ли текущие координаты мыши в одном из этих изображений в списке. Затем вы можете перерисовать изображение в новых координатах.