Тан Мин Вулки
Во многих инструментах рисования ( Adobe Photoshop , Эскиз и т. Д.), Если мы удержим кнопку Shift при нанесении линии, мы можем создавать совершенно прямые линии по горизонтали или вертикали.
Недавно я попробовал реализовать эту функцию в холсте JavaScript. Процесс действительно интересен. Я хотел бы поделиться прогрессом, как я его подошел.
Демо : Чтобы легче понять идею, вы можете проверить демо-версию на Демо-страница Отказ
Требования
Вход
- Базовая точка (б)
- Текущая позиция мыши (м)
Выход
- Проекция текущего положения мыши на оси x или оси Y (p)
Для удобства во всех графиках мы отмечаем базовую точку красным кругом и точной точкой мыши зеленым кругом.
Простое решение
Когда я решаю проблему, интуитивно понятно, что мы можем рассчитать расстояние между текущей позицией мыши с горизонтальной линией и вертикальной линией. Если положение мыши ближе к горизонтальной линии, чем вертикальная линия, мы возьмем проекцию на горизонтальной линии и наоборот.
Расчет довольно прост – вот код JavaScript:
Расширенная проблема
Как насчет того, что если мы хотим проецировать проект на линии биссектрина между горизонтальной линией и вертикальной линией (похоже с эскиз )? Это означает, что пользователи могут проецировать положение мыши на горизонтальной линии, вертикальной линии, 45-градусной линии угловой линии или линию угла 135 градусов.
Подход похож. На этот раз нам нужно рассчитать расстояние между положением мыши до 4 линий: горизонтальная линия, вертикальная линия и 2 линии бизеринга (45-градусная линия и линия 135 градусов). Но расчет более сложный.
Мы все еще можем разделить его на 2 шага:
- Определите, какая линия ближайшая к положению мыши
- Рассчитайте проекцию положения мыши на ближайшей линии
Шаг 1: Определите, какая линия ближайшая к положению мыши
Во-первых, нам нужно определить линейную формулировку 4 строк выше. Поскольку мы уже знаем базовую точку (X0, Y0) и угол линии, легко выяснить формулировку каждой строки.
Наконец, у нас будет 4 строки «Формулы:
Чтобы рассчитать расстояние между основанием положения мыши в каждую строку, мы можем использовать популярную формулу математики:
Шаг 2: Рассчитайте ортогональную проекцию положения мыши на ближайшей линии
Теперь проблема становится вычислением ортогональной проекции положения мыши (M) до ближайшей линии с формулой: AX + BY + (L)
Есть несколько способов решить эту проблему. Я сделал простой способ: сначала рассчитал формулу линии, которая содержит положение мыши M и перпендикулярно линии L, называемой L ‘. Затем решайте систему уравнений, чтобы получить точку пересечения между линией L и L ‘, которая является точкой проекции, которую мы находим.
После некоторых расчетов я выяснил формулу L ‘, которая проходит через m (x0, y0) и перпендикулярно l (ax + by +):
Теперь, чтобы найти пересечение, нам нужно решить систему уравнений:
Использование Правило Крамера И детерминант матрицы, мы можем легко решить это уравнение:
Граница
Есть ситуация, когда мы хотим ограничить границу проекции.
Пример:
В этом случае мы хотим ограничить проекцию в области белого прямоугольника, но используя обсуждаемый метод, точка проекции может быть вне границы.
В этой ситуации мы можем просто получить точку пересечения линии L ‘к границе (называемой p’).
Полный исходный код
Вы можете проверить демо и исходный код на Github Отказ
Счастливое кодирование!
Оригинал: “https://www.freecodecamp.org/news/how-to-lock-an-angle-when-drawing-on-canvas-in-javascript-51938b5abc7c/”