画布上的可拖动图像和鼠标事件答案

【问题标题】：Draggable images on Canvas and mouse events画布上的可拖动图像和鼠标事件
【发布时间】：2013-09-17 02:42:42
【问题描述】：

我有一个画布，上面有多个可拖动的图像。如果我单击它，我想将图像移至顶部，但它不起作用.. 如果我在 for 循环之外手动插入图像，所有鼠标事件都会起作用。

代码如下：

for(i=0;i<myImagesPath.length;i++)
    {
        var img = new Image();
        img.src = myImagesPath[i];
        myImages[i] = new Kinetic.Image({
          image: img,
          x: 30+100*i,
          y: stage.getHeight() - 100 - 10,
          width: 100,
          height: 100,
          draggable: true
        });

        // add cursor styling

        myImages[i].on('mouseover', function() {
          document.body.style.cursor = 'pointer';
        });
        myImages[i].on('mouseleave', function() {
          document.body.style.cursor = 'default';
        });
        myImages[i].on('click', function() {
          myImages[i].moveToTop();
        });

        layer.add(myImages[i]);
    }

【问题讨论】：

标签： canvas drag-and-drop mouseevent draggable kineticjs

【解决方案1】：

尝试改变这个：

myImages[i].on('click', function() {
  myImages[i].moveToTop();
});

到这里：

myImages[i].on('click', function() {
  this.moveToTop();
  layer.draw();
});

您需要draw() 图层才能在画布上呈现更改。使用this 可确保选择正确的节点。

JSFIDDLE

【讨论】：