在画布上绘图 - 不遵循鼠标路径

Question

我的代码有问题，希望有人能帮助我。 我正在做一个应用程序，它可以让少数人同时在触摸屏上或使用鼠标进行绘图。

问题是我的代码会定期检查光标的位置（看起来像这样，但我没有任何定期检查代码），因为在快速绘制时我可以看到类似的东西（线条太直而且它们没有'不跟随光标路径）： !(https://i.imgur.com/cdrA82Z.png)

代码如下： https://jsfiddle.net/Kshishiu/reyagxtz/4/

function getTouchPos (canvasDom, touchEvent) {
    var rect = canvasDom.getBoundingClientRect ();
    return {
        x: touchEvent.touches[0].clientX - rect.left,
        y: touchEvent.touches[0].clientY - rect.top,
    };
}

感谢您的任何意见:)

谢谢！

Answer 1

你可以试试这个方法：

var holding = false;
document.body.addEventListener("mousedown", ()=>{
   holding = true;
}
document.body.addEventListener("touchstart", ()=>{
   holding = true;
}
document.body.addEventListener("mouseup", ()=>{
   holding = false;
}
document.body.addEventListener("touchend", ()=>{
   holding = false;
}

然后你可以跟踪你的画布移动：

document.getElementById("yourCanvasId").addEventListener("mousemove", ()=>{
   if(holding == true){
      x = event.clientX - rect.left;
      y = event.clientY - rect.top;
   }
}

document.getElementById("yourCanvasId").addEventListener("touchmove", ()=>{
   if(holding == true){
      x = event.clientX - rect.left;
      y = event.clientY - rect.top;
   }
}

使用 socket.io，您可以将这些移动事件发送到您的服务器，然后您的服务器将这些信息发送给您的所有客户端，在客户端，您可以编写一个小脚本，您可以在其中监听这些事件并根据具体情况绘制一些东西这些事件。