Question

我遇到的问题是加载到画布上的图像没有正确补间。我有mouseover和mouseout事件监听每个加载的图像。我希望图像在触发鼠标悬停时放大，在鼠标输出时反转。

问题是当我将鼠标悬停在任何图像上时，只有最后加载的图像会放大和缩小。

这与单击对象时我将遇到的另一个问题相吻合，我想要传递的属性只是最后一个加载的属性..

如何将鼠标点击和鼠标悬停在特定节点及其属性中？答案可能是一个索引，但看到我不是专业开发人员，我需要一些帮助

我在这里尝试了一个类似帖子的建议，把事件集中在我的情况，标题为“KineticJS：完成其他补间之后播放补间”（没有多个链接的声誉）。我使用部分示例代码尝试了以下http://jsfiddle.net/cr3jmy2b/30/，但它不起作用。

以下是成功加载图片并仅补间最后一张图片（http://jsfiddle.net/cr3jmy2b/27/）的代码部分。

非常感谢能够帮助或建议不同方式的人。

var x = 25;
    var xx = 25; 

    buttonSize = 52 + 10;




    for(var i=0;i<imgs.length;i++){
       if(i > 11){
        var img=new Kinetic.Image({
            x:xx,
            y:400,
            width:45,
            height:65,
            image:imgs[i],
            draggable:true
        }); l.add(img);  xx+=buttonSize;
       } else {
        var img=new Kinetic.Image({
            x:x,
            y:320,
            width:52,
            height:65,
            image:imgs[i],
            draggable:true
        });

        l.add(img); x+=buttonSize;
     }
      for(var s=0; s<oweb.length; s++){
      var ser = oweb[s];
      var sdb = ser.split("_");
      var sname = sdb[1];
      var sattrib = sdb[2];
      var sval = sdb[3];
      var sid = sdb[4];
      }


      //l.draw();

        var tween = new Kinetic.Tween({ node: img, duration: 1, scaleX: 2, scaleY: 2 });
      img.on('mouseover', function(){ tween.play(); console.log("over"); });
      img.on('mouseout', function(){ tween.reverse(); console.log("out"); });
      img.on('mousedown touchstart', function(){
      //document.getElementID(sdb[4]).checked = true;
      console.log("clicked");
      }); l.draw();
      }

    l.draw();
}

安德烈

Answer 1

@KirillSlatin回答了这个问题。你用图像和缩短代码教会了我一个更好的方法（三元运算符。我让kinectics工作得更好。使用了layer.batchDraw（）来摆脱不稳定的鼠标悬停并为5.1.0缓存添加了适当的缓动方法：Kinetic.Easings 。方法

Tween Kineticjs图像加载循环

1 个答案: