Синхронизация в реальном времени перетаскиваемых изображений на холсте для рисования

Я работаю над приложением для рисования с использованием HTML5 Canvas, JavaScript и Socket.IO. Создатель комнаты может рисовать на холсте, а рисунки обновляются в режиме реального времени для других пользователей в комнате. Создатель также может добавлять и перетаскивать изображения PNG на холст. Однако у меня возникают проблемы с синхронизацией новых позиций перетаскиваемых изображений в режиме реального времени для других пользователей в комнате.

Вот соответствующий код:

Client-side:

function onMouseMove(e) {
    // ...
    if (isCreator()) {
        const selectedImage = placedImages.find((img) => img.selected);
        if (selectedImage) {
            selectedImage.x = mouseX - offsetX;
            selectedImage.y = mouseY - offsetY;
            requestAnimationFrame(redrawCanvas);
        }
    }
}

function onMouseUp(e) {
    drawing = false;
    socket.emit('mouseUp', { sessionId });

    if (isCreator()) {
        const selectedImage = placedImages.find((img) => img.selected);
        if (selectedImage) {
            selectedImage.selected = false;
            socket.emit('updateImagePosition', { id: selectedImage.id, x: selectedImage.x, y: selectedImage.y });
        }
    }
}

socket.on('updateImagePosition', ({ id, x, y }) => {
    const image = placedImages.find((img) => img.id === id);
    if (image) {
        image.x = x;
        image.y = y;
        requestAnimationFrame(redrawCanvas);
    }
});

Server-side (Socket.IO):

function updateImage(socket, data) {
  const roomID = findRoomByCreator(socket.id);
  if (!roomID) return;
    const image = rooms[roomID].drawingData.find((img) => img.type === 'image' && img.id === data.id);
  if (image) {
    image.x = data.x;
    image.y = data.y;
    socket.to(roomID).emit('updateImage', data);
  }
}

В этой реализации создатель комнаты может перетаскивать изображения, но другие пользователи видят новые позиции изображения только после обновления страницы.

Как я могу синхронизировать новые позиции перетаскиваемых изображений в хранилище реального времени для всех пользователей в комнате?


Ответы (0 шт):