求矩阵变换的旋转和倾斜

问题描述

我在 CSS 中有以下变换矩阵

//将元素旋转 60 度element.style.transform = "矩阵(0.5,0.866025,-0.866025,0.5,0,0)"

我可以用这个找到旋转...

//where a = [0.710138,0.502055,-0.57735,1,0,0]var 旋转 = ((180/Math.PI) * Math.atan2( ((0*a[2])+(1*a[3])),((0*a[0])-(1*a)[1]))) - 90控制台日志(旋转)；//~60

同样用于偏斜如果...

//skew(30deg,-50deg)element.style.transform = "矩阵(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]

然而，一旦我同时使用倾斜和旋转，一切都会变得奇怪，尤其是因为旋转公式与倾斜的公式相同......所以公式不可能是正确的.

我如何确定旋转和旋转?应用了两个属性的偏斜，我只知道矩阵变换.

缩放也弄乱了我的偏斜值，我认为这不应该.

解决方案

我需要相同的功能，今天我最终得到了这段非常有效的代码.

我从这里获得灵感:https://www.youtube.com/watch?v=51MRHjKSbtk从下面的答案，如果没有提示二维码分解，我永远找不到它>

我处理了一个 2x2 的案例，我将尝试扩展到 2x3 以包括翻译.但应该很容易

var a = [a, b, c, d, e, f];var qrDecompone = 函数(a){var 角度 = 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);返回 {角度:角度/(Math.PI/180)，//这是以度为单位的旋转角度scaleX: scaleX,//scaleX 因子scaleY: scaleY,//scaleY 因子skewX: skewX/(Math.PI/180),//skewX 角度度数skewY: 0,//skewY 角度度数translateX: a[4],//平移点 xtranslateY: a[5]//平移点 y};};

看起来transformMatrix中的最后两项，在分解之前，是平移值.您可以直接提取它们.

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 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]

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.

I took inspiration from here:https://www.youtube.com/watch?v=51MRHjKSbtkand from the answer below, without the hint QR decomposition i would never find it out

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
  };
};

It looks like that the last two items in the transformMatrix, before decomposition, are translation values. You can extract them directly.

这篇关于求矩阵变换的旋转和倾斜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！