Javascript 如何保持半圆外线上两点之间的距离相同？

我试图保持两个圆圈（绿色）之间的距离不变

代码：

Html:

<div id="red" class="s">
            <div id="svg-red">
                <div id="r-c-1" class="r-c">a</div>
                <div id="r-c-2" class="r-c">b</div>
                <div id="r-c-3" class="r-c">c</div>
                <div id="r-c-4" class="r-c">d</div>       </div>
</div>
<div id="green" class="s"></div>

window.onload = function(){ 
var a = 36;
        $(".r-c").each(function(index,data){            
            var b = a + a * index;
            var x =  300 * Math.cos(b*Math.PI/180);
            var y =  300 * Math.sin(b*Math.PI/180);
            $(data).css("transform","translate("+x+"px,"+-y+"px)");
        });
}

JS:

<div id="red" class="s">
            <div id="svg-red">
                <div id="r-c-1" class="r-c">a</div>
                <div id="r-c-2" class="r-c">b</div>
                <div id="r-c-3" class="r-c">c</div>
                <div id="r-c-4" class="r-c">d</div>       </div>
</div>
<div id="green" class="s"></div>

window.onload = function(){ 
var a = 36;
        $(".r-c").each(function(index,data){            
            var b = a + a * index;
            var x =  300 * Math.cos(b*Math.PI/180);
            var y =  300 * Math.sin(b*Math.PI/180);
            $(data).css("transform","translate("+x+"px,"+-y+"px)");
        });
}

在上述示例中，a-b、b-c、c-d之间的距离相等，但起点到a和d到最后一点之间的距离不相等。

---

我希望在穿过半圆外线的点之间保持相同的距离。

记住，您正在设置

（x，y）

，但您是基于度来确定角度，而您需要基于弧度来确定角度。这就是你想要的：

window.onload = function() {
  var radius = 300;
  var $rcs = $(".r-c");
  var numAngles = $rcs.length + 1;
  var radians = Math.PI / numAngles;
  $rcs.each(function(index,data) {
    var polarCoords = (index + 1) * radians;
    var x = radius * Math.cos(polarCoords);
    var y = radius * Math.sin(polarCoords);
    $(data).css(
      "transform",
      "translate("+x+"px,"+-y+"px)"
    );
  });
}

这将根据您拥有的

.r-c

元素的数量，以0-（pi/2）的等距角度显示每个元素

---

注意：第一个元素和最后一个元素可能看起来不等距，但这是一种错觉。每个紫色圆圈的中心与相邻圆圈的距离相等，且与θ=0；θ=π。

所以半径R（=300）和圆盘半径R（=50）。在一阶近似下，每个小圆盘占据一个角截面

phi = (2*r)/R

在大圆圈上。如果您想在圆上放置n（=4）个小磁盘，则在它们之间有n+1（=5）个空间，您希望获得相等角度的psi。因此

Pi = n*phi + (n+1)*psi

或

小圆盘的中心需要有一定的角度

psi+phi/2+k*(phi+psi)

---

---

这可能是因为经过这一精心调整后，视觉上的印象是，由于没有第二个脂肪端点，现在外段太短了

澄清一下：您希望点盘外圆上的可见段大致相等？是@LutzL，所有点（在本例中为绿色圆）应以相等的距离分开，第一个圆应从非零度开始。我看不出结果有任何差异。顺便说一下，我希望第一个圆是从非零度开始的，它肯定能工作。。。我在你贴的密码笔里试过了。第一个圆位置的角度是多少？只要将polarCoords的值以弧度为单位进行偏移，就可以设置了。我明白你的意思了。我现在正在看。我想我已经弄明白了@RCR理论上你的方法是100%正确的。但这不是错觉@Derek，因为当我把圆圈（绿色）做成更小的半径时，它看起来很好。所以，它需要在DOM、CSS或JS中做一些更改，或者至少看起来圆之间的距离（绿色）是一样的。这里的“k”是什么？我假设公式是这样的，x=RMath.cos（psi+phi/2+k*（phi+psi））；y=正态sin（psi+phi/2+k*（phi+psi））；是吗？是的，k是从0到n-1的索引。是的，公式是关于极坐标系中的角度。