【问题标题】:Why can't I position the elements correctly on the circumference of a circle?为什么我不能在圆周上正确定位元素?
【发布时间】:2016-04-07 12:36:46
【问题描述】:

我有这个小提琴:http://jsfiddle.net/wQXCL/427/

效果很好。将图像定位在弧的末端。但这是因为我在定位图片时带走了90度(Math.PI/2)。

带走90度前:http://jsfiddle.net/wQXCL/428/

对我来说,这看起来像是在圆上计算点的公式:

x = cx + r * cos(a)
y = cy + r * sin(a)

起始角度是 90 度,这样对吗?

还是我错误地解释了整个事情?

【问题讨论】:

  • 直接从中心点以东开始

标签: javascript d3.js geometry trigonometry coordinate-systems


【解决方案1】:

D3 的arc.startAngle() 指定为:

角度以弧度表示; 0 对应 12 点钟方向(负 y) 顺时针方向前进,在 2π 处重复。

相比之下,trigonometric functions on the unit circle 的定义如下:

从原点 (0, 0) 到 (x, y) 的射线与正 x 轴形成 角度 θ,(逆时针旋转为正)

为了弥补这一点,您需要从弧的角度中减去 π / 2 以在三角计算中使用它们。

【讨论】:

  • 但这仍然意味着增加角度逆时针移动点。另一种方法是使用 (y,x) 坐标系,例如角度 a 的点,电阻 r 是 y = rcos(a), x=rsin(a)。
  • @dmuir 这是不正确的。使用屏幕方向时,y 轴指向下方,这意味着当转动 顺时针 时,与 x 轴正向的角度会增加。出于这个原因,角度值的增加将使该点顺时针移动。查看更新后的JSFiddle,它将角度增加了 0.25、0.5、0.75 和 1.0 * Math.PI;。该点的位置因此顺时针旋转。
猜你喜欢
  • 1970-01-01
  • 2011-10-17
  • 2019-10-18
  • 1970-01-01
  • 2023-03-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-16
相关资源
最近更新 更多