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

Posted 2023-05-08

【中文标题】画布上的可拖动图像和鼠标事件

【英文标题】：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]);
    

【参考方案1】：

尝试改变这个：

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

到这里：

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

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

JSFIDDLE