如何使用 Easeljs 将 Click 事件添加到精灵表中

how to add Click event to a spriteSheet with Easeljs?

本文关键字：精灵 添加 事件 何使用 Easeljs Click      更新时间：2023-09-26

正如我在标题中所说，Easeljs 对我来说非常新，有没有办法使用框架 Easeljs 将点击事件或事件监听器添加到像 spritesheet 这样的对象中？

我做了很多研究，但仍然没有得到任何运气。

精灵表只是一种描述如何绘制精灵（或早期版本中的位图动画）的数据格式。

下面是一个示例 SpriteSheet，取自 http://createjs.com/Demos/EaselJS/SpriteSheet.html 中的示例，您可以在 GitHub 存储库中找到它 （github.com/CreateJS/EaselJS/）

var data = new createjs.SpriteSheet({
    "images": ["images/sprite.png"],
    "frames": {"regX": 0, "height": 292, "count": 64, "regY": 0, "width": 165},
    "animations": {"run": [0, 25, "run", 1.5], "jump": [26, 63, "run"]}
});

一旦你有了它，你就可以定义一个精灵了。

var sprite = new createjs.Sprite(data, "run");
stage.addChild(sprite);
// In earlier versions (0.6.0 and below), you can not specify a start frame/animation
sprite.gotoAndPlay("run");

这会将精灵添加到舞台，并播放其"运行"动画。要添加鼠标单击，请使用：

sprite.on("click", handleClickFunction);
// Earlier versions (0.6.0 and below) require the use of addEventListener, which still exists in 0.7.0, but is less friendly
sprite.addEventListener("click", handleClickFunction);

有关鼠标行为的更多信息，请参阅EaselJS网站上的教程。http://createjs.com/tutorials/Mouse%20Interaction/

相关文章：