Javascript如何在使用变换矩阵数据时考虑变换原点

Question

我正在尝试找到变换后的元素的四个 Angular 。但我目前只有一个将transform-origin 设置为0, 0 的元素的解决方案。

我当前的步骤是:

使用

获取 css 变换矩阵

 var matrix=getComputedStyle(element).transform.

将元素变换设置为“无”。

element.style.transform='none';

获取元素未变换的边界框

var box= element.getBoundingClientRect();

重新应用转换。

使用变换矩阵重新创建未变换的矩形坐标

//2d only matrix example
 var x=(matrix[0]*point[0])+(matrix[2]*point[1])+matrix[4];
 var y=(matrix[1]*point[0])+(matrix[3]*point[1])+matrix[5];

您可以在此处查看测试用例 https://jsfiddle.net/pkxzf30t/

如何处理具有非 0, 0 变换原点的元素？

Answer 1

变换原点属性与变换之前的平移和变换之后的逆平移等效(或类似，如果您喜欢这种方式)。

在你的例子中，假设你有一个transform-origin: 10px 20px;和一个变换:旋转(20deg)

这相当于

• 变换:翻译(-10px -20px)
• 您的变换(在本例中为旋转，但您将使用矩阵)
• 变换:翻译(10px 20px)

您可以按照旧方法执行此操作(在开头从 x 中减去 10px，在末尾添加 10px)，或者计算复合矩阵并一步完成