【发布时间】：2016-06-07 15:13:59
【问题描述】：
我正在 html5 画布中制作一个实时绘画应用程序。当一个用户在画布上绘图时一切正常，但是当两个用户同时绘图时，一切都变得一团糟，例如，如果一个用户改变颜色，所有客户端的颜色都改变，线条开始从一个点绘制到另一个点。 .如何解决这个问题？谢谢，这是我的代码。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.width="600";
canvas.height="500";
var radius = 10;
var mouse = {x:0,y:0};
var drag = false;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 20, 20);
};
imageObj.src = 'rhino4.png';
$scope.colorChange = function(color){
Socket.emit("colorChange",color);
};
Socket.on("colorChange",function (color) {
context.strokeStyle = color;
context.fillStyle = color;
})
$scope.radiusChange = function(size) {
Socket.emit("radiusChange",size);
}
Socket.on("radiusChange",function (size) {
radius = size;
context.lineWidth = radius*2;
})
context.lineWidth = radius*2;
var putPoint = function (mouse) {
if(drag){
context.lineTo(mouse.x,mouse.y)
context.stroke();
context.beginPath();
context.arc(mouse.x,mouse.y,radius,0,Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(mouse.x,mouse.y);
context.globalCompositeOperation='source-atop';
context.drawImage(imageObj, 20, 20);
context.globalCompositeOperation='source-over';
}
}
Socket.on("putPoint",function (mouse) {
putPoint(mouse);
});
var engage = function(mouse){
console.log("in engage",mouse);
drag = true;
putPoint(mouse);
}
var disengage = function(){
drag = false;
context.beginPath();
}
var socketPutPoint = function(e){
mouse.x = e.offsetX;
mouse.y = e.offsetY;
Socket.emit("putPoint",mouse);
}
Socket.on("engage",function (mouse) {
console.log("engaging");
engage(mouse);
});
var socketEngage = function (e) {
mouse.x = e.offsetX;
mouse.y = e.offsetY;
console.log(mouse);
Socket.emit("engage",mouse);
}
var socketDisengage = function (e) {
mouse.x = e.offsetX;
mouse.y = e.offsetY;
console.log(mouse);
Socket.emit("disengage",mouse);
}
Socket.on("disengage",function (mouse) {
disengage();
})
canvas.addEventListener('mouseup',socketDisengage);
canvas.addEventListener('mouseleave',socketDisengage);
canvas.addEventListener('mousedown',socketEngage);
canvas.addEventListener('mousemove',socketPutPoint);
我想在 putpoint 之后在 colorChange 方法中将颜色改回原来的颜色，但这似乎不起作用
【问题讨论】：
-
您需要跟踪每个客户的“最后一点”，并在向客户的“最后一点”发出
context.lineTo(mouse.x,mouse.y)之前执行moveTo（这也适用于颜色，因此您可以设置正确的客户端颜色）。 -
了解颜色，但我不太清楚点，我是否必须在每次绘制后或其他客户端触发 mouseup 事件后移动到旧点
-
尝试在你的 mousedown 处理程序 (
socketEngage) 上做（加上那里的原始代码）mouse.last_x = e.offsetX; mouse.last_y = e.offsetY;（函数的开始），在你的 mousemove 处理程序 (socketPutPoint)mouse.last_x = mouse.x; mouse.last_y = mouse.y;（函数的开始），在putPoint之前context.lineTo(mouse.x,mouse.y)添加if (mouse.last_x && mouse.last_y) context.moveTo(mouse.last_x,mouse.last_y);以了解我在说什么=）希望你能做剩下的调整。 -
感谢提示 :) 我修复了颜色一，第一行几乎固定，请写一个答案以便我接受
标签： javascript html canvas socket.io real-time