2012-11-23 57 views
4

首先獲取矩陣。Javascript/jQuery如何從矩陣值中獲取比例的值

this.getMatrix = function(obj) 
{ 
    var matrix = obj.css("-webkit-transform") || 
       obj.css("-moz-transform") || 
       obj.css("-ms-transform")  || 
       obj.css("-o-transform")  || 
       obj.css("transform"); 
    return matrix; 
}; 

並且獲得一個量表的價值。

this.getScaleDegrees = function(obj) 
{ 
    var matrix = this.getMatrix(obj), 
     matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/, 
     matches = matrix.match(matrixRegex); 
    return matches; 
}; 

並且獲得旋轉的值。

this.getRotationDegrees = function(obj) 
{ 
    var matrix = this.getMatrix(obj), 
     angle = 0; 

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

    return angle; 
}; 

現在,我面臨一個問題。
當函數'getScaleDegrees'失敗時,同時存在元素的旋轉和縮放。
由於函數'getRotationDegrees'正常運行,我想我將在函數'getRotationDegrees'的幫助下編輯'getScaleDegrees'函數。

所以,問題是如何獲得一個規模的價值。

任何好主意或計算方法?


編輯:

有改變尺度和旋轉和比例的值的函數,並且每個時間旋轉是不同的。函數'getMatrix'返回的值就變成這樣。

none [no rotate & no scale] 
matrix(1.2, 0, 0, 1.2, 0, 0) [edit scale] 
matrix(0.965926, -0.258819, 0.258819, 0.965926, 0, 0) [edit rotate] 
matrix(1.3523, -0.362347, 0.362347, 1.3523, 0, 0) [edit rotate & edit scale] 
+0

'matrix'包含什麼? – Barmar

+0

有一個功能可以改變比例和旋轉,每次比例和旋轉的數值都是不同的。 函數'getMatrix'返回的值就變成這樣。 ' '無[無旋轉&無刻度]' '矩陣(1.2,0,0,1.2,0,0)[編輯比例]' '矩陣(0.965926,-0.258819,0.258819,0.965926,0,0)編輯旋轉]' '矩陣(1.3523,-0.362347,0.362347,1.33523,0,0)[編輯旋轉和編輯比例]' –

+0

可能會更容易將矩陣轉換爲數組嗎? –

回答

2

其中的一個解決方案。

轉換矩陣陣列(感謝名單eicto)

this.parseMatrix = function(_str) 
{ 
    return _str.replace(/^matrix(3d)?\((.*)\)$/,'$2').split(/, /); 
}; 

獲得規模

this.getScaleDegrees = function(obj) 
{ 
    var matrix = this.parseMatrix(this.getMatrix(obj)), 
     scale = 1; 

    if(matrix[0] !== 'none') { 
     var a = matrix[0], 
      b = matrix[1], 
      d = 10; 
     scale = Math.round(Math.sqrt(a*a + b*b) * d)/d; 
    } 

    return scale; 
}; 

'Math.sqrt(a*a + b*b)' 的值稱爲CSS-TRICKS

+0

謝謝你的正則表達式! – ackerman

相關問題