1

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

到目前为止,我很好地返回了旋转角度:

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 值?

谢谢!

4

1 回答 1

0

这是一种解决方案:

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
  };
};
于 2017-05-18T20:47:03.243 回答