@ioaipwex

Как отрисовывать линию в сторону курсора всегда фиксированной длинны?

Имеются координаты курсора в сторону которых постоянно отрисовывается линия от центра и доходит она соответственно до курсора. Как можно сделать так, чтобы линию всегда имена фиксированную длину?
Код:
ctx = canvas.getContext('2d');
setInterval(function draw_line() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.moveTo(document.documentElement.clientWidth / 2, document.documentElement.clientHeight / 2);
    ctx.lineTo(x, y);
    ctx.lineWidth = "2";
    ctx.stroke();
}, 1);

x, y - координаты курсора
  • Вопрос задан
  • 68 просмотров
Решения вопроса 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
можно через Math.atan2() посчитать угол из центра на мышку.
Зная угол — найти конец линии фиксированной длины length под этим углом:
const { documentElement: el } = document;
const [cx, cy] = [el.clientWidth / 2, el.clientHeight / 2];
const angle = Math.atan2(y - cy, x - cx);
const length = 50;
const [bx, by] = [cx + length * Math.cos(angle), cy + length * Math.sin(angle)];
// рисуем линию из (cx, cy) в (bx, by)


P.S. Раз у вас логика от центра канвы, может быть удобнее однажды сделать ctx.translate(width/2, height/2) — и центр (0, 0) теперь будет в центре холста.
Ответ написан
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
ctx = canvas.getContext('2d');
setInterval(function draw_line() {
    // дано:
    // x, y - координаты курсора мышки
    // size - длина линии в пикселях

    // координаты начала линии
    const cx = document.documentElement.clientWidth / 2;
    const cy = document.documentElement.clientHeight / 2;

    // дельта X и Y (разница между коордами мышки и центром
    const dx = x-cx;
    const dy = y-cy;
    
    // расстояние от начала линии до мышки
    const dist = Math.hypot(dx, dy);

    // на сколько надо умножить Дельты, чтобы получить линию заданной длины
    const multiplier = size/dist;

    // высчитываем координаты конца линии
    const nx = cx + dx * multiplier;
    const ny = cy + dy * multiplier;

    // рисуем линию
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.moveTo(cx, cy);
    ctx.lineTo(nx, ny);
    ctx.lineWidth = "2";
    ctx.stroke();
}, 1);
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы