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

Question

[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 - координаты курсора

Comments

[Сергей Сергей]

чёртова математика.
изменять координаты вектора с началом в центре холста и концом под курсором мыши пропорционально отношению требуемой длины к фактической длине вектора и "сложить" полученный вектор с центром холста.

[Роман]

Сергей Сергей, это 5-й - 6-й класс математики (пропорции). Тут даже тригонометрия не нужна. Но нынешние лоботрясы ходят в школу только чтобы поиграть на мобилке в бравостарс, так что да, вопросы мельчают и все скатывается к сюжету "Идиократии" ((((

Answer 1

[Сергей Соколов]

можно через 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) теперь будет в центре холста.

Comments

[Роман]

Парень пропорции не понимает, а вы ему нормализацию вектора через тригонометрию подсовываете ))))

[Роман]

ну и думаю тут
// рисуем линию из (cx, cy) в (bx, by)

нужно все таки так
// рисуем линию из (cx, cy) в (cx+bx, cy+by)

[Сергей Соколов]

Роман, точно. Поправил. Благодарю.

Answer 2

[Роман]

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);