Adobe Animate CC Canvas 舞台上的鼠标动作滞后且断断续续

Question

在 Adobe Animate CC HTML5 Canvas (createJS) 中，我试图做一些非常简单的事情，当广告的整个阶段 moused over，并在鼠标离开舞台时触发动画卷展。它应该很简单，但事实并非如此。在 stage 上使用 mouseenter 和 mouseleave 是滞后的，只能间歇性地工作。 mouseover 和 mouseout 也是一样的。

这是滞后和断断续续的代码：

stage.addEventListener("mouseenter", fl_MouseOverHandler.bind(this));
stage.addEventListener("mouseleave", fl_MouseOutHandler.bind(this));

function fl_MouseOverHandler(){
    this.btnOverAnim.gotoAndPlay("on");
}

function fl_MouseOutHandler(){
    this.btnOverAnim.gotoAndPlay("off");
}

我还尝试了 mouseover 和 mouseout 按钮上整个舞台的大小，但我遇到了同样的问题。（同样这样做在框架内根本不起作用，广告是在框架内投放的）。我将 var frequency 设置为 90 以查看这是否有助于解决滞后问题，但没有。

这是我试过的简单 mouseover / mouseout 代码：

var frequency = 90;
stage.enableMouseOver(frequency);

this.bgCta.addEventListener("mouseover", fl_MouseOverHandler.bind(this));
this.bgCta.addEventListener("mouseout", fl_MouseOutHandler.bind(this));

在 createJS website 上它说 "You can monitor whether the pointer is over the canvas by using stage.mouseInBounds AND the mouseleave / mouseenter events." 所以我想知道使用 stage.mouseInBounds 是否有帮助（但我无法在任何地方找到如何使用它的示例）。但实际上我认为这不会有帮助，因为我认为整个问题都是关于 createJS 没有读取鼠标速度足够快的地方。

有谁知道如何解决这种延迟和间歇性触发问题？变通办法？为什么 createJS 不像纯 js 那样只是不断地监视 mouse events？

另外 mouseenter 和 mouseleave 在 createJS 的舞台上不能在平板电脑或手机上工作，这是一个问题，所以最好用 mouseover 和 mouseout 在整个舞台大小的按钮上。我确实尝试使用 mouseover 和 mouseout 并在按钮边缘和广告横幅边缘之间的按钮周围有 3 个像素 space，这有帮助，但它仍然间歇性地触发.

请提出您的想法和想法。

Answer 1

鼠标悬停检查很昂贵。 canvas 本质上只是一个位图，因此 EaselJS 无法使用来自浏览器的鼠标事件（您只需为整个 canvas 获取一个）。相反，EaselJS 中的鼠标悬停要求将每个元素绘制到 1x1 像素 canvas，然后检查填充。这提供了像素完美的检测，但如果您检查大量内容或检查过于频繁，则成本很高。

降低频率： 看起来您已将 frequency 设置为 90。这确实很高（两次检查之间有 11 毫秒，这基本上是在尝试达到 90 fps）。默认值为 10，这比良好的帧速率慢，但足够快以感觉响应。您可能可以将它降低到 20 左右，以给您一个充满活力的检查，而不会不必要地高。

修改交互性： 您可以做的另一件事是准确过滤出检查的内容。默认情况下，所有显示对象都会被选中——但您可以通过关闭 off mouseEnabled 任何您不关心的对象（从检查中省略它们）来减少它，并且在您想要作为单个对象处理的容器上关闭 mouseChildren（因此像复杂按钮这样的东西只绘制一次，而不是单独绘制其所有内容）。

// Example
myBackground.mouseEnabled = false;
myButton.mouseChildren = false;

希望对您有所帮助！

Answer 2

朋友们，我知道这是 4 年前有人问过的，但是 Adobe Animate CC V.21 的延迟对于 mouseenter、 没有什么不同（可怕） mouseleave、mouseover 和 mouseout。滚动 10 次后 over/out 页面变得无响应。我能够在 setInterval 上使用 stage.mouseInBounds 来缓解这个问题。楼主找不到例子，我是这样的：

// Place this in a keyframe on the timeline where the named cta exists.

setInterval(function(scope){ 
    if(stage.mouseInBounds){
        createjs.Tween.get(scope.cta).to({scaleX:1.1, scaleY:1.1}, 150);
    }
    else{
        createjs.Tween.get(scope.cta).to({scaleX:1, scaleY:1}, 150);
    }

}, 150, this );

确保将 this 传递到 setInterval 函数的末尾作为回调函数的参数，以免丢失范围。我猜这可以重做以在时间轴上使用 gotoAndPlay()，在这种情况下，CreateJS 的内置 tweener 足以满足我的需要。

Adobe Animate CC Canvas 舞台上的鼠标动作滞后且断断续续

Adobe Animate CC Canvas mouse actions on the stage are laggy and intermittent

javascript

html

canvas

createjs