在 HTML Canvas 上使用 iPad 绘图时禁用 IOS 滚动答案

【问题标题】：Disable IOS Scroll When Drawing With iPad On HTML Canvas在 HTML Canvas 上使用 iPad 绘图时禁用 IOS 滚动
【发布时间】：2018-08-09 12:27:18
【问题描述】：

我正在尝试在 html 中创建一个用户可以绘制的画布。它适用于任何鼠标设备，如 pc 或 max。它也适用于非 ios 触摸设备（如 android/windows 平板电脑）。但是对于 ios-touch 设备（如 ipad 或 iphone）它不起作用。当您尝试绘制时，它会在您绘制时滚动页面。知道如何在画布上绘图时在 ios 设备上禁用此滚动操作吗？

这是一个 html 绘图画布示例http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ 尝试在 ipad 或 iphone 上的其中一个画布上绘图，但不是第一个演示，出于某种原因，第一个演示有效，但其他演示均无效。

【问题讨论】：

在适当的时候或适当的地方添加whateverViewHasAScroll.isScrollEnabled = false。
我确定您使用的是触摸事件侦听器。如果您从回调中返回 false，则事件传播应该停止，并且该事件会被其他元素忽略

标签： html ios iphone ipad

【解决方案1】：

我通过使用onTouchStart、onTouchMove、onTouchEnd 让它工作了。

对于onTouchMove，您将获得changedTouches 的数组。对于笔的使用，第一个就可以了，因为一次不会有多个触摸事件。

const position = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };

【讨论】：