Javascript "dragging" Canvas 上的图像

Question

关于此有很多问题，其中提供的解决方案是将图像的左上和自上而下值设置为鼠标/触摸的位置，但是我想做的是进行实际的拖动运动。无论我按下 Canvas 上的哪个位置，如果我将手指拖动到右侧 x 像素，我希望图像移动到右侧 x 像素。左、上、下也是如此。

我完全不知道从哪里开始。我将处理移动触摸事件，因此我觉得使用 canvas.addEventListener('touchmove') 将是最好的选择，但我不确定。

我已经重新绘制了 Canvas 并处理了所有内容，只是真正需要实时拖动图像的逻辑方面的帮助，而不是仅仅将其捕捉到位。

Answer 1

获取交互开始的点(touchstart)并用它来计算手指在屏幕上移动的距离(在 touchmove 回调中)并将其添加到图像位置(也在 touchmove 中)。

PS:我还建议使用 PIXI JS 之类的 Canvas /WebGL 内容......除非您需要自定义解决方案。