javascript - 协作绘画应用程序

Question

我正处于学习 Nodejs 客户端/服务器编程的早期阶段，对于我的第一个应用程序，我只想制作一个简单的协作绘图应用程序，例如 Paint。到目前为止，我有这段代码，唯一有效的是我的单击正确调用了我的 console.log，但在单击位置没有绘制矩形。有什么帮助吗？我对此还很陌生。

var io = require('socket.io')(serv,{});
io.sockets.on('connection', function(socket){
	
	SOCKET_LIST[socket.id] = socket;
	
	var self = {
		x:0,
		y:0,
		cx:0,
		cy:0,
	}
	
	socket.on('mousePos', function(data){
		self.x = data.x;
		self.y = data.y;
		//console.log('x:' + self.x + ' y:' + self.y);
	});
	
	socket.on('mouseClick', function(data){
		self.cx = data.x;
		self.cy = data.y;
		console.log('x:' + self.cx + ' y:' + self.cy);
	});
	
	socket.emit('paint', {x:self.cx, y:self.cy}); 
	
	/*for (var i in SOCKET_LIST){
		var socket = SOCKET_LIST[i];
		socket.emit('paint', {x:self.cx, y:self.cy}); 
	}*/
	
});

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

<div id="gameCanvasDiv">
	<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
</div>
	
<script>
	var socket = io();
	
	var ctx = document.getElementById("ctx").getContext("2d");
	
	ctx.fillStyle = "#FF0000";
	
	setInterval(function(){
		
		
    },40);
	
	document.onmousedown = function(event){
		
		socket.emit('mouseClick', {x:event.clientX, y:event.clientY});
	
	}
	
	document.onmouseup = function(event){
		
		socket.on('paint', function(data){
			ctx.fillRect(data.x,data.y,10,10);
		});
		
	}
	
	document.onmousemove = function(event){
        socket.emit('mousePos', {x:event.clientX, y:event.clientY});
    }

</script>

Answer 1

document.onmouseup = function(event){
    socket.on('paint', function(data){
        ctx.fillRect(data.x,data.y,10,10);
    });
}

在这里您仅订阅事件。所以你说 - “当鼠标抬起时，请为绘制事件添加一个处理程序”(因此此代码将被执行多次)。那么paint事件在哪里产生呢？谁寄的？当连接建立时，您只发送一次。所以你要做的是:

1. 将前端的绘制事件监听器模式设置为事件监听器外部。

2. 从onConnection事件中删除emit('paint')。

3. 为nodejs添加onMouseUp事件监听器。

4. 然后通过客户端的onMouseUp事件将该事件发送到nodejs。

5. 然后更新 Node 中的坐标并生成绘制事件。

6. 在前端监听绘画事件并绘制图像。