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

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

1 个答案: