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)");
        });
}

在上面的示例中， ab，bc，cd 之间的距离相等，但起点与 a 和 d 之间的距离相同要点不平等。我希望通过半圆的外线保持点之间的相同距离。

Answer 1

所以你有一个大半径R（= 300）和圆盘半径r（= 50）。每个小盘在第一近似中占据角度区间

phi = (2*r)/R

在大圈子上。如果你想在圆上放置n（= 4）个小圆盘，那么你想要得到相等角度psi的n + 1（= 5）个空格。因此

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

或

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

然后小盘的中心需要有角度

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

可能在这种精心调整之后，光学印象是外部区段现在太短，这是由于没有第二个脂肪终点引起的。

Answer 2

请记住，您正在设置(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)"
    );
  });
}

这将以0 - （pi / 2）的等距角显示每一个，具体取决于您拥有的.r-c元素的数量。

注意：它可能看起来像第一个和最后一个元素不是等距的，但这是一种错觉。每个紫色圆圈的中心与其邻居的距离等于θ= 0; theta = Pi。

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

2 个答案: