寻找真正跨平台的画布事件库[关闭]

Question

我正在开发一个 HTML5 应用程序，我正在寻找一些 JS 库处理画布元素上的输入，适用于桌面和移动平台（否则，html 5 有什么意义？）

基本上我需要拖动形状，因为它是一个类似绘图的应用程序，并且拖动也用于在画布中导航（这样它对移动设备更友好 - 它们没有滚动条）。如果它也支持捏缩放就好了

我知道 kinetic.js 和类似的，但他们似乎有单独的移动和桌面库

Answer 1

Canvas 没有元素，您在画布上绘制的圆也没有附加任何事件 - 这与在 DOM 中工作完全不同。

您需要跟踪您在画布上绘制的每个“元素”的 x/y 位置，当鼠标或触摸事件发生时，获取该事件的 x/y 位置并匹配它与画布“元素”的 x/y 位置相对。

但是，您还需要做一些基本的碰撞检测，这样您的输入（鼠标/触摸）的 x/y 位置不必与 x/y 完全匹配画布“元素”的位置。

不过，使用 Kinetic，您可以相当容易地检测到您何时使用支持触摸事件的移动设备，然后更改 Kinetic 中的“mousedown”、“mouseup”、“click”等事件：

var _START, _MOVE, _END;
if('ontouchstart' in window) {
    _START = 'touchstart';
    _MOVE = 'touchmove';
    _END = 'touchend';
}
else {
    _START = 'mousedown';
    _MOVE = 'mousemove';
    _END = 'mouseup';        
}

...然后在 Kinetic 的 addEventListener 函数中使用 _START/_MOVE/_END。

希望能有所帮助。当然，要小心设置全局变量，这通常是不好的做法，这只是一个例子。

Kinetic 是 here，对触摸和手势事件（捏合/缩放的手势）here 有很好的描述。