我怎么才能变换和增加比例呢?

2022-04-09 00:00:00 scale transform jquery javascript css

我有一个对象,它已经应用了某种类型的转换(但没有缩放)。主要有以下几点: (translate(69.8671px, 258.873px) translateZ(9999px) rotate(0deg);

我想要做的是将比例也应用于此。

我可以用以下命令读取对象转换:

var style = window.getComputedStyle($(this)[0]);
var matrix = new WebKitCSSMatrix(style.transform);

现在有没有一种方法可以将比例应用到这个已经存在的转换?我要在MICSEENTER和MICSELEVE上执行此操作,因此我需要稍后移除刻度。


解决方案

据我所知,您希望手动完成此操作,因为您之前有一些级联转换。在这种情况下,手动初始化DOMMatrix:

let mtrx =new DOMMatrix("matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.8671, 258.873, 9999, 1)"
    .replace(/matrix3ds*(|)/gi,"")
    .split(",")
    .map(d => +d))

这将为您提供4 x 4转换矩阵:

|m11  .  . .
|m21 m22 . .
|m31 m32 . .
|m41  .  . .
在2D矩阵中,scaleX是a,scaleY是d,同样,在3D矩阵中,scaleX是m11,scaleY是m22。因此,如果您要将比例增加2,您可以:

mtrx.m11 *= 2 //scaleX
mtrx.m22 *= 2 //scaleY
mtrx.m33 *= 2 //scaleZ

您还可以调用Build Inscale3dSelf

mtrx.scale3dSelf(3)

然后将对象编译回字符串并将其设置为Transform:

el.style.transform = mtrx.toString()
注: 记住,如果你像这样相乘,你的平移不会缩放,如果你也想缩放平移,那么你也需要相乘第四列(MX4)。

相关文章