canvas - 画布上的可拖动图像和鼠标事件

Question

我有一个画布，上面有多个可拖动的图像。如果我单击它，我想将图像移到顶部，但它不起作用..如果我在 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]);
    }

Answer 1

尝试改变这个：

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

对此：

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

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

JSFIDDLE