如何在不同的计算机上从第一台计算机绘制相同的线？ [英] How can I draw the same lines from the first computer on a different computer?

问题描述

我正在开发一个绘图应用程式。
HTML代码是客户端，server.js是服务器。
我使用node.js和socket.io作为连接

index.html

 < html> 
< head> 
< script src =http：// localhost：4000 / socket.io / socket.io.js>< / script> 
< script> 
 var socket = io.connect（'http：// localhost：4000'）; 
< / script> 
 
< script> 
 var canvas，ctx，flag = false，
 prevX = 0，
 currX = 0，
 prevY = 0，
 currY = 0，
 dot_flag = false; 
 
 var x =black，
 y = 2; 
 
 function init（）{
 canvas = document.getElementById（'can'）; 
 ctx = canvas.getContext（2d）; 
 w = canvas.width; $ b $ h h = canvas.height; 
 
 canvas.addEventListener（mousemove，function（e）{
 findxy（'move'，e）
}，false）; 
 canvas.addEventListener（mousedown，function（e）{
 findxy（'down'，e）
}，false）; 
 canvas.addEventListener（mouseup，function（e）{
 findxy（'up'，e）
}，false）; 
 canvas.addEventListener（mouseout，function（e）{
 findxy（'ou​​t'，e）
}，false）; 
} 
 
 function draw（）{
 ctx.beginPath（）; 
 ctx.moveTo（prevX，prevY）; 
 ctx.lineTo（currX，currY）; $ b¥b ctx.strokeStyle = x; 
 ctx.lineWidth = y; 
 ctx.stroke（）; 
 ctx.closePath（）; 
 
 var segment = {
 startX：prevX，
 startY：prevY，
 endX：currX，
 endY：currY，
 color： x，
 linewidth：y 
}; 
 
 var segmentJSON = JSON.stringify（segment）; 
 
 socket.emit（'drawcanvas'，segmentJSON）; 
 socket.on（'serverdrawcanvas'，function（data）
 {drawFromOtherComputer（data）;}）; 
 
} 
 
 function erase（）{
 var m = confirm（Want to clear）; 
 if（m）{
 ctx.clearRect（0，0，w，h）; 
} 
} 
 
 function findxy（res，e）{
 if（res =='down'）{
 prevX = currX; 
 prevY = currY; 
 currX = e.clientX  -  canvas.offsetLeft; 
 currY = e.clientY  -  canvas.offsetTop; 
 
 flag = true; 
 dot_flag = true; 
 if（dot_flag）{
 ctx.beginPath（）; 
 ctx.fillStyle = x; 
 ctx.fillRect（currX，currY，2，2）; 
 ctx.closePath（）; 
 dot_flag = false; 
} 
} 
 if（res =='up'|| res ==out）{
 flag = false; 
} 
 if（res =='move'）{
 if（flag）{
 prevX = currX; 
 prevY = currY; 
 currX = e.clientX  -  canvas.offsetLeft; 
 currY = e.clientY  -  canvas.offsetTop; 
 draw（）; 
} 
} 
} 
 function drawFromOtherComputer（segmentJSON）{
 var segment = JSON.parse（segmentJSON）; 
 ctx.beginPath（）; 
 ctx.moveTo（segment.startingX，segment.startingY）; 
 ctx.lineTo（segment.endingX，segment.endingY）; 
 ctx.strokeStyle = segment.color; 
 ctx.lineWidth = segment.linewidth; 
 ctx.stroke（）; 
} 
 
< / script> 
< / head> 
< body onload =init（）> 
< canvas id =canwidth =400height =400style =position：absolute; top：10％; left：10％; border：2px solid;>画布> 
< input type =buttonvalue =clearid =clrsize =23onclick =erase（）style =position：absolute; top：80％; left：15％ ;> 
< / body> 
< / html> 
  

server.js

  var httpd = require（'http'）。createServer（handler）; 
 var io = require（'socket.io'）。listen（httpd）; 
 var fs = requires（'fs'）; 
 
 httpd.listen（4000）; 
 
函数处理程序（req，res）{
 fs.readFile（__ dirname +'/index.html'，
 function（err，data）{
 if err）{
 res.writeHead（500）; 
 return res.end（'Error loading index.html'）; 
} 
 
 res.writeHead ）; 
 res.end（data）; 
} 
）; 
} 
 io.sockets.on（'connection'，function（socket）{
 socket.on（'drawcanvas'，function（segmentjson）{
 socket.emit serverdrawcanvas'，segmentjson）; 
}）; 
}）; 
  

output.txt
这是我绘制一个小行后得到的日志文件Google Chrome

  info：socket.io started 
 debug：served静态内容/socket.io.js 
 debug：client authorized 
 info：handshake authorized nvbhnJFo-BL7xL09u9PY 
 debug：设置请求GET /socket.io/1/websocket/nvbhnJFo-BL7xL09u9PY 
 debug：设置客户端的心跳间隔nvbhnJFo- BL7xL09u9PY 
 debug：客户端授权
 debug：websocket writing 1 :: 
 debug：websocket writing 5 ::: {name：serverdrawcanvas，args：[{ \\startX \：145，\startY \：40，\endX \：146，\endY \：40，\color\：\ black \，\linewidth\：2}]} 
 debug：websocket writing 5 ::: {name：serverdrawcanvas，args：[{\startX \：146，\startY \：40，\endX \：147，\endY \：41，\color\：\black\\ ，\linewidth\：2}]} 
 debug：websocket writing 5 ::: {name：serverdrawcanvas，args：[{\startX \ ：147，\startY \：41，\endX \：148，\endY \：41，\color\：\black\ \\linewidth\：2}]} 
 debug：为客户端发出心跳nvbhnJFo-BL7xL09u9PY 
 debug：websocket writing 2 :: 
 debug：为客户端设置heartbeat超时nvbhnJFo-BL7xL09u9PY 
 debug：has heartbeat packet 
 debug：客户端的心跳超时超时nvbhnJFo-BL7xL09u9PY 
 debug：为客户端设置心跳间隔nvbhnJFo-BL7xL09u9PY 
  pre> 
 
解决方案
创建两个函数。 
 
 
 
一个读取JSON，另一个使用它。 
 
 
 
如果您还没有固化JSON，它可能看起来像这样：
  {
action_type：line，
line_start_x：1，
line_start_y：2，
line_length：4 ，
line_end_x：5，
line_end_y：6 
} 
  
 
 $ b b 
然后，创建一个函数，将在一个循环（我很新的，所以如果我做错了，对不起，）通过这个：
  while（actions = your_json_var ['action_type']）{
 drawPeerLine（your_json_var ['line_start_x']，your_json_var ['line_start_y']）; //继续添加您需要的变量
} 
  
功能。使用两个包含的变量来绘制线。你为其他客户端做了，现在只是做同样的。 
 
I am developing a drawing app.
HTML code is the client side and server.js as server.
I am using node.js and socket.io as connection

index.html
<html>
<head>
    <script src="http://localhost:4000/socket.io/socket.io.js"></script>
<script>
      var socket = io.connect('http://localhost:4000');
    </script>

<script>
var canvas, ctx, flag = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    dot_flag = false;

var x = "black",
    y = 2;

function init() {
    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
}

function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();

    var segment = {
    startX:prevX, 
    startY:prevY, 
    endX:currX, 
    endY:currY, 
    color:x, 
    linewidth:y
};

var segmentJSON = JSON.stringify(segment);

socket.emit('drawcanvas',segmentJSON);
socket.on('serverdrawcanvas',function(data)
{drawFromOtherComputer(data);});

}

function erase() {
    var m = confirm("Want to clear");
    if (m) {
        ctx.clearRect(0, 0, w, h);
    }
}

function findxy(res, e) {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            draw();
        }
    }
}
function drawFromOtherComputer(segmentJSON) {
    var segment = JSON.parse(segmentJSON);
    ctx.beginPath();
    ctx.moveTo(segment.startingX, segment.startingY);
    ctx.lineTo(segment.endingX, segment.endingY);
    ctx.strokeStyle = segment.color;
    ctx.lineWidth = segment.linewidth;
    ctx.stroke();
}

</script>
</head>
<body onload="init()">
    <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:80%;left:15%;">
</body>
</html>
server.js
var httpd = require('http').createServer(handler);
var io = require('socket.io').listen(httpd);
var fs = require('fs');

httpd.listen(4000);

function handler(req, res) {
  fs.readFile(__dirname + '/index.html',
    function(err, data) {
      if (err) {
       res.writeHead(500);
       return res.end('Error loading index.html');
      }

      res.writeHead(200);
      res.end(data);
    }
  );
}
io.sockets.on('connection', function (socket) {
    socket.on('drawcanvas', function(segmentjson){
    socket.emit('serverdrawcanvas', segmentjson);
  });
});
output.txt
This is the log file which i get after drawing a small line on Google Chrome
info: socket.io started
debug: served static content /socket.io.js
debug: client authorized
info: handshake authorized nvbhnJFo-BL7xL09u9PY
debug: setting request GET /socket.io/1/websocket/nvbhnJFo-BL7xL09u9PY
debug: set heartbeat interval for client nvbhnJFo-BL7xL09u9PY
debug: client authorized for 
debug: websocket writing 1::
debug: websocket writing 5:::{"name":"serverdrawcanvas","args":["{\"startX\":145,\"startY\":40,\"endX\":146,\"endY\":40,\"color\":\"black\",\"linewidth\":2}"]}
debug: websocket writing 5:::{"name":"serverdrawcanvas","args":["{\"startX\":146,\"startY\":40,\"endX\":147,\"endY\":41,\"color\":\"black\",\"linewidth\":2}"]}
debug: websocket writing 5:::{"name":"serverdrawcanvas","args":["{\"startX\":147,\"startY\":41,\"endX\":148,\"endY\":41,\"color\":\"black\",\"linewidth\":2}"]}
debug: emitting heartbeat for client nvbhnJFo-BL7xL09u9PY
debug: websocket writing 2::
debug: set heartbeat timeout for client nvbhnJFo-BL7xL09u9PY
debug: got heartbeat packet
debug: cleared heartbeat timeout for client nvbhnJFo-BL7xL09u9PY
debug: set heartbeat interval for client nvbhnJFo-BL7xL09u9PY

解决方案
Create two functions. 

One to read your JSON, and the other to do something with it. 

If you don't have your JSON solidified yet, it would probably look something like this: 
{
"action_type": "line",
"line_start_x": 1,
"line_start_y": 2,
"line_length": 4,
"line_end_x": 5,
"line_end_y": 6
}
Then, create a function that will go through this in a loop (I'm quite new to this, so if I do something wrong, I'm sorry):
while(actions = your_json_var['action_type']) {
drawPeerLine(your_json_var['line_start_x'], your_json_var['line_start_y']); // Keep adding in the varibles you need
}
Now, I threw in the other function there. Use the two included variables to draw the line. You've done it for the other client, now just do the same. 

                        
这篇关于如何在不同的计算机上从第一台计算机绘制相同的线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！