javascript - 查找当前 SkewX、SkewY 和旋转值 - Javascript

Question

考虑到可能存在仅使用旋转或仅使用 skewX 等的多种场景，我如何才能找到元素上当前的旋转、skewX 和 skewY 变换设置。

到目前为止，我很好地返回了旋转 Angular :

getAngle:function(obj){ 
   var matrix=obj.css("-webkit-transform")||obj.css("-moz-transform")||obj.css("-ms-transform")||obj.css("-o-transform")||obj.css("transform");

   if(matrix!=='none'){
       var values=matrix.split('(')[1].split(')')[0].split(','),    
           a=values[0],
           b=values[1],
           angle=Math.round(Math.atan2(b,a)*(180/Math.PI));
   }else{
       var angle=0;
   };
return angle;
}

这效果很好，但从其他地方阅读我了解到，一旦应用任何其他变换就会扰乱矩阵，并且在尝试查找值时会导致问题。

我已阅读相关链接，但他们似乎没有解决方案。

那么，是否可以修改此函数以处理返回 skewX 和 skewY 值，无论是否设置了旋转？

谢谢!

Answer 1

这是一种解决方案:

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