无法理解 X（主要是 1.66667）的用途

Question

我想知道 1.666666666666667 是什么。来自这个函数。（该功能适用于我需要的功能，但它是它的精简版。只是想更好地理解它，通过蛮力方法得出该数字，想知道是否有动态获取它的方法？

此外，如果有人可以阐明我如何更好地更改功能，或者添加我在此处找到的代码：http://xahlee.info/js/svg_circle_arc.html（我已经实现了部分），但我不完全理解其中的任何一个rotMatrix 数据将不胜感激。

var gaugeSweep = 300;
var currentValue = 15;
var maxValue = 15;
var currentAngle = (currentValue * gaugeSweep) / maxValue;
var value = getArcPath(0, currentAngle, false);

document.getElementById("foo").setAttribute("d", value);

function getArcPath(startingAngle, endingAngle, isStatic) {
    const startingPt = getCoordinatesForAngle(4.7, startingAngle, gaugeSweep);
    const endingPt = getCoordinatesForAngle(4.7, endingAngle, gaugeSweep);

    const X = maxValue / 1.666666666666667;
    const largeArc = isStatic ? 1 : gaugeSweep > 180 ? (currentValue > X ? 1 : 0) : 0;

    return ['M', startingPt.x, startingPt.y, 'A', 4.7, 4.7, 0, largeArc, 1, endingPt.x, endingPt.y].join(' ');
}

function getCoordinatesForAngle(radius, angleInDegrees, gaugeSweep) {
  const angleInRadians = ((angleInDegrees - 90 - gaugeSweep / 2) * Math.PI) / 180.0;
  // const angleInRadians = angleInDegrees * (Math.PI / 180); // <-- this is the proper code for angle in radians math wise.

  const centerX = 6;
  const centerY = 6;
  return {
    x: +centerX + radius * Math.cos(angleInRadians),
    y: +centerY + radius * Math.sin(angleInRadians),
  };
};

function sliderOnChange(data) {
  currentValue = data;
  currentAngle = (currentValue * gaugeSweep) / maxValue;
  value = getArcPath(0, currentAngle, false);
  document.getElementById("val").setAttribute("value", data);
  document.getElementById("foo").setAttribute("d", value);
}

<h5>
  Gauge Value:
  <input name="range" id="toggle" type="range" min="0" max="15" value="15" onChange="sliderOnChange(+this.value)" />
  <input id="val" value="15" min="0" max="15" type="number" onChange="sliderOnChange(+this.value)"></input>
</h5>

<div style="width: 288px;height: 300px;"><svg viewBox="0 0 12 12" style="border: 1px solid">
  <path id="foo" d="" stroke="red" stroke-width="2" fill="none" />
  </svg>
</div>

var gaugeSweep = 300;
var currentValue = 15;
var maxValue = 15;
var currentAngle = (currentValue * gaugeSweep) / maxValue;
var value = getArcPath(0, currentAngle, false);

document.getElementById("foo").setAttribute("d", value);

function getArcPath(startingAngle, endingAngle, isStatic) {
    const startingPt = getCoordinatesForAngle(4.7, startingAngle, gaugeSweep);
    const endingPt = getCoordinatesForAngle(4.7, endingAngle, gaugeSweep);

    const X = maxValue / 1.666666666666667;
    const largeArc = isStatic ? 1 : gaugeSweep > 180 ? (currentValue > X ? 1 : 0) : 0;

    return ['M', startingPt.x, startingPt.y, 'A', 4.7, 4.7, 0, largeArc, 1, endingPt.x, endingPt.y].join(' ');
}

function getCoordinatesForAngle(radius, angleInDegrees, gaugeSweep) {
  const angleInRadians = ((angleInDegrees - 90 - gaugeSweep / 2) * Math.PI) / 180.0;
  // const angleInRadians = angleInDegrees * (Math.PI / 180); // <-- this is the proper code for angle in radians math wise.

  const centerX = 6;
  const centerY = 6;
  return {
    x: +centerX + radius * Math.cos(angleInRadians),
    y: +centerY + radius * Math.sin(angleInRadians),
  };
};

Answer 1

在我看来，X 可以帮助您确定 largeArc，一个指示弧是否“大”的布尔值。通过这条线：

const largeArc = isStatic ? 1 : gaugeSweep > 180 ? (currentValue > X ? 1 : 0) : 0;

我们知道所有静态弧都是大的。如果弧不是静态的，则如果量规扫描超过 180 或当前值大于最大值的某个倍数，则弧很大。这个倍数是X。目前，如果当前值超过最大值的 15 / 1.6... = 9 倍，则测量扫描 180 或更小的非静态角度很大。更具描述性的变量名称，尤其是 X，将使代码更具可读性。

无法理解 X（主要是 1.66667）的用途

Trouble understanding what the X (1.66667 mostly) is for

javascript

math

geometry

svg