Javascript 如何在使用转换矩阵数据时考虑转换源

Javascript how to factor in transform-origin when using transform matrix data

本文关键字：转换 数据 Javascript      更新时间：2023-09-26

我试图找到转换元素的四个角。但是我目前只有转换原点设置为 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 转换原点的元素？

转换源属性等效（或者，如果您喜欢这样的话，可以类似）转换之前的转换和转换之后的反向转换。

在你的例子中，假设你有一个变换原点：10px 20px;和一个变换：rotate（20度）

这相当于

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

你可以用旧的方式做到这一点（在开始时从x中减去10px，在末尾添加10px），或者计算复合矩阵并逐步完成

相关文章：