Question

我试图为触摸优化设备制作多人游戏绘图，我使用带有套接字io的节点j来绘制画布上的点。但问题是，＆＃34;在 touchend 事件被调用后，它没有重置＆＃34;，

要清楚，请查看下面的图像。 需要红线，但下次触摸时会自动绘制蓝线

enter image description here

这是我的代码：

 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);
    }

节点绘图部分：

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

我的节点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
    };
}

使用HTML5，JS和Node js的多人游戏绘图

1 个答案: