稳定touchmove上的触摸事件坐标

问题描述

我正在开发一个小型应用程序，允许用户使用three.js在3d中徒手绘制（结果与Blender的grease pencil类似）。该应用程序可在任何浏览器上运行，但我在主要目标平台（带有Apple Pencil的iPad）上苦苦挣扎。

与鼠标相比，Apple Pencil会触发大量的touchmove事件，这会导致我的线条在某些情况下“呈锯齿状”，尤其是当线条绘制缓慢时。

这里是jsfiddle that shows the functionality。我在这里唯一要做的就是：

//convert coordinate to three.js space
x = (x / window.innerWidth) * 2 - 1;
y = -(y / window.innerHeight) * 2 + 1;
var vNow = new THREE.Vector3(x,y,0);

//unproject the coordinates based on the camera
vNow.unproject(camera);

//push a new line into the line geometry
line.geometry.vertices.push(vNow);

//re-render the line at every mousemove
setGeometry()

如果用鼠标尝试，结果还可以。但是一旦您改用Apple Pencil ...这就是我倾向于得到的??线大多是“锯齿状的”

我尝试了很多事情，但是还没有什么令我满意。

• 我尝试根据部分或全部坐标生成曲线，然后在触摸端重新渲染线条，但我不喜欢这种效果，并且控制输出质量非常困难。
• 我尝试用simplify.js简化行，并且在接近预期结果时会产生不一致的结果。

因此，我认为可以操纵输入（点）并在绘制之前稳定它们，而不是操纵输出（线）。给定一系列要点，“稳定”鼠标事件的最佳方法是什么？我左右搜索，但没有找到一个好的答案。绘制平滑曲线的大多数解决方案是针对画布的，这与3d几何图形非常不同。

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）