javascript - 使用 HTML5、JS 和 Node js 进行多人绘图

Question

我正在尝试为触摸优化设备制作多人绘图，我使用带有套接字 io 的 Node js 在 Canvas 上绘制点。但问题是，“调用 touchend 事件后，它不会重置”，

为了清楚起见，请检查下面的图片。 需要红线，但下次触摸时会自动绘制蓝线

这是我的代码:

 if (is_touch_device) {
        var drawer = {
           isDrawing: false,
           touchstart: function (coors) {
              prev.x = coors.x;
              prev.y = coors.y;
              context.beginPath();
              context.moveTo(coors.x, coors.y);            
              this.isDrawing = true;

           },
       touchmove: function (coors) {

     if($.now() - lastEmit > 5){
               socket.emit('mousemove',{
              'x': coors.x,
              'y': coors.y,
              'drawing': drawer.isDrawing,
              'id': id,
             'color': 'test'
              });
               lastEmit = $.now();
            }
          if (this.isDrawing) {

          plot(prev.x, prev.y, coors.x, coors.y);
          prev.x = coors.x;
          prev.y = coors.y;

          }
       },
       touchend: function (coors) {
          if (this.isDrawing) {
             this.isDrawing = false;

          }
       }
    };

 function draw(event) {

       var coors = {
          x: event.targetTouches[0].pageX,
          y: event.targetTouches[0].pageY
       };

       var obj = sigCanvas;

       if (obj.offsetParent) {
           do {
             coors.x -= obj.offsetLeft;
             coors.y -= obj.offsetTop;
          }
          while ((obj = obj.offsetParent) != null);
       }
      drawer[event.type](coors);
    }

Node 绘图部分:

socket.on('moving', function (data) {
   if(data.drawing && clients[data.id]){

         plot(clients[data.id].x, clients[data.id].y, data.x, data.y);          
        }

      clients[data.id] = data;
      clients[data.id].updated = $.now();

    });

绘图功能:

function plot(x1, y1, x2, y2)
{
 var sigCanvas = document.getElementById("canvasSignature");
    var context = sigCanvas.getContext("2d");
        context.beginPath();
      context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.stroke();     

}

脚本js:http://abnode.azurewebsites.net/script.js

我的 Node js:http://abnode.azurewebsites.net/server.js

更新

 socket.on('moving', function (data) {

      if(data.drawing && clients[data.id] ){
  // Problem is it gets plotted automatically from one point on touchend, its not stopped
    drawLine(clients[data.id].x, clients[data.id].y, data.x, data.y);

      }

      clients[data.id] = data;
      clients[data.id].updated = $.now();
   });


   function drawLine(fromx, fromy, tox, toy){

      context.beginPath();
      context.moveTo(fromx, fromy);
      context.lineTo(tox, toy);
      context.strokeStyle = "Black";
      context.stroke();

   }

Answer 1

根据您的问题，当 touchend 发生时，您必须设置 drawing=false ，而当 touchstart 事件发生时，您应该得到 touchPosition 通过 Canvas 中的 getTouchPos() 方法并使用 drawing=false 发出 mousemove 事件，然后设置 drawing =true。

例如，我在代码中针对您遇到的相同问题所做的操作:

canvas.on('touchstart', function(e) {
    //e.preventDefault();

    var pos = getTouchPos(canvas, e);
    //e.preventDefault();

    prev.x = pos.x;
    prev.y = pos.y;

    socket.emit('mousemove', {
        'x' : pos.x,
        'y' : pos.y,
        'drawing' : drawing,
        'id' : id
    });

    drawing = true;

    //  alert("touch experienced");  
});

//getTouchMethod according to canvas
function getTouchPos(canvas, evt) {
    var rect = canvas.offset();
    return {
        x : evt.originalEvent.touches[0].pageX - rect.left,
        y : evt.originalEvent.touches[0].pageY - rect.top
    };
}