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矩阵计算旋转角度。该值在结果数组的末尾以整数形式放置。

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

Answer 2

我还找到了另一种解决方案，

（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]

简短解决方案。

如何检索translate3d的值？

2 个答案: