如何在javascript中根据鼠标事件找到SVG形状的弧长和角度？

Question

我正在尝试使用鼠标事件旋转关于中心的不规则形状对象 考虑此链接上的图http://prntscr.com/7sixkt， AB线作为我用来旋转这个不规则图形的手柄，方形是显示BBOX（使用找到形状中心得到BBox方法。
我知道 A（中心点坐标）和 AB（BBox半径）的长度。我无法计算的是，如果我移动/拖动线AB作为旋转形状的手柄，如何找到 theta 或弧长 BC ，使用弧长公式我有2未知数， L =rθ（L和θ）。请指导如何找到它。

Answer 1

如果你可以计算AB从C开始切割成90°角的点（B'），你就可以减少Pitagoras定理的问题，因为你将问题重新定义为A，B'和C之间的矩形三角形，其θ为角度与初始情况相同，AB'和B'C之间的角度为90°。

在这种情况下，θ可以计算为弧cos（B'C / AC）

Answer 2

使用SVG，您只需要用鼠标事件指向A和B点。伪代码：

1. on mousedown事件，记录A (x0,y0)和B (x1,y1)
2. on mouseup event，记录鼠标位置(x2,y2)
3. 使用3个点，您可以在笛卡尔坐标上获得3个长度，从而可以计算θ的值。

使用SVG，在transform="rotate(θ)"上使用<img....>，顺时针旋转为正值，逆时针旋转为负值。