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

Question

我正试图找到变形元素的四个角。 但是我目前只有一个变换原点设置为0,0的元素的解决方案。

我目前的步骤是：

使用

获取css变换矩阵

 var matrix=getComputedStyle(element).transform.

将元素转换为'none'。

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

变换原点属性与变换前的平移和变换后的反变换等效（或类似，如果您更喜欢这种方式）。

在你的情况下，让我们说你有一个转换起源：10px 20px;和变换：旋转（20度）

这相当于

• 转换：翻译（-10px -20px）
• 你的变换（在这种情况下旋转，但你会使用矩阵）
• transform：translate（10px 20px）

你可以用旧的方式做到这一点（从开头减去10px，最后加10px），或计算复合矩阵并在一步中完成