JavaScript函数以不正确的角度绘制弧线

Question

我正在尝试创建一个指向特定角度、宽度（以度为单位）和与中心的距离的弧（这样弧不会重叠）。

包含的 sn-p 调用 JavaScript 函数 DrawLine 画线，但角度不正确。此外，当DISTANCE_FROM_CENTER 变量发生变化时，圆弧的角度也会发生变化，这是不应该发生的。

我正在附上一个角度应该是什么样子的屏幕截图。

我还包括我们如何解释圆中的角度，310 度应该指向左上角。 javascript 将它们绘制为指向右侧。

let svg = document.getElementById("icon");
function drawLine(azimuth, radius, length)
{
  let circumference = radius * 2 * Math.PI;
  // Create an SVG <circle> element
  let line = document.createElementNS(svg.namespaceURI, "circle");
  line.setAttribute("r", radius);
  line.setAttribute("stroke-dasharray", length + ' ' + circumference);
  line.setAttribute("transform", "rotate(" + azimuth + ")");
  // Add it to the <svg> element
  svg.appendChild(line);
}

let DISTANCE_FROM_CENTER1 = 93,
DISTANCE_FROM_CENTER2 = 65,
DISTANCE_FROM_CENTER3 = 30,
DISTANCE_FROM_CENTER4 = 9;

drawLine(312, DISTANCE_FROM_CENTER1, 110);

drawLine(312, DISTANCE_FROM_CENTER2, 95);

drawLine(312, DISTANCE_FROM_CENTER3, 55);

drawLine(312, DISTANCE_FROM_CENTER4, 15);

svg {
  width: 400px;
}

circle {
  fill: none;
  stroke: black;
  stroke-width: 14;
}

<svg id="icon" viewBox="-100 -100 200 200">
</svg>

Answer 1

如果您要对齐线段的中间，则必须计算角度。该段从 0 开始，长度基于该起点，然后当您旋转该段时，整个物体会转动该量。由于您将相同的变换值 (200) 传递给所有线段，因此它们都转动相同的量，因此它们的所有起点仍然对齐。

所以试试这个（我只是使用您在 sn-p 中使用的值，不确定这些值与图片的关系如何，图片的段数、长度和角度不同）。计算您的段所包含的弧的百分比，并将旋转偏移一半。

let svg = document.getElementById("icon");
function drawLine(azimuth, radius, length) {
  
  let circumference = radius * 2 * Math.PI;
  let arc = length / circumference * 360;
  
  let line = document.createElementNS(svg.namespaceURI, "circle");
  line.setAttribute("r", radius);
  line.setAttribute("stroke-dasharray", `${length} ${circumference}`);
  line.setAttribute("transform", `rotate(${azimuth-(arc/2)})`);
  
  svg.appendChild(line);
}

const arcs = [
  {azimuth: 200, dist: 93, length: 110},
  {azimuth: 200, dist: 65, length:  95},
  {azimuth: 200, dist: 30, length:  55},
  {azimuth: 200, dist:  9, length:  15},
  //{azimuth: 200, dist: 1,  length: 1.5}
];

arcs.forEach(el=>{drawLine(el.azimuth, el.dist, el.length)});

svg {
  width: 400px;
}

circle {
  fill: none;
  stroke: black;
  stroke-width: 14;
}

<svg id="icon" viewBox="-100 -100 200 200">
</svg>

SVG 认为 0 是正确的，这就是路径开始的地方，所以如果你希望 312 指向左上角，就像你的图片一样，并且你还想继续传递它 312 等等，我想您可以从函数内部的方位角中减去 90。像这样：

let svg = document.getElementById("icon");
function drawLine(azimuth, radius, length) {
  
  let circumference = radius * 2 * Math.PI;
  let arc = length / circumference * 360;
  
  let line = document.createElementNS(svg.namespaceURI, "circle");
  line.setAttribute("r", radius);
  line.setAttribute("stroke-dasharray", `${length} ${circumference}`);
  line.setAttribute("transform", `rotate(${azimuth-(arc/2)-90})`);
  
  svg.appendChild(line);
}

const arcs = [
  {azimuth: 312, dist: 93, length: 110},
  {azimuth: 312, dist: 65, length:  95},
  {azimuth: 312, dist: 30, length:  55},
  {azimuth: 312, dist:  9, length:  15},
  //{azimuth: 312, dist: 1,  length: 1.5}
];

arcs.forEach(el=>{drawLine(el.azimuth, el.dist, el.length)});

svg {
  width: 400px;
}

circle {
  fill: none;
  stroke: black;
  stroke-width: 14;
}

<svg id="icon" viewBox="-100 -100 200 200">
</svg>