javascript - 如何使用 createjs 定位 MovieClip

Question

我正在尝试导出一个合影动画，该动画在 Flash 中运行良好，但在 html5 Canvas 中导出时则不行。

技巧很“简单”:每张照片都是一个按钮，当您将鼠标滑到某人的照片上时，就会出现他的职位。

我无法用 createjs 实现它!

我的舞台上有一个名为“jobs_cont”的 MovieClip 实例，其时间线对于每个人的职位都有不同的关键帧和标签。

问题是，当按钮悬停时，我没有成功定位“jobs_cont”并在其时间轴中使用 gotoAndPlay 特定帧或标签。

单独识别“警报指令”，但不识别“jobs_cont.gotoAndPlay”:

var frequency = 3;
stage.enableMouseOver(frequency);
this.mybutton.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler(){ 
    this.jobs_cont.gotoAndPlay("mylabel");
    alert("hovered by mouse");
    // end of your personalized code
}

我想我一定错过了 createjs 中针对“jobs_cont”的东西，但我是 javascript 的新手，尽管我进行了一天的研究，但还是无法弄清楚。如果有人能给提示的话。谢谢。

Answer 1

您正在处理范围问题。如果您使用上述语法在时间轴上定义函数，则该函数没有作用域，因此 this 变为 Window。

您可以更改要在当前对象上定义的函数语法:

this.fl_MouseOverHandler = function(){ 
    this.jobs_cont.gotoAndPlay("mylabel");
    alert("hovered by mouse");
    // end of your personalized code
}

最后，JavaScript 不会自动为事件监听器提供函数作用域(目前为止!)，因此您必须自己确定函数的作用域。如果您拥有 0.7.0 或更高版本的 EaselJS，则可以使用 on 方法而不是 addEventListener ( docs )。请注意，您还必须使用 this.fl_MouseOverHandler。

this.mybutton.on("mouseover", this.fl_MouseOverHandler, this);

您还可以使用实用程序方法来确定函数的范围，例如 Function.prototype.bind() ( docs ):

this.mybutton.addEventListener("mouseover", this.fl_MouseOverHandler.bind(this));

希望有帮助!