다른 컴퓨터의 첫 번째 컴퓨터에서 어떻게 동일한 선을 그릴 수 있습니까?

그리기 앱을 개발 중입니다. HTML 코드는 클라이언트 측이며 server.js는 서버입니다. 내가다른 컴퓨터의 첫 번째 컴퓨터에서 어떻게 동일한 선을 그릴 수 있습니까?

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 경우 output.txt

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

을 Node.js를를 사용하여 연결로 Socket.IO에 있어요 이 난 후 얻을 로그 파일입니다 구글 크롬에 작은 선을 그리기

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

출처

2014-01-18 anujspoddar

output.txt를 읽는 것으로부터 server.js가 문자열을 다른 것으로 보낼 수는 있지만 그걸 그릴 수는 없다고 생각합니다. – anujspoddar

만들기 두 기능.

하나는 JSON을 읽고 다른 하나는 JSON을 읽는 것입니다. 당신이 당신의 JSON 아직 응고가없는 경우

, 아마 다음과 같이 보일 것입니다 :

{ 
"action_type": "line", 
"line_start_x": 1, 
"line_start_y": 2, 
"line_length": 4, 
"line_end_x": 5, 
"line_end_y": 6 
}

을 그리고, 루프에서이 통과하는 함수를 만들 (나는 아주 새로운 해요 내가 뭘 잘못 그래서 만약이, 나는) 죄송합니다 :

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 
}

지금, 내가 거기에 다른 기능에 던졌다. 포함 된 두 변수를 사용하여 선을 그립니다. 다른 클라이언트를 위해이 작업을 수행했습니다. 이제는 똑같은 작업을 수행하십시오.

출처

2014-01-18 04:54:27 ilarsona

다른 컴퓨터의 첫 번째 컴퓨터에서 어떻게 동일한 선을 그릴 수 있습니까?

답변

관련 문제