在Paperjs Canvas Lement上启用移动滚动手势

Question

我已经开发了一个使用Paper.js库的Web应用程序，以显示一些基本的绘图形状。

我的问题是，当在智能手机上查看时，网页无法向上或向下滚动，并在画布元素上应用滚动手势。我还尝试了一个空的尺寸的空帆布元素，而无需使用Paper.js实例化，并且它可以正常工作。因此，PaperJ在处理画布后负责禁用活动以用手势滚动。请注意，我不使用任何事件听众在纸的画布上进行鼠标事件。

谢谢

Answer 1

我当时正在提供我在github问题中找到的解决方案，以防某些人帮助某些人：

嗨，经过大量检查，我找到了问题的根源。在第10451行（版本0.9.22）中的 paper-core.js中，添加了一些预定义的CSS样式。其中之一是 touchAction ，它设置为无。因此，如果您不需要在画布元素上进行任何交互式功能，并且仍然希望在移动设备上启用拖放，则应手动将此属性设置为"，这是默认设备...为此，我在JavaScript上设置论文后，只需在我的画布元素上调用此功能：

function(el){
    /*
        This function will accept the canvas html element and enable css drag that was originally disabled in paper.js for canvas that we do not need functionality and want mouse drag on
     */
    var name = 'touchAction';//the property that needs enabling for drag to work
    if (name in el.style) {
        el.style[name] = '';
    }
}

Answer 2

我头顶的一些建议:)

1. 如果不应该与画布进行交互，则可以在画布上叠加<div></div>，因此触摸事件永远不会达到。喜欢：

<div class="canvas-container" style="posistion:relative;"> <canvas style="position: relative"></canvas> <div class="canvas-overlay" style="position: absolute;width: 100%;height: 100%"></div> </div>

2. 如果由于某种原因无法解决您的问题，或者您需要让用户访问帆布，那么最好的解决方案是使用JavaScript来收听'touchMove'事件，然后自己滚动窗口。但这可能会导致您其他问题。就像必须用自定义的滚动功能完全替换滚动功能一样。

   这是一个链接，其中包含touchmove事件上的一些示例代码和文档。

3. 您可以在用户尝试拖动画布时自己滚动窗口的onMouseDrag函数，并自己滚动窗口。

   这是onMouseDrag的链接。

希望这会有所帮助。