javascript - 调整大小后如何计算旋转元素的中心

Question

我已经问过这个same question months ago , 但没有人能够回答我，即使在制作了 fully functional example on Plunker 之后也是如此, 那么，我再去问一下，是的，我还是有同样的问题。

我的问题:找到其中有一些旋转的元素的中心，在调整它的大小后，将其用作新的旋转轴。

在我的实际示例中，可以看到实际的问题；我创建了两个圆圈以更好地显示问题。旋转并调整元素大小后，可以看到红色和蓝色圆圈彼此之间的距离。

Blue Circle:中心的“正确”位置，通过将 cx/cy 坐标设置为计算的元素中心，加上在其中应用变换旋转来实现。变换将圆平移到正确的位置。

红圈:与蓝圈相同，减去变换旋转，这些值用作变换 rotate() 的旋转轴。

我的假设到此为止:通过在蓝色圆圈中应用变换 rotate()，我正在考虑计算中心的旋转 Angular ，所以我所要做的就是复制矩阵计算由 rotate() 函数生成。我已经使用用户可以单击以进行旋转的四个 handle 来执行此操作，可能会出现什么问题？

我的目标:通过旋转调整元素的大小，使旋转的轴心保持在中心。

我认为this answer gave me some info ，这里的数学帮助我确定了旋转 handle 的起始位置，但我仍然找不到在调整大小后计算新中心的正确方法。

该示例是使用 D3js + AngularJS v1 制作的。我积极参与这两个方面的工作，但我是几何数学世界的新手。

再次，this is the project on Plunker .

Answer 1

要获得变换和旋转元素的中心，最准确的方法可能是让浏览器为您计算它。

首先创建一个 SVGPoint 对象来保存我们原来的中心点。

var centre = svg.createSVGPoint();

用原始对象的中心初始化这个点。您可以通过在元素上调用 getBBox() 并执行简单计算来获取它。

var bbox = obj.getBBox();
centre.x = bbox.x + bbox.width / 2;
centre.y = bbox.y + bbox.height / 2;

接下来，从变换对象的transform属性中获取变换矩阵

var  matrix = transformedObj.transform.baseVal.consolidate().matrix

现在我们可以用这个矩阵转换我们的 SVGPoint 对象。

var transformedCentre = centre.matrixTransform(matrix);

在此之后，transformedCentre 的 x 和 y 属性应该是您转换后的中心点。

这应该可以，但我还没有测试过。