在 paperjs canvas 元素上启用移动滚动手势

Question

我开发了一个网络应用程序，它使用 paper.js 库来显示一些基本的绘图形状。

我的问题是，当在智能手机上查看时，网页无法向上或向下滚动，在 canvas 元素上应用滚动手势。我还尝试使用相同大小的空 canvas 元素，但没有使用 paper.js 来实例化它并且它可以正常工作。因此 paperjs 在处理 canvas 后负责禁用手势滚动事件。请注意，我没有在 paperjs 的 canvas 上使用任何事件监听器来监听鼠标事件。

谢谢

Answer 1

我头脑中的一些建议:)

如果用户不应该与 canvas 交互，您可以在 canvas 上覆盖一个 <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>

如果出于某种原因不能解决您的问题，或者您需要授予用户访问 canvas 的权限，那么最好的解决方案可能是使用 javascript监听 'touchmove' 事件并自己滚动 window。但这可能会给您带来其他问题。就像必须用自定义功能完全替换滚动功能一样。

Here is a link with some sample code and documentation on the touchmove event .
你可以实现paper.js的onMouseDrag功能，只有在用户试图拖动canvas时才自己滚动window。

And here is a link to the onMouseDrag even.

希望这对您有所帮助。

Answer 2

我提供了我当时找到的 Github 问题的解决方案，以防对某些人有所帮助：

您好，经过大量检查代码后，我找到了问题的根源。在 paper-core.js 的第 10451 行（版本 0.9.22） 中，canvas 元素添加了一些预定义的 css 样式。其中之一是 touchAction，它被设置为 none。因此，如果您不需要 canvas 元素上的任何交互功能，并且仍想在移动设备上启用拖动，您应该将此属性手动设置为“”，这是默认设置... 为此，在 javascript:

上设置纸张后，我只需在 canvas 元素上调用此函数

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] = '';
    }
}

在 paperjs canvas 元素上启用移动滚动手势

Enable mobile scroll gesture on paperjs canvas lement

canvas

scroll

gesture

paperjs