How can I draw the same lines from the first computer on a different computer? [closed]

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/21199967/how-can-i-draw-the-same-lines-from-the-first-computer-on-a-different-computer

标签

javascript

html5

node.js

canvas

drawing