Блог

Главная - Вопросы по программированию - Установите вес и высоту холста инструментов пера от руки относительно элемента и отзывчивый

Установите вес и высоту холста инструментов пера от руки относительно элемента и отзывчивый

#javascript #reactjs #html5-canvas

#javascript #reactjs #html5-холст

Вопрос:

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

 const canvas = canvasRef.current;
canvas.width = videoContainer.getBoundingClientRect().width;
canvas.height = videoContainer.getBoundingClientRect().height;
canvas.style.width = `${videoContainer.getBoundingClientRect().width}px`;
canvas.style.height = `${videoContainer.getBoundingClientRect().height}px`;

const context = canvas.getContext("2d");
context.lineCap = "round";
context.strokeStyle = "#FF9900";
context.lineWidth = 5;
contextRef.current = context;

canvasRef.current.addEventListener("mousemove", ({ offsetX, offsetY }) => {
  if (!isDrawing) {
    return;
  }
  var x = offsetX;
  var y = offsetY;

  contextRef.current.beginPath();
    contextRef.current.moveTo(x, y);
      contextRef.current.lineTo(x, y);
    contextRef.current.stroke();
});

Как мне создать offsetX и offsetY относительно контейнера удаленного элемента, потому что я отслеживаю offsetX и offsetY в массиве и передаю его для перерисовки на удаленном ПК с помощью WebSocket

Комментарии:

1. Я думаю, вы сможете решить свой вопрос после прочтения этого: developer.mozilla.org/en-US/docs/Web/API/Element /…

2. Да, спасибо, статья была на ходу, но проблема, с которой я столкнулся, заключается в том, чтобы сделать относительное положение мыши для рисования offsetX и offsetY равным в разных контейнерах разных размеров экрана (удаленный и локальный ПК)

3. Как только вы получите ограничительную рамку контейнера, вы можете выполнить быструю арифметику для унификации разных размеров экрана и в основном передавать информацию, такую как x на 30% слева y на 60% сверху и т.д. Разве это не то, чего вы хотите?

4. Я пытаюсь осознать это

Метки: