Javascript 使用移动设备拖动画布上渲染的图像会导致图像消失

我正在用Fabric.js制作一个在画布上绘制图像的应用程序。 对于平板电脑和智能手机，如果通过拖动平移绘制的图像，图像将消失。 我将粘贴一个显示当前情况的GIF图像

我想通过拖动平移来防止图像消失，即使在PC以外的浏览器中也是如此。 请让我知道，如果有任何其他选择这样做

代码如下： 通过按下“运行代码片段”，您可以看到它是如何工作的。 上载图像时，画布上和画布下方会出现一个“平移”按钮。 按“平移”按钮平移图像

var canvas=newfabric.canvas（“c”）；
$（“输入”）。关于（“更改”，函数（e）{
var fr=新文件读取器（e）；
fr.onload=（e）=>{
输入（如目标、结果）；
};
fr.readAsDataURL（e.target.files[0]）；
});
变量输入=函数（url）{
fabric.Image.fromURL（url，函数（oImg）{
画布设置宽度（450）；
var resizeScale=canvas.width/oImg.width；
oImg.规模（调整规模）；
canvas.setHeight（oImg.height*resizeScale）；
canvas.clear（）；
canvas.add（oImg.renderAll（）；
canvas.selection=oImg.selective=false；
$（“#show”）.show（）；
canvas.hoverCursor=“默认”
});
};
$（“#平移”）。单击（函数（）{
canvas.hoverCursor=“十字线”
});
canvas.on（“鼠标：向下”，（）=>{
var平移；
if（canvas.hoverCursor==“十字线”）{
平移=真；
};
canvas.on（“鼠标：移动”，e=>{
如果（平移）{
常数增量=新结构点（e.e.movementX，e.e.movementY）；
canvas.relativePan（delta）；
};
});
canvas.on（“鼠标：向上”，（）=>{
平移=假；
});
});
html{
文本对齐：居中；
保证金：自动；
最大宽度：550px；
}
输入{
利润率：5%；
}
#展示{
显示：无；
}
帆布{
边框：2件纯黑；
}

平底锅
在移动设备上，传递到
鼠标：…
侦听器的事件不是
鼠标事件，而是一个事件。它与
MouseEvent
的接口不同，因此您无法访问
movementX
属性。您可以通过以下方式计算增量x/y：

let panning
let prevX
let prevY
canvas.on("mouse:down", (e) => {
  panning = true
  if (e.e instanceof TouchEvent) {
    const {clientX, clientY} = e.e.touches[0]
    prevX = clientX
    prevY = clientY
  }
})

canvas.on("mouse:move", e => {
  if (panning) {
    let delta
    if (e.e instanceof TouchEvent) {
      // we're on mobile
      const {clientX, clientY} = e.e.touches[0]
      delta = new fabric.Point(clientX - prevX, clientY - prevY)
      prevX = clientX
      prevY = clientY
    } else {
      // we're on desktop
      delta = new fabric.Point(e.e.movementX, e.e.movementY)
    }
    console.log(delta.x, delta.y)
    canvas.relativePan(delta)
  }
})

canvas.on("mouse:up", () => {
  panning = false
})

这里，我正在检查传递了什么类型的事件（通过
e.e instanceof TouchEvent
），并相应地计算
增量。如果您只使用移动设备，则可能不需要此功能