拖动以旋转SVG:g组

时间:2012-12-14 17:17:40

标签: html5 svg rotation d3.js transform

我的目标是让svg:ellipse有四个控制点,您可以使用它们来调整大小和旋转。如果旋转变换应用于椭圆本身,我的代码工作正常,但我想将旋转应用于容器svg:g,以便控制点同时旋转而无需额外的代码。当我将变换应用于组时,我认为旋转行为不正确,因为我没有正确地考虑变换后的坐标。

见这里:http://jsfiddle.net/PbKYn/3/

请注意,角度在旋转开始时的正值和负值之间闪烁,而鼠标的2pi旋转仅旋转形状1pi。 (我不认为我的angleBetweenPoints函数是错误的,因为如果我将旋转应用于<ellipse>而不是<g>,则旋转是完美的。)

我做错了什么?谢谢 -

1 个答案:

答案 0 :(得分:11)

http://jsfiddle.net/PbKYn/5/

修复方案是将旋转角度从angleBetweenPoints更改为currentAngle + angleBetweenPoints(伪)。我认为这意味着在应用旋转后,坐标也会进行转换,以使angleBetweenPoints基本上给出dTheta而不是theta。 Le叹了口气。