拖动以旋转SVG：g组。

Question

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

请看这里：http://jsfiddle.net/PbKYn/3/

请注意，在旋转开始时，角度在正值和负值之间闪烁，并且鼠标的2pi旋转仅将形状旋转1pi。（但我认为我的angleBetweenPoints函数没有问题，因为如果我将旋转应用于<ellipse>而不是<g>，则旋转是完美的。）

我做错了什么？谢谢-

- ZachB

---

如果我点击其中一个手柄并尝试将整个椭圆形旋转360°，它不会完全跟随。你想要这样吗？ - philipp

@philipp 不，那是其中一个错误，除了在0度左右闪烁。点击的控制点应该保持在鼠标下方。 - ZachB

Answer 1

修复方法是将旋转角度从angleBetweenPoints更改为currentAngle + angleBetweenPoints（伪代码）。我认为这意味着在应用旋转后，坐标也被转换，使得angleBetweenPoints实质上给出了dTheta而不是theta。唉。

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

- ZachB