Блог

Я пытаюсь создать многопользовательскую игру для рисования, когда я перемещаю курсор, будет вызвана линия рисования, и я смог увидеть линии.

ниже приведена функция рисования линий

 const drawLine = (x1, y1, x2, y2) => {

    contextRef.current.beginPath();
    contextRef.current.moveTo(x1, y1);
    contextRef.current.lineTo(x2, y2);
    contextRef.current.stroke()
    contextRef.current.closePath();
}
 

Проблема в том, что я буду получать координаты с другой машины, при получении данных я пытался вызвать Draw-Line, но это не работает, я не смог увидеть и никаких линий, нанесенных на холст

 useEffect(() => {
    const { oldx, oldy, newx, newy } = state.remoteCords;
    drawLine(oldx, oldy, newx, newy)

}, [state.receivedDrawEvent])
 

Но когда я попытался отправить холст через изображение, на принимающей стороне
я смог отобразить изображение холста,используя приведенное ниже.

   useEffect(() => {

    console.log("Image event", state.image)

    if (state.image != null) {
        var image = new Image();
        image.src = state.image;
        contextRef.current.drawImage(image, 0, 0)
    }


}, [state.image])
 

Обновление-1
Добавление всего компонента для лучшего понимания

 const Canvas = () => {


const [isDrawing, setIsDrawing] = useState(false);
const [prevX, setPrevX] = useState(null)
const [prevY, setPrevY] = useState(null)
const [x, setX] = useState(null)
const [y, setY] = useState(null)

const canvasRef = useRef(null);
const contextRef = useRef(null);


const dispatch = useDispatch()
let state = useSelector(state => {

    return {
        clientId: state.user.clientId,
        gameId: state.user.gameId,
        remoteCords: state.game.remoteCords,
        receivedDrawEvent: state.game.receivedDrawEvent
    }
})

useEffect(() => {
    const canvas = canvasRef.current;
    canvas.width = parseInt(getComputedStyle(document.querySelector('#canvasElement')).getPropertyValue('width'))
    canvas.height = window.innerHeight;
    canvas.style.width = `100%`;
    canvas.style.height = `100%`;
    const context = canvas.getContext("2d");
    context.lineCap = "round";
    context.strokeStyle = "black";
    context.lineWidth = 2;
    contextRef.current = context;
}, []);

useEffect(() => {

    const { oldx, oldy, newx, newy } = state.remoteCords;
    drawLine(oldx, oldy, newx, newy)
}, [state.receivedDrawEvent])



const drawLine = (x1, y1, x2, y2) => {

    console.log("drawing")
    contextRef.current.beginPath();
    contextRef.current.moveTo(x1, y1);
    contextRef.current.lineTo(x2, y2);
    contextRef.current.stroke()
    contextRef.current.closePath();
}

const startDrawing = ({ nativeEvent }) => {

    // set the current x,y as prev cords
    setPrevX(x)
    setPrevY(y)
    setIsDrawing(true);
};

const finishDrawing = () => {
    setIsDrawing(false);
};

const draw = ({ nativeEvent }) => {

    let x = getMousePosition(nativeEvent).x
    let y = getMousePosition(nativeEvent).y

    setX(x)
    setY(y)

    if (!isDrawing) return;


    drawLine(prevX, prevY, x, y)

    setPrevX(x)
    setPrevY(y)
};


return (
    <canvas
        onMouseDown={startDrawing}
        onMouseUp={finishDrawing}
        onMouseMove={draw}
        ref={canvasRef}
        id="canvasElement"
        style={canvasStyle}
    />
);}