javascript - 如何使用 Easeljs 将 Click 事件添加到 spriteSheet?

标签 javascript html canvas easeljs sprite-sheet

正如我在标题中所说,easeljs 对我来说很新,有什么方法可以通过使用框架 Easeljs 将点击事件或事件监听器添加到像 spritesheet 这样的对象上吗?

我已经做了很多研究,但仍然没有找到任何运气。

最佳答案

SpriteSheet 只是一种描述如何绘制 Sprite(或早期版本中的 BitmapAnimation)的数据格式。

这是一个 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"]}
});

一旦你有了它,你就可以定义一个 Sprite。

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 添加到舞台上,并播放它的“奔跑”动画。为了添加鼠标点击,使用:

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/

关于javascript - 如何使用 Easeljs 将 Click 事件添加到 spriteSheet?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19945106/

相关文章:

HTML Canvas : update globalAlpha property

javascript - 将绘制到 Canvas 上的所有内容偏移 0.5 像素的好方法?

javascript - 如何遍历数组字典(不知道键名)

javascript - 滚动溢出时检查视口(viewport)中对象的可见性

javascript - JS - 使用当前窗口大小设置窗口高度

javascript - 滚动浏览图片

jquery - 是否可以在 HTML 输入类型=提交值中显示 unicode 字符?

html - 垂直对齐几个 li 标签中的文本, float 为 :left attribute

javascript - 返回 Javascript 类内部元素中元素的当前索引

javascript - A* 在 Canvas 上寻路