javascript - 如何检索 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

我已经调整了您的 JSFiddle 答案以提供解决方案 - 更新了您的正则表达式以允许负数，并添加了一个方法“rotate_degree”，它将根据 computedStyle 矩阵计算旋转 Angular 。该值作为整数放置在结果数组的末尾。

解决方案在 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])