我怎么才能变换和增加比例呢?
我有一个对象,它已经应用了某种类型的转换(但没有缩放)。主要有以下几点:
(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)。
相关文章