KineticJS青少年没有'当鼠标悬停在阶段内时，不要运行

KineticJS tween doesn't run when mouseover is within stage

本文关键字：段内时 运行 悬停 鼠标 青少年 KineticJS      更新时间：2023-09-26

我在一层中设置了3个形状，并将其添加到舞台中。这3个形状都有一个mouseover/mousenter事件正在侦听。当它启动时，它们的一些属性会产生动画。

当鼠标悬停在舞台外时，效果很好，但当鼠标从一个形状悬停到另一个形状时，事件会触发，但没有tween。

我添加了stage.draw（）；和layer.draw（）；但什么都没有。

下面是一个代码笔示例：http://codepen.io/netgfx/pen/JDBIc

请注意，当鼠标悬停在console.log中的形状上时，消息看起来是正确的，但tween不会开火。。。

我看到的第一个问题是，您无法控制图像添加到舞台/层的顺序。因此，每个图像都可以在不同的时间完成加载，并在不同的时刻添加到舞台/层中。

你可以用两种方法解决这个问题：

  1. 通过执行类似于的操作在加载时订购图像

    var img1 = new Image();
img1.onload = function() { //Load first image
  //Create 1st Kinetic Object
  var img2 = new Image();
  img2.onload = function() { //Load second image after first image has been loaded
    //Create 2nd Kinetic Object
    var img3 = new Image();
    img3.onload = function() { //Load third image after 2nd image is loaded
      //Create 3rd Kinetic Object
    }
  }
}

  2. 在你正在花呢的3个形状上使用zIndex，请参阅zIndex的文档。（请注意，函数拼写为zIndex，而对象属性拼写为zIndex

第二个问题（你的问题）是，同时有两个tween被呼叫，但其中只有一个被解雇。我相信订单是这样的：

  1. Middle Mouseout解雇了tween
  2. 鼠标左键或右键紧接着就触发了tween，这从来没有发生过，因为mouseout tween

与其每次mouseenter和mouseout都创建一个tween并在Finish上销毁它们，为什么不在mousecenter上创建tween一次并调用.play()，并在mouseout上调用.reverse()呢。通过这样做，您可以节省所需的tween数量，并防止影响相同节点的tween之间的冲突。

相关文章：