我正在尝试使用论坛将度数转换为 X 和 Y 坐标,以便我可以使用 CSS 通过“顶部”和“左侧”偏移在圆的圆周上放置点。
这些帖子描述了三 Angular 函数来帮助解决这个问题:
- Find the point on a circle with given center point, radius, and degree
- Find the point with radius and angle
数十次搜索不断出现这个公式:
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
这些数字应该是在圆弧内,但它们没有按顺序排列,而且我无法让它们只在半圆内。 有人可以告诉我我做错了什么吗?
最佳答案
问题是 Math.sin()和 Math.cos()取一个以弧度为单位的 Angular 。我猜你是乘以 180 来得到 Angular 。
尝试改变
var angle = ((amount / range) * 180);
与
var angle = ((amount / range) * Math.PI);
关于javascript - 使用 x y 坐标绘制半圆周围的点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30216711/