如何檢索translate3d的值？

Question

這個問題以前已經問過StackOverflow，我的不同之處在於，我希望能夠檢索負值，並且能夠使用transform中的另一個參數檢索它，這將是我的rotateZ(...deg)案件。

我跟着另一篇文章，關於如何獲得translate3d的值，建議的代碼工作，它得到的是正值而不是負值（減號是缺失的）。

另一個問題是，當我添加一個新的參數沒有任何工作了，我想能夠添加任何參數，並仍然使其工作。

我想這來自於與正則表達式的問題，請參見http://jsfiddle.net/Lindow/3gBYB/81/

正則表達式：

transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/) 

的Javascript：

function getTransform(el) { 
    var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform'); 
    var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/); 

    if(!results) return [0, 0, 0]; 
    if(results[1] == '3d') return results.slice(2,5); 

    results.push(0); 
    return results.slice(5, 8); // returns the [X,Y,Z,1] values 
} 

var slider = document.getElementById('slider'); 
var translation = getTransform(slider); 

var translationX = translation[0]; 
var translationY = translation[1]; 
var absX = Math.abs(translationX); 
var absY = Math.abs(translationY); 

alert(absX + ' : ' + absY); 

HTML/CSS：

<div id="slider"></div> 

---- 

#slider { 
-webkit-transform:translate3d(-393px, -504px, 0) rotateZ(30deg); 
// remove rotateZ to make it work with positiv values 
// number in translate3d may vary from -9999 to 9999 
} 

有什麼建議嗎？

Answer 1

我還發現另一種解決方案，

爲（HTML）：

<div style="translate3d(-393px, -504px, 0) rotateZ(30deg);">...</div> 

做（JavaScript的）：

// get translate3d(..px, ..px, 0px) rotateZ(30deg) 
function matrixToArray(matrix) { 
    return matrix.substr(7, matrix.length - 8).split(', '); 
} 

function matrix_translate3d(pos) { 
    var matrix_list = []; 
    matrix = matrixToArray($(pos).css("-webkit-transform")); 
    x = matrix[4].replace(/px/gi, ''); 
    y = matrix[5].replace(/px/gi, ''); 
    matrix_list.push(parseInt(x)); 
    matrix_list.push(parseInt(y)); 
    return matrix_list; 
} 

var matrix_position = matrix_translate3d(...); 
// matrix_position[0], matrix_position[1] 

簡短的解決方案。

Answer 2

我已經調整了您的JSFiddle答案來提供解決方案 - 更新您的正則表達式以允許負數，並添加了一個方法「rotate_degree」，它將從computedStyle矩陣計算旋轉角度。該值作爲整數放置在結果數組的末尾。

解決方案是在這裏的jsfiddle：http://jsfiddle.net/Lymelight/3gBYB/89/

function getTransform(el) { 
    var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform'); 

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

    var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/); 


    var result = [0,0,0]; 
    if(results){ 
     if(results[1] == '3d'){ 
     result = results.slice(2,5); 
     } else { 
     results.push(0); 
     result = results.slice(5, 9); // returns the [X,Y,Z,1] value; 
     } 

     result.push(rotate_degree(transform)); 
    }; 
    return result; 
} 

var slider = document.getElementById('slider'); 
var translation = getTransform(slider); 

console.log(translation); 

var translationX = translation[0]; 
var translationY = translation[1]; 
var absX = Math.abs(translationX); 
var absY = Math.abs(translationY); 

console.log('TrX: ' + translationX + ', TrY: ' + translationY + ' , Rotation Angle: ' + translation[3]); 

alert('TrX: ' + translationX + ', TrY: ' + translationY + ' , Rotation Angle: ' + translation[3])