如何保持两点在半圆外线上的距离不变

How can I maintain the same distance between two points over the outer line of the semi-circle?

本文关键字：距离 半圆 何保持 两点      更新时间：2023-09-26

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

这里的代码:

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

所以你有一个大半径R(=300)和磁盘半径R(=50)。每个小圆盘在第一近似中占有

的角截面。
phi = (2*r)/R

在大圆上。如果你想在圆上放置n(=4)个小圆盘，那么在圆与圆之间有n+1(=5)个相等角度的空间。因此

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

或

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

小圆盘的中心需要有

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

这可能是经过这种精心的适应后，光学印象是外部节段现在太短了，这是由于没有第二个胖端点造成的。

记住，你在设置(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;

相关文章：