使用SVG和Javascript旋转调整大小的矩形

Question

我正在使用d3js和SVG调整大小和旋转矩形，我在位于矩形每个角落的手柄上捕获鼠标事件，每个角落有两个手柄，一个用于调整大小（方形），另一个用于旋转（圆圈）。

当我执行以下过程时，矩形从其位置“跳跃”到另一个：

• 旋转（这意味着它不会在零度以上）
• 调整大小（任何方向）
• 再次旋转（此时形状为“跳跃”）

只有在使用SVG中的transform rotate更新矩形的中心时才会发生跳转。

让我领先的一件事是在调整形状大小时更新旋转中心，当我这样做时，形状开始移动到“跳跃”放置它的最终位置。

我可以发布代码示例，这需要一些时间来做，但如果有助于查看问题，没有问题。

我所需要的只是已经遇到这个问题的人的指示。

编辑：

我已经制作了一个Plunker，其中包含了我在项目中使用的当前结构。所有事件控件都集中在svgApp.directive.js中。 在开发这个例子时我注意到的事情：

• 角度不为零后，元素的中心未正确计算，这是我的主要问题;
• 如果您将{{vm.model.image.transform.rotate}}应用于中心<circle>元素中的ng-attr-transform属性，您将会注意到它始终位于正确的中心（右侧圆圈 - 蓝色 - 在主SVG的底部评论）;

我知道这不是该工具的完美版本，它仍然有一些错误，例如旋转时鼠标方向的反转（调整大小/旋转手柄），但它的记录和结构非常接近我的方式从事该项目。

Plnkr：http://plnkr.co/edit/fXT0kZcRwJTPb7wQVHpg?p=preview

非常感谢任何有关此问题的帮助。