html - 拖动旋转 SVG :g group

Question

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

参见此处:http://jsfiddle.net/PbKYn/3/

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

我做错了什么？谢谢-

Answer 1

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

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