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

Looking for canvas events library truly cross platform

本文关键字：canvas 事件 跨平台 寻找      更新时间：2023-09-26

我正在开发一个HTML5应用程序，我正在寻找一些JS库处理画布元素的输入，适合桌面和移动平台(否则，html 5的意义是什么?)

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

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

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

你需要跟踪你在画布上绘制的每个"元素"的x/y位置，当鼠标或触摸事件发生时，取该事件的x/y位置并将其与画布"元素"的x/y位置进行匹配。

然而，你还需要做的是，它是一个基本的碰撞检测，这样你的输入(鼠标/触摸)的x/y位置不必与你的画布"元素"的x/y位置完全匹配。

使用Kinetic，你可以很容易地检测到当你在一个移动设备上有触摸事件支持，然后改变'mousedown'， 'mouseup'， 'click'等事件在Kinetic:

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。

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

动能在这里，这里有一个很好的触摸和手势事件(手势缩放)在这里。

相关文章：