Question

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

我不知道为什么。我正在用json将mousemove和mousedown coordiantes发送到服务器，它返回我发送的相同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();
}

HTML5 Canvas不绘制线条。 WebSockets共享画板

1 个答案: