如何在允许单指绘图的同时允许两指滚动 HTML 画布元素？

Question

我正在尝试使用固定大小的画布制作画布绘图应用程序 - 但能够在画布周围滚动以在基于用户屏幕尺寸可能不可见的不同点上进行绘制。

它可以像我希望的那样在桌面上滚动，但我正在尝试在移动设备上实现两指滚动。

http://jsbin.com/qugabuh/edit

在我的触控绘图功能中，我尝试了以下操作：

const startTouch = function(e) {
  if (e.targetTouches.length < 2) {
    ctx.beginPath();
    x = e.changedTouches[0].pageX + content.scrollLeft;
    y = e.changedTouches[0].pageY - 34 + content.scrollTop;
    ctx.moveTo(x, y);
  }
};

const moveTouch = function(e) {
  if (e.targetTouches.length < 2) {
    e.preventDefault();
    x = e.changedTouches[0].pageX + content.scrollLeft;
    y = e.changedTouches[0].pageY - 34 + content.scrollTop;
    ctx.lineTo(x, y);
    ctx.stroke();
  }
};

这在我的 Android 平板电脑上似乎可以正常工作（尽管有时如果我不完全同时抬起两个手指会画线），但在我的 iPhone 上则完全不行。

Answer 1

尝试使用标志来控制启动事件触摸。

    const startTouch = function(e) {
        if (e.target === canvas && e.touches.length === 1) {
            ctx.beginPath();
            x = e.changedTouches[0].pageX + content.scrollLeft;
            y = e.changedTouches[0].pageY - 34 + content.scrollTop;
            ctx.moveTo(x, y);
            
            drawable = true;
        }else{
            drawable = false;
        }
    };

看： https: //codepen.io/Luis4raujo/pen/RwoZVXE