3

У меня есть функция, которая рисует линию имея ее длину и угол (это изменить нельзя, конечный результат от этого зависит)

Вот проблема:

введите сюда описание изображения

У меня есть расстояние a (линия на 0°) и расстояние b. По формуле пифагора получаю длину пунктирной линии. Также мне известен обозначенный угол.

Итоговая точка должна быть на конце пунктирной линии.

введите сюда описание изображения

Проблема в том, что точка уходит постепенно выше, а потом ниже.

Если поставить радиус больше - только ниже

В чем может быть проблема, ии как ее исправить?

let canv = document.getElementById('canv');
let ctx = canv.getContext('2d');
ctx.fillRect(0, 0, 300, 300);
let parts = 120;
let line_width = 300;
let part_width = line_width/(parts + 1);
let part_angle = (Math.PI/2)/parts;
let start_radius = 150;

// для ориентировки на холсте
ctx.strokeStyle = "white";
ctx.beginPath();
ctx.moveTo(0, 100);  
ctx.lineTo(300, 100);
ctx.moveTo(0, 150);  
ctx.lineTo(300, 150);
ctx.moveTo(0, 200);  
ctx.lineTo(300, 200);
ctx.moveTo(0, 250);  
ctx.lineTo(300, 250);
ctx.stroke();

ctx.strokeStyle = "red";
for(let i = 0; i <= parts; i++){
  let b = 150 - i*part_width;
  let hipotenusa = Math.sqrt(b*b + start_radius*start_radius);
  ctx.beginPath();
  ctx.moveTo(150, 250);  
  //поворачиваю точку с нужной длиной на нужный угол
  ctx.lineTo(
    150 + hipotenusa*Math.sin(i*part_angle + Math.PI*0.75),
    250 + hipotenusa*Math.cos(i*part_angle + Math.PI*0.75));
  ctx.stroke();
}
<canvas width="500" height="500" id="canv"></canvas>

Вот, что будет если не соиденять линии в одну точку (без полярныз координат, возможно поможет)

введите сюда описание изображения

7
  • Очень интересный вопрос. Ответа я конечно не знаю, но хочу обратить ваше внимание, что значение переменной hipotenusa у вас линейно увеличивается. Получается ровный отрезок. Если каждую точку этого отрезка поворачивать на угол что увеличивается, то получится окружность из за погрешности операций cos и sin 9 фев 2022 в 15:43
  • Задача - нарисовать отрезок под углом поточечно?
    – MBo
    9 фев 2022 в 16:10
  • @MBo да, именно так 9 фев 2022 в 16:55
  • @UserTest013 я думал об этих погрешностях. Но не нашел точного способа их нивелировать 9 фев 2022 в 16:56
  • @UserTest013 Граждане, вы не понимаете, о чем вы говорите. При чем тут погрешности? Вы думаете линия волнистая из-за ограниченной точности типа double?
    – user176262
    9 фев 2022 в 17:24

2 ответа 2

2

Решение №1. Равные углы.

Код состоит из нескольких частей:

  1. первый блок переменных - служебный, он необходим для представления решения;
  2. второй блок переменных - параметры изображаемой фигуры;
  3. собственно решение в виде отдельной функции.

В решении сначала определяем полярный угол конца отрезка, а затем - величину равномерного приращения угла. При изменении угла изменяется полярный радиус, длину которого найдём из прямоугольного треугольника, одним из катетов которого является перпендикуляр к прямой, а гипотенузой является рисуемый отрезок.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.offsetWidth;
var height = canvas.offsetHeight;
var centerX = width >> 1;
var centerY = height >> 1;
canvas.width = width;
canvas.height = height;

let lineAngle = 0.2; // угол направляющей прямой
let lineLength = 200; // длина прямой
let startAngle = Math.PI/2+0.4; // положение начальной точки (угол)
let startDist = 50; // положение начальной точки (расстояние до центра)
let divCount = 20; // количество делений

drawLinePolar();

function drawLinePolar() {
    let startX = centerX + startDist * Math.cos(startAngle);
    let startY = centerY - startDist * Math.sin(startAngle);
    let finishX = startX + lineLength * Math.cos(lineAngle);
    let finishY = startY - lineLength * Math.sin(lineAngle);
    let finishAngle = Math.atan2(-finishY+centerY, finishX-centerX);
    let deltaAngle = (finishAngle - startAngle) / divCount;
    let normAngle = lineAngle + Math.PI/2;
    let normDist = startDist * (Math.cos(startAngle) * Math.cos(normAngle) + Math.sin(startAngle) * Math.sin(normAngle));
    context.beginPath();
    for (let i = 0; i <= divCount; i++) {
        let currentAngle = startAngle + i * deltaAngle;
        let da = -currentAngle + normAngle;
        let l = normDist / Math.cos(da);
        let x = l * Math.cos(currentAngle);
        let y = l * Math.sin(currentAngle);
        context.moveTo(centerX, centerY);
        context.lineTo(centerX+x, centerY-y);
    }
    context.stroke();
    
// проверка /*
    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(finishX, finishY);
    context.strokeStyle = "#f00";
    context.lineWidth = 2;
    context.stroke();
// проверка */
}
#canvas {
    width: 100vw;
    height: 100vh;
}
<canvas id="canvas"></canvas>

Решение №2. Равные отрезки.

Здесь определим разницу координат между концами отрезка и разобьём её на требуемое количество частей.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.offsetWidth;
var height = canvas.offsetHeight;
var centerX = width >> 1;
var centerY = height >> 1;
canvas.width = width;
canvas.height = height;

let lineAngle = 0.2; // угол направляющей прямой
let lineLength = 200; // длина прямой
let startAngle = Math.PI/2+0.4; // положение начальной точки (угол)
let startDist = 50; // положение начальной точки (расстояние до центра)
let divCount = 20; // количество делений

drawLinePolar();

function drawLinePolar() {
    let startX = centerX + startDist * Math.cos(startAngle);
    let startY = centerY - startDist * Math.sin(startAngle);
    let finishX = startX + lineLength * Math.cos(lineAngle);
    let finishY = startY - lineLength * Math.sin(lineAngle);
    let dx = (finishX - startX) / divCount;
    let dy = (finishY - startY) / divCount;
    context.beginPath();
    for (let i = 0; i <= divCount; i++) {
        context.moveTo(centerX, centerY);
        context.lineTo(startX+dx*i, startY+dy*i);
    }
    context.stroke();

// проверка /*
    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(finishX, finishY);
    context.strokeStyle = "#f00";
    context.lineWidth = 2;
    context.stroke();
// проверка */
}
#canvas {
    width: 100vw;
    height: 100vh;
}
<canvas id="canvas"></canvas>

1
  • Дело в том, что мне еще нужно получить деления однаковой длины 9 фев 2022 в 17:02
1

Ничего интересного тут нет. Вы почему-то решили, что линейное изменение горизонтальной координаты конца отрезка, который Вы проводите, - i*part_width соответствует линейному изменению угла - i*part_angle. Что, конечно, не так.

Зачем Вам, вообще, гипотенуза, угол, синус и косинус, если Вы с самого начала знаете координаты конца отрезка?

6
  • Не знаю. Мне он не нужен. Я написал в начале, какие данные есть, а какие надо получить 9 фев 2022 в 16:53
  • @solarisedigle Я ничего не понял из этого предложения.
    – user176262
    9 фев 2022 в 16:54
  • Мне нужно нарисовать прямую именно способом поворота отрезков с началом в одной точке 9 фев 2022 в 17:03
  • @solarisedigle Перечитайте первый абзац моего ответа. Не торопитесь. Подумайте.
    – user176262
    9 фев 2022 в 17:25
  • И как это исправить? 9 фев 2022 в 17:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.