javascript - 舞台上的 Adob​​e Animate CC Canvas 鼠标操作滞后且断断续续

Question

在 Adob​​e Animate CC HTML5 Canvas (createJS) 中，我尝试做一些非常简单的事情，当广告的整个阶段被鼠标悬停时触发动画滚动，并触发当鼠标离开舞台时动画推出。它应该很简单，但事实并非如此。在 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它说“您可以使用 stage.mouseInBounds 和 mouseleave/mouseenter 事件来监视指针是否在 Canvas 上。”所以我想知道使用 stage.mouseInBounds 是否有帮助(但我无法在任何地方找到如何使用它的示例)。但实际上我认为这不会有帮助，因为我认为整个问题都是关于 createJS 没有读取鼠标速度足够快的地方。

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

此外 createJS 舞台上的 mouseenter 和 mouseleave 在平板电脑或移动设备上不起作用，这是个问题，所以会更好在整个舞台大小的按钮上使用 mouseover 和 mouseout 来执行此操作。我确实尝试使用 mouseover 和 mouseout 并在按钮边缘和广告横幅边缘之间的按钮周围留出 3 像素的空间，这有帮助，但它仍然是间歇性射击。

请提出您的想法和想法。

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;

希望对您有所帮助!