寻找真正跨平台的canvas事件库

Question

我正在开发一个HTML5应用程序，我正在寻找一些JS库来处理canvas元素上的输入，既适用于桌面平台，也适用于移动平台(否则，HTML5的意义何在？)

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

我知道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';        
}

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

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

Kinetic是here，并且有一个很好的关于触摸和手势事件(用于收缩/缩放的手势)的here。