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

Question

我试图保持两个圆圈之间的距离相同(绿色)。

代码:here

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>

CSS:

#red,#green,#blue{
            width : 100%;
            height : 900px; 
            position : relative;
        }
        #red{           
            background : red;
            position:relative;
        }
        #green{         
            background : green;
        }

.r-c{
            width: 100px;
            height: 100px;
            background: purple;
            color: white;
            border-radius: 50px;
            line-height: 100px;
            text-align: center;
            position: absolute;
            bottom: calc(50% - 50px);
            left: calc(50% - 50px);
        }
        #svg-red{
            width: 600px;
            height: 600px;
            border-radius: 300px;
            bottom: -300px;
            left: calc(50% - 300px);
            background: yellow;
            position: absolute;
        }

JS:

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到最后一个点的距离点不相等。 我想在半圆外线的各点之间保持相同的距离。

Answer 1

所以你有一个很大的半径 R (=300) 和磁盘半径 r (=50)。每个小圆盘在第一近似中占据的 Angular 截面为

phi = (2*r)/R

在大圆圈上。如果你想在圆上放置 n (=4) 个小圆盘，那么它们之间有 n+1 (=5) 个空间，你想要获得相等的 Angular psi。因此

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

或

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

小圆盘的中心需要有 Angular

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

<小时/>

经过精心调整后，视觉印象可能是外部片段现在太短了，这是由于没有第二个脂肪端点造成的。