用 x y 坐标围绕半圆绘制点答案

【问题标题】：Plotting points around a semicircle with x y coordinates用 x y 坐标围绕半圆绘制点
【发布时间】：2015-05-13 13:43:05
【问题描述】：

我正在尝试使用论坛将度数转换为 X 和 Y 坐标，这样我就可以使用 CSS 通过“顶部”和“左侧”偏移量在圆的圆周上放置点。

这些帖子描述了三角函数来帮助解决这个问题：

数十次搜索不断提出这个公式：

X = r * cosine(angle)
Y = r * sine(angle)

但我无法让它在我的代码上下文中工作。这段代码：

// angle is amount in degrees that the point should be at
// pieHeight is distance between bottom of semicircle and top of semicircle (i.e. radius)
var angle = ((amount / range) * 180);
offLeft = pieHeight + ((pieHeight) * Math.cos(angle));
offTop = (pieHeight / 3) + ((pieHeight) * Math.sin(angle));
console.log(amount, angle, Math.round(offLeft), Math.round(offTop));

// Update display
$(val).css('left', offLeft);
$(val).css('top', offTop);

产生这个结果：

控制台输出是：

0 0 268 45
20 36 117 -88
40 72 4 79
60 108 184 169
80 144 251 -21
100 180 54 -63

数字应该是圆弧，但它们不是按顺序排列的，我无法让它们只在一个半圆内。谁能告诉我我做错了什么？

【问题讨论】：

标签： javascript

【解决方案1】：

问题在于Math.sin() 和Math.cos() 采用弧度表示的角度。我猜你是乘以 180 得到一个以度为单位的角度。

尝试改变

var angle = ((amount / range) * 180);

与

var angle = ((amount / range) * Math.PI);

【讨论】：

传奇！那是固定它。现在看起来像这样：postimg.org/image/cnxuginfb 我只需要调整一些偏移量并反转一些数字，它就会按预期运行。