Question

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

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

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

Answer 1

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

您需要跟踪每个＆＃39;元素的x / y位置。您在画布上绘制的，当发生鼠标或触摸事件时，请获取该事件的x / y位置，并将其与画布元素的x / y位置相匹配。

但是，你还需要做什么，它有点基本的碰撞检测，所以输入的x / y位置（鼠标/触摸）不必与之完全匹配画布元素的x / y位置＆＃39;。

然而，使用Kinetic，您可以非常轻松地检测到您何时使用具有触摸事件支持功能的移动设备，然后更改“mousedown＆＃39;”，“鼠标”等。，＆＃39;在Kinetic中点击＆＃39;等事件：

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。

寻找画布事件库真正跨平台

1 个答案: