主页 / 问题 / 1380288
Accepted
solarisedigle
Asked:2022-07-09 22:07:15 +0000 UTC2022-07-09 22:07:15 +0000 UTC

极坐标中正方形的虚线轮廓有凸起

  • 772

我有一个函数可以根据它的长度和角度画一条线（这不能改变，最终结果取决于它）

这是问题所在：

在此处输入图像描述

我有距离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>

如果您不将线连接到一个点，会发生以下情况（没有极坐标，它可能会有所帮助）

在此处输入图像描述

javascript

2 个回答

  1. 解决方案#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>

    • 2
  2. Best Answer

    这里没有什么有趣的。出于某种原因，您决定您正在i*part_width绘制的线段末端的水平坐标的线性变化对应于角度的线性变化 - i*part_angle。当然，这不是真的。

    如果您从一开始就知道线段末端的坐标，为什么通常需要斜边、角度、正弦和余弦？

    • 1

相关问题