多点触控jQuery移动colorpicker滑块和画布?

时间:2013-06-19 02:15:01

标签: jquery jquery-mobile touch cordova multi-touch

现在我有一个工作的colorpicker滑块,我的本地副本稍微有点发展,因为我修改了jQuery移动库,但我认为this fiddle应该足以显示我的工作概念。

我希望我能够与我正在使用的现有jQuery移动框架进行多点联系,或者使用另一个不会与jQuery mobile冲突的库(比如hammer.js?)。我根本不熟悉这个,但是我在他们的文档中没有看到任何关于它的信息,或者甚至可能在其他框架中看到它。

我在这个库(thumbs.js)中看到,可以添加如下内容:

element.setAttribute('ontouchstart', 'console.log("hi");');  

是否可以同时激活滑块和画布,以便用户可以用一根手指滑动并在画布上同时使用另一根手绘画?

我想要一个类似的例子,但我也没有成功。我在js相关的多点触摸和触摸项目like this wiki上看到了很多信息,但我不确定如何将它们应用到我的项目中。

1 个答案:

答案 0 :(得分:0)

hammer.js可以与jQuery和jQuery mobile一起很好地用于多点触控手势。还可以查看this page,其中某人已经调整了hammer.js以使用更方便的jQuery特殊事件API。 如果您计划支持Android 2.x,请参阅this page了解如何在这些设备上运行的应用中重新启用多点触控。

然而,你用一根手指来控制滑块而另一根手指在画布上独立绘制的描述并不像这样的手势,因此我不确定你会找到一个支持这个的现有库。您需要同时独立跟踪两个手指的x,y位置。查看hammer.js源代码,似乎可以提取每次触摸的x,y坐标:

var pos = [], src;
for(var t=0, len=event.touches.length; t<len; t++) {
  src = event.touches[t];
  pos.push({ x: src.pageX, y: src.pageY });
}
return pos;

因此,您可以扩展hammer.js或编写一些自定义JS来提取此信息,从而同时跟踪滑块位置和画布位置。