我怎么才能变换和增加比例呢？ [英] How can I get transform and add scale?

问题描述

我有一个对象，它已经应用了某种类型的转换(但没有缩放)。主要有以下几点： (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)。}

这篇关于我怎么才能变换和增加比例呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！