HTML5 Canvas 不画线。 WebSockets 共享画布板

Question

希望你会很好。我正在制作一个与画布和网络套接字共享的简单板（服务器上的 Java，而不是节点）。我已经将抽奖分享给进入网页的不同客户。问题是，当我们绘制时，画布开始像这样绘制......（见图）

CANVAS WRONG DRAWING

我不知道为什么。我正在使用 json 将 mousemove 和 mousedown 坐标发送到服务器，它返回我发送的相同 jsons 坐标......我认为问题是当我收到响应时，画布没有正确绘制。

这是我的画布代码：

$(document).ready(() => {
    console.log("THE DOC IS READY :)");
    drawing();
    connect();
});

var start = {};
var draw = {};
var close = {};
var myCanvas;
var ctx;
var dimensionProps;

function drawing() {
    myCanvas = document.getElementById("canvas");
    ctx = myCanvas.getContext("2d");
    setProps(myCanvas, 800, 500);
    dimensionProps = {
        left: myCanvas.offsetLeft,
        top: myCanvas.offsetTop
    };
    if (myCanvas) {
        let mouseisDown = false;
        var cPosX, cPosY;
        ctx.lineWidth = 5;
        $(myCanvas).mousedown((e) => {
            mouseisDown = true;
            start.x = e.pageX;
            start.y = e.pageY;
            console.log("start"+JSON.stringify(start))
            sendDraw(start);
            //startDraw(start.x,start.y)
        }).mousemove((e) => {
            if (mouseisDown) {
                draw.x = e.pageX;
                draw.y = e.pageY;
                console.log("drawing"+JSON.stringify(draw))
                sendDraw(draw);
                //drawingCanvas(draw.x,draw.y)
            }
        }).mouseup((e) => {
            mouseisDown = false;
        });
    }
    clear(ctx, myCanvas);
}

const setProps = (canvas, w, h) => {
    canvas.width = w;
    canvas.height = h;
}

const clear = (ctx, canvas) => {
    $("#clear-btn").click(() => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    });
}

// cross-browser canvas coordinates
const drawingPos = (pPos, dProps) => ((pPos) - (dProps));

这是 websocket（我从 java 后端收到的坐标是“onmessage”）：

var ws;

const sendDraw = (coord) => ws.send(JSON.stringify(coord));

const close = () => ws.close;

function connect() {
    ws = new WebSocket("ws://" + location.host + "/Board_Project/chatsv");

    ws.onmessage = (e) => {   
        var mydraw = JSON.parse(e.data);
        console.log("this is what i received " + JSON.stringify(mydraw)); //the same coordiantes that I send
        startDraw(mydraw.x,mydraw.y);
        drawingCanvas(mydraw.x, mydraw.y);
        //endDraw();
    }  

    ws.onopen = (e) => {  
        console.log("SUCCESSFULLY CONNECTION");
    }

    ws.onclose = (e) => {
        if (ws.readyState === WebSocket.OPEN) {
            console.log("THE CONNECTION HAS FINISHED");
        }
    }

    ws.onerror = (e) => {
        console.log("error al conectar");
    }
}   

const startDraw = (x, y) => {
    ctx.beginPath();
    ctx.strokeStyle = "black"; 
    cPosX = x - dimensionProps.left;
    cPosY = y - dimensionProps.top;
    //ctx.moveTo(x,y); //it works
    ctx.moveTo(cPosX,cPosY);
}

const drawingCanvas = (x, y) => {
    cPosX = x - dimensionProps.left;
    cPosY = y - dimensionProps.top;     
    ctx.lineTo(cPosX+10,cPosY+10);
    ctx.stroke();
}

const endDraw = () => ctx.closePath();

我不发布java服务器的代码，因为它只获取json，然后再次发送。所以我认为没有必要发布它..

希望你能帮助我！

谢谢！

Answer 1

您说“服务器只获取 json，然后再次发送。”

嗯，关键是你需要在 ws.onmessage 时使 mousemove 与 mousedown 不同。

你的 webSocket 无法区分 mousedown 和 mousemove。 mousedown 和 mousemove 侦听器都调用 sendDraw()。

 $(myCanvas).mousedown((e) => {
    mouseisDown = true;
    /* ...*/
    sendDraw(start);
    //startDraw(start.x,start.y)
}).mousemove((e) => {
    if (mouseisDown) {
        /* ...*/
        sendDraw(draw);
        //drawingCanvas(draw.x,draw.y)
    }
})

当您的 webSocket 从服务器收到消息时，它总是会同时调用 startDraw() 和 drawingCanvas()。
无论是由 mousemove 还是 mousedown 触发。

ws.onmessage = (e) => {
    var mydraw = JSON.parse(e.data);
    console.log("this is what i received " + JSON.stringify(mydraw)); //the same coordiantes that I send
    startDraw(mydraw.x,mydraw.y);
    drawingCanvas(mydraw.x, mydraw.y);
    //endDraw();
}  

所以，你可以使用 ws.onmessage 的 mouseisDown 或者在调用 sendDraw 时添加一些标签。

ws.onmessage = (e) => {
    var mydraw = JSON.parse(e.data);
    if(mouseisDown){
        drawingCanvas(mydraw.x, mydraw.y);
    } else {
        startDraw(mydraw.x,mydraw.y);
    }
    //endDraw();
}