Как получить значения translate3d?

Question

Как получить значения translate3d?

1

Этот вопрос уже задан ранее в StackOverflow, что отличается от моего, так это то, что я хотел бы получить отрицательные значения и также получить его с другим параметром в transform который будет rotateZ(...deg) в моем случае.

Я следил за другим сообщением о том, как я могу получить значения translate3d, предлагаемый код работает и получает позитивные значения, но не отрицательные (знак минуса отсутствует).

Другая проблема заключается в том, что когда я добавляю новый параметр, ничего больше не работает, я бы хотел добавить все параметры и по-прежнему работать.

Я думаю, что это связано с проблемой с Regex, см. 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
}

Какие-либо предложения?

Nuri Katsuki 02 июнь 2017, в 21:02

Источник

Теги:

javascript

regex

css

2 ответа

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

Chris Mills 02 июнь 2017, в 19:49

Ещё вопросы

Nuri Katsuki · Accepted Answer · 2017-06-02T18-54-00.000Z

Я также нашел другое решение,

для (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]

Короткое решение.