为什么纸张.js路径创建在 iOS 设备上不起作用

Why doesn't paper.js path creation work on iOS devices?

本文关键字:iOS 不起作用 创建 js 路径 为什么      更新时间:2023-09-26

** 有关此问题的当前解决方案,请参阅编辑 2。

我有一个有点晦涩的问题,谷歌和搜索StackOverflow还没有解决。Paper.js无法通过iOS工作。

目前,我正在构建一个白板绘图网络应用程序,该应用程序利用纸张.js用于绘图功能。它在Chrome,FireFox和Safari的桌面上运行良好。在Android设备上,它工作正常,但非常滞后。在iOS设备上使用该应用程序时会出现此问题。

由于某种原因,我的应用程序在通过移动 Safari 或移动 Chrome 在 iOS 上使用时无法创建路径。iOS 上的行为只是一个无响应的画布。

我目前无法访问可用于远程调试的设备,因此无法收集任何有用的调试数据。

用于测试的 Web 应用链接。http://alexpersian.github.io/html/whiteboard.html

绘图中涉及的 paperscript 的代码片段。

var myPath;
function onMouseDown(event) {
    myPath = new Path();
    myPath.add(event.point);
    myPath.strokeColor = WBAPP.penColor; // WBAPP is from main Javascript
    myPath.strokeWidth = WBAPP.penStroke;
    myPath.strokeCap = 'round';
}
function onMouseDrag(event) {
    myPath.add(event.point);
}
function onMouseUp(event) {
    myPath.simplify();
}

编辑:我已经完成了一些进一步的测试,发现它适用于运行iOS 7的设备,但不适用于iOS 8。我很好奇iOS 8是否有限制touchEvents网络交互的变化。

编辑2:我能够通过添加此代码片段来解决此问题。

document.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false);

这可以防止 iOS 8 上的默认触摸操作,这似乎是滚动/平移操作,因为它会干扰 paper.js 中的 onMouseDrag 事件。

论文.js共同创作者Jürg Lehni正在研究是否应该将其包含在图书馆本身中。在此之前,此代码段应该会有所帮助。

嘿,

可能需要实现可以使用的触摸事件http://labs.rampinteractive.co.uk/touchSwipe/demos/这样做或http://www.homeandlearn.co.uk/JS/html5_canvas_touch_events.html

相关文章: