jQuery 移动颜色选择器滑块和画布的多点触控？

Question

现在我有一个可以工作的颜色选择器滑块，我的本地副本稍微更发达，因为我修改了 jQuery 移动库，但我认为this fiddle 应该足以展示我的工作概念。

我希望我可以使用我正在使用的现有 jQuery 移动框架或另一个不会与 jQuery 移动冲突的库（比如可能是hammer.js？）进行多点触控工作。我对此并不十分熟悉，但我没有在他们的文档中看到任何关于它的信息，或者甚至可能与其他框架一起使用。

我在这个库 (thumbs.js) 中看到，可以通过添加以下内容来实现：

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

是否可以让滑块和画布同时处于活动状态，以便用户可以用一根手指滑动并同时用另一根手指在画布上绘图？

我想要一个类似的例子，但我也没有成功。我看到很多关于 js 相关的多点触控和触控项目的信息，like this wiki，但不知道如何在我的项目中实现它们。

Answer 1

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 来提取此信息，从而同时跟踪滑块位置和画布位置。