【问题标题】:Which HTML5 canvas game library has hover support?哪个 HTML5 画布游戏库支持悬停?
【发布时间】:2013-05-01 14:44:09
【问题描述】:

我将使用 HTML5 画布构建一个简单的游戏。我决定使用一些库,而不是手动完成所有操作。我看到那里有很多(超过 100 个)库,并且已经检查了其中的 5-6 个,但是似乎没有一个支持像浏览器中那样简单的“悬停”效果。

基本上,我想要一堆图像或文本“精灵”,当鼠标悬停在它们上时它们会发生变化,以向用户表明他可以用它做某事。这些元素也应该是可点击的。

请不要建议我使用 DOM。我想使用 Canvas,因为我有一些复杂的图形/动画。

我检查的最后一件事是 Cocos2d,它的 MenuItem 似乎有一些潜力:易于实现单击处理程序,两个图像 - 一个用于按下状态,另一个用于按下(正常)状态。但我不知道如何创建悬停效果。

我更喜欢类似 jQuery 的方法:

SpriteElement.hover(function() { do stuff });

【问题讨论】:

  • 那你为什么不用jQuery呢?
  • Nathan,因为 jQuery 用于 DOM 元素,而不是 <canvas> 图形。

标签: html5-canvas libraries


【解决方案1】:

我安装、测试并阅读了文档。这是我发现的:

KineticJS

element.on("鼠标悬停", function () { });

Easel.js

element.addEventListener("mouseover", function() { } );

此外,Easel.js 有很好的 ButtonHelper 类,它自动使用 3 个不同的图像来表示正常、悬停、按下状态。

Crafty.js

element.bind('MouseOver', ...

MelonJS

没有自动支持。 Manually 可以使用:

input.registerMouseEvent('mousemove')

然后迭代子元素并通过 this.collisionBox.containsPoint(me.input.mouse.pos) 进行检查

昆图斯

显然,no support

Lime.js

在文档或谷歌搜索中找不到任何内容。

画布引擎

element.on("鼠标悬停", function(e) { } );

虽然在 Firefox 20.0 上似乎有问题,但该事件仅在鼠标停止移动时才会触发。

Cocos2D-html5

没有自动支持,只能手动迭代子级。代码似乎在不断变化,因为 Cocos 专注于没有“悬停”概念的触控设备。

【讨论】:

    【解决方案2】:

    您正在寻找的可能是鼠标悬停

    KineticJS 支持它:

    https://stackoverflow.com/a/9270417/315168

    【讨论】:

      猜你喜欢
      • 2012-08-27
      • 2011-12-02
      • 1970-01-01
      • 1970-01-01
      • 2023-04-04
      • 2013-06-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多