找到矩阵变换的旋转和偏斜 [英] Find the Rotation and Skew of a Matrix transformation
问题描述
我在CSS中有以下转换矩阵
I have the the following Transform Matrix in CSS
// rotate the element 60deg
element.style.transform = "matrix(0.5,0.866025,-0.866025,0.5,0,0)"
and i可以使用这个来找到轮换......
And i can find the rotation using this...
// where a = [0.710138,0.502055,-0.57735,1,0,0]
var rotation = ((180/Math.PI) * Math.atan2( ((0*a[2])+(1*a[3])),((0*a[0])-(1*a[1]))) - 90
console.log(rotation); // ~60
类似于偏斜,如果......
Similarly for skew if...
// skew(30deg,-50deg)
element.style.transform = "matrix(1,-1.19175,0.57735,1,0,0)"
var skewY = ((180/Math.PI) * Math.atan2( ((0*a[2])+(1*a[3])),((0*a[0])-(1*a[1]))) - 90;
var skewX = (180/Math.PI) * Math.atan2( ((1*a[2])+(0*a[3])),((1*a[0])-(0*a[1])));
console.log([skewX,skewY]); // ~= [30,-50]
然而,只要我同时使用歪斜和旋转,一切都变得奇怪,尤其是因为th旋转公式与倾斜公式相同...因此公式不能正确。
However as soon as i use both skew and rotation everything goes weird not least because the formula for rotation is identical to that of skew... so the formulas can't be right.
我如何确定旋转和放大?两个属性都被应用的倾斜,我所知道的就是矩阵变换。
How do i determine both rotation & skew where both attributes have been applied and all i know is the Matrix Transform.
同样缩放我的偏斜值,我认为不应该这样。
Also scale messed up my skew values, which i dont think it should.
推荐答案
我需要相同的功能,今天我最终得到了这个非常好的代码。
I needed same functionality and today I ended up with this code that works very good.
我从这里获取灵感:
https://www.youtube.com/观看?v = 51MRHjKSbtk
并且来自下面的答案,没有提示 QR分解我永远找不到它
I took inspiration from here: https://www.youtube.com/watch?v=51MRHjKSbtk and from the answer below, without the hint QR decomposition i would never find it out
我在2x2案例中工作,我将尝试扩展到2x3以包含翻译。
但它应该很容易
I worked on a 2x2 case, i will try to expand to 2x3 to include also translations. But it should be easy
var a = [a, b, c, d, e, f];
var qrDecompone = function(a) {
var angle = Math.atan2(a[1], a[0]),
denom = Math.pow(a[0], 2) + Math.pow(a[1], 2),
scaleX = Math.sqrt(denom),
scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX,
skewX = Math.atan2(a[0] * a[2] + a[1] * a[3], denom);
return {
angle: angle / (Math.PI / 180), // this is rotation angle in degrees
scaleX: scaleX, // scaleX factor
scaleY: scaleY, // scaleY factor
skewX: skewX / (Math.PI / 180), // skewX angle degrees
skewY: 0, // skewY angle degrees
translateX: a[4], // translation point x
translateY: a[5] // translation point y
};
};
看起来,在分解之前,transformMatrix中的最后两个项是翻译值。你可以直接提取它们。
It looks like that the last two items in the transformMatrix, before decomposition, are translation values. You can extract them directly.
这篇关于找到矩阵变换的旋转和偏斜的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!