Question

在Adobe Animate CC HTML5 Canvas（createJS）中，我试图做一些非常简单的事情，在广告的整个舞台为moused over时触发动画翻转，并触发动画展示当鼠标离开舞台时。它应该很简单，但事实并非如此。在mouseenter上使用mouseleave和stage是滞后的，只能间歇性地工作。它与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上显示＆＃34;您可以使用stage.mouseInBounds和mouseleave / mouseenter事件来监控指针是否在画布上。＆＃ 34;因此，我想知道使用stage.mouseInBounds是否会有所帮助（但我无法找到如何使用它的示例）。但我实际上并不认为它会有所帮助，因为我认为整个问题是createJS不能读取鼠标足够快的地方。

有谁知道如何修复这种懒散和间歇性射击？一个解决方法？为什么createJS不仅仅像纯js一样监视mouse events？

mouseenter中舞台上的mouseleave和createJS也无法在平板电脑或移动设备上运行，这也是一个问题，因此最好使用{{mouseover 1}}和mouseout按钮上的整个舞台大小。我确实尝试使用mouseover和mouseout并且按钮边缘和广告横幅边缘之间的按钮周围有3个像素空间，这有帮助，但它仍然间歇性地发射。

请你的想法和想法。

Answer 1

鼠标悬停检查很昂贵。画布本质上只是一个位图，因此EaselJS无法使用浏览器中的鼠标事件（您只需为整个画布获取一个）。相反，在EaselJS中鼠标悬停需要将每个元素绘制到1x1像素画布，然后检查填充。这样可以提供像素完美的检测，但如果要么检查大量内容，要么经常检查，这样做会很昂贵。

降低频率 看起来你已经将frequency设置为90.这非常高（检查间隔11毫秒，基本上试图达到90 fps）。默认值为10，它比良好的帧速率慢，但速度足以让人感觉响应。你可以将它降低到20左右，以便在没有不必要的高度的情况下进行检查。

修改交互性：您可以做的另一件事就是过滤掉要检查的内容。默认情况下，会检查所有显示对象 - 但是您可以通过关闭关闭 mouseEnabled来解决这个问题（从检查中省略它们），然后转动 off mouseChildren在您希望作为单个对象处理的容器上（因此，像复杂按钮这样的东西被绘制一次，而不是单独绘制所有内容）。

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

希望有所帮助！

Adobe Animate CC Canvas在舞台上的鼠标操作是滞后和间歇的

1 个答案: