Question

我正在尝试使用JavaScript绘制均匀分布在半圆中的点。

到目前为止，我已经计算出了基于X坐标计算Y坐标的公式，它产生了一个半圆。问题是，因为我的X坐标是有规律的间隔，所以这些点在顶点处看起来更接近，并且在弧的两端更加间隔开（以某种抛物线配置）。我想要产生的是均匀间隔的点，就像钟面上的分钟。

到目前为止，这是我的代码：

// Cast the h_addr_list to in_addr 
// since h_addr_list also has the ip address in long format only
addr_list = (struct in_addr **) he->h_addr_list;

请参阅我的JSfiddle以获取可视化示例：https://jsfiddle.net/7Lbqhtme/2/

我认为我需要改变的是$ pos_x的乘数，以便间隔从0得到进一步减少，（但我只有GCSE数学并且正在努力解决这个问题）......

有人可以帮我调整一下这段代码，以便更均匀地放置输出点吗？

PS。它不必完全准确（使用SIN和COS等），它可以只是一个乘数，它将$ x间隔从0开始减小，这样点的间隔就会更均匀。

感谢您的期待！

Answer 1

要获得完整的圆圈，您确实需要使用以下parametric equations来获取正确的x和y坐标：

x(t) = shift_x + r*Cos(t)

y(t) = shift_y + r*Sin(t)

其中t是您的弧度角度，r是圆的半径，shift允许在上面看到组件中心。对于均匀间隔的t，您应该在中心点(shift_x,shift_y)周围获得均匀的空间点。

示例用法：Your JS fiddle

$r = 200;
$step = Math.PI/20
for ($i = 0; $i <= 20; $i++) {

  $x = $r * Math.cos($step*$i);
  $y = $r * Math.sin($step*$i);
  $("#point_" + Math.round($i) ).css({ "left": $x + 300 , "bottom": $y-20 });

}

绘制半圆形的点

1 个答案: