代码之家  ›  专栏  ›  技术社区  ›  MDompekidis

当鼠标悬停在舞台内时,KineticJS青少年不会运行

  •  0
  • MDompekidis  · 技术社区  · 11 年前

    我在一层中设置了3个形状,并将其添加到了舞台上。这3个形状都有一个mouseover/mousenter事件在侦听。当这激发了他们的一些财产动画。

    当鼠标悬停在舞台外时,效果很好,但当鼠标从一个形状悬停到另一个形状时,事件会触发,但不会出现青少年。

    我添加了stage.draw();和layer.draw();但什么都没有。

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

    请注意,当鼠标悬停在console.log中的形状上时,消息看起来是正确的,但tween只是没有启动。。。

    1 回复  |  直到 11 年前
        1
  •  0
  •   projeqht    11 年前

    我看到的第一个问题是,你无法控制图像添加到舞台/图层的顺序。正因为如此,每个图像可以在不同的时间完成加载,并在不同的时刻添加到阶段/层。

    您可以通过两种方式解决此问题:

    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. 使用 zIndex 关于你正在花呢的3个形状,请参阅文档 zIndex 。(请注意,函数拼写为 z索引 而对象属性拼写为 Z指数

    第二个问题(你的问题)是,两个tween同时被呼叫,但其中只有一个被解雇。我相信顺序是这样的:

    1. Middle Mouseout点燃了青少年。
    2. 鼠标左键或右键紧接着就触发了tween,这从来没有发生过,因为mouseout tween

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