Как читать отдельные значения преобразования в JavaScript?

Сообщение в блоге Webkit из прошлого года 3D-преобразования объясняет различные функции преобразования, которые можно использовать в свойстве -webkit-transform, Например:

#myDiv {
  -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
}

Мой вопрос: как вы получаете доступ к отдельным значениям в JavaScript? Когда вы читаете свойство webkitTransform элемента, вы просто получаете функцию matrix3d ​​() с 16 значениями в нем, например...

matrix3d(0.958684, 0.000000, .....)

Есть ли способ просто прочитать значение отдельной вещи преобразования, например rotateY()? Или мне нужно прочитать его из строки matrix3d ​​() и как?

ОТВЕТЫ

Ответ 1

// Suppose the transformed element is called "cover".
var element = document.getElementById('cover');
computedStyle = window.getComputedStyle(element, null); // "null" means this is not a pesudo style.
// You can retrieve the CSS3 matrix string by the following method.
var matrix = computedStyle.getPropertyValue('transform')
    || computedStyle.getPropertyValue('-moz-transform')
    || computedStyle.getPropertyValue('-webkit-transform')
    || computedStyle.getPropertyValue('-ms-transform')
    || computedStyle.getPropertyValue('-o-transform');

// Parse this string to obtain different attributes of the matrix.
// This regexp matches anything looks like this: anything(1, 2, 3, 4, 5, 6);
// Hence it matches both matrix strings:
// 2d: matrix(1,2,3,4,5,6)
// 3d: matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
var matrixPattern = /^\w*\((((\d+)|(\d*\.\d+)),\s*)*((\d+)|(\d*\.\d+))\)/i;
var matrixValue = [];
if (matrixPattern.test(matrix)) { // When it satisfy the pattern.
    var matrixCopy = matrix.replace(/^\w*\(/, '').replace(')', '');
    console.log(matrixCopy);
    matrixValue = matrixCopy.split(/\s*,\s*/);
}

Надеюсь, это поможет! Обратите внимание, что я не использовал другую библиотеку, кроме простого DOM API и собственной функции JavaScript JavaScript. Следовательно, это должно работать с универсальными браузерами и приложениями.

Ответ 2

Я думаю, как говорит syockit, итерация через таблицы стилей - единственный путь, вы можете использовать webkitMatchesSelector для обнаружения правил, которые соответствуют вашему элементу:

var theRules = new Array();
var theStylesheet = document.styleSheets;
if (document.styleSheets[0].cssRules)
        theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
        theRules = document.styleSheets[0].rules

var elem = document.getElementById("myDiv");

for (var i=0; i < theRules.length; i++) {
    if (elem.webkitMatchesSelector(theRules[i].selectorText)) {
        var theStyles = theRules[i].style;
        var j = theStyles.cssText.indexOf('-webkit-transform:');
        if (j>-1) {
            var s = theStyles.cssText.substring(j,theStyles.cssText.length).indexOf(';'); 
            document.getElementById("output").innerHTML=theStyles.cssText.substring(j+18,s);
        }
    }
}

Это предполагает разметку что-то вроде этого, я добавил некоторые дополнительные правила и значения, чтобы убедиться, что я вытаскиваю правильные значения. Если у вас несколько таблиц стилей, вам нужно настроить первую часть для повторения всех таблиц стилей, и вам, вероятно, придется иметь дело со спецификой, если ваш -webkit-transform появляется более чем в одном правиле:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Get style</title>
    <style>
    div {
        margin: 2em;
        padding: 2em;
    }
    #myDiv {
        -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
        border: 1px solid;
    }
    </style>
</head>
<body>
    <div id="myDiv">
        Just testing.
    </div>
    <div id="output">
    </div>
</body>
</html>

Ответ 3

Я столкнулся с этим вопросом сегодня утром. Похоже, что JavaScript не может прочитать элемент style.webkitTransform, пока он не будет явно установлен в атрибуте element style (либо встроен в HTML, либо процедурно через JavaScript). Как бы это ни звучало, если вам нужно, чтобы JS мог читать свойства CSS-преобразования, вам может быть лучше определить их начальные значения с помощью JavaScript, когда DOM будет готов.

Пример, используя jQuery:

$(document).ready(function(){
    $('.transform').css('webkitTransform', 'translateX(0)');
});

С этого момента вы сможете прочитать строку преобразования элемента и проанализировать ее для необходимых значений.

Ответ 4

Старый, но интересный вопрос, и никакой предыдущий ответ не попытался ответить на него.

К сожалению, для общего случая нет двухстрочного решения, и мы не знаем, какое разнообразие шагов преобразования (вращать, переводить и т.д.) нужно обращать в обратную сторону; чем меньше, тем легче.

В последних браузерах на основе webkit можно просто запросить ранее назначенное свойство:

var element = document.querySelector('div.slipping');
element.style.webkitTransform 
  -> "translate(-464px, 0px)"

Давайте продолжим с предположения, что нужно использовать вычисленный стиль. Возникает необходимость, например, если элемент находится в середине перехода CSS или анимации CSS, то есть текущее преобразование не является тем, которое было установлено напрямую.

Строка дескриптора матрицы, возвращаемая getComputedStyle, действительно может быть проанализирована с помощью регулярного выражения, но не все версии выше являются надежными, и они слишком непрозрачны. Простой способ сломать строку, если только она в очень плотной петле, чтобы гарантировать однопроходное регулярное выражение, заключается в следующем:

var matrixString = window.getComputedStyle(element).webkitTransform;
var matrix = matrixString
             .split('(')[1]
             .split(')')[0]
             .split(',')
             .map(parseFloat);

Но другой способ - просто использовать это, о чем раньше не упоминалось:

var cssMatrix = new WebKitCSSMatrix(matrixString);

Преимущество последнего подхода заключается в том, что вы также возвращаете матрицу 4x4, которая является стандартным представлением для аффинных преобразований, и Недостатком является то, что он, конечно, специфичен для WebKit. Если вы продолжаете работать с кортежем из шести значений, как в вопросе, он определяет в этой части стандарта CSS.

Тогда преобразование, например. вращение должно быть обратным. Может быть много простых преобразований, напрямую поддерживаемых CSS, например. переводить, масштабировать, вращать, перекосы и перспективы. Если применяется только один из них, вам просто нужно вернуть процесс вычисление матрицы преобразования.

Альтернативой является поиск или перевод кода, который делает это для вас в JS, например. тот же документ или Раздел 7.1 стандарта CSS содержит такие аннотированных алгоритмов. Преимущество заключается в том, что метод unmatrix способен с некоторыми ограничениями возвращать "атомные" преобразования, даже если более одного из них ( перевод, поворот и т.д.). Поскольку невозможно гарантировать успешное обратное проектирование этапов преобразования для общего случая, полезно подумать о том, какие типы преобразований могут быть применены, и были ли устранены дегенеративные или другие неприятные случаи. То есть вам нужно построить решение по своему усмотрению.

В частности, матричные версии всех 2D-CSS-преобразований также описаны здесь, ниже значения шести значений в 2D-преобразовании CSS вектор.

Еще одно предостережение состоит в том, что есть другие вещи, которые влияют на визуальный результат с точки зрения геометрических операций, например transform-origin.

Ответ 5

Эта ссылка из ссылки Apple Dev Reference может пролить больше света на объект:

Свойством webkitTransform является Строковое представление списка преобразования. Обычно это список содержит одну матрицу преобразование. Для 3D преобразуется, значение "matrix3d ​​(...)" с 16 значениями однородная матрица 4x4 между круглые скобки. Для двумерных преобразований value является строкой "matrix (...)" содержащий 6 векторных значений.

Ответ 6

Поскольку вы получаете только конечное значение матрицы из вычисленного стиля, вам, возможно, придется проверять правила встроенного стиля или правила стилей. Если element.style.webkitTransform ничего не дает вам, вы можете выполнить итерацию в таблицах стилей документов и посмотреть, какой из них соответствует вашему элементу. Затем вы можете повторно использовать свойство webkitTransform для получения/установки значения.

Ответ 7

Просто потому, что я не видел никаких рабочих решений Javascript One Line для преобразования матричного кода, вот мой. Быстро и просто:

Сначала получите все значения преобразования в матрице:

var yourDivsCssValues= window.getComputedStyle(yourDiv, null);
transformValues = testDivCSS.getPropertyValue('transform');

Чтобы извлечь transform-y как целое число:

var transformValueY = parseInt((yourVariable1.replace (/,/g, "")).split(" ")[5]);

Чтобы извлечь transform-x как целое число:

var transformValuetX = parseInt((yourVariable2.replace (/,/g, "")).split(" ")[4]);

Доступ к значению поворота довольно сложно, но есть хорошее руководство, если вы хотите это сделать: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

Ответ 8

Я думал об одной возможности. Если вы готовы разбирать строки в JavaScript, используйте

data=document.getElementById("myDiv").getAttribute("-webkit-transform");

затем интерпретировать data.

Ответ 9

вы можете использовать regex для получения карты значения свойства:

если переменная transformstyle содержит значение стиля

  //get all transform declarations
 (transformstyle.match(/([\w]+)\(([^\)]+)\)/g)||[]) 
      //make pairs of prop and value         
     .map(function(it){return it.replace(/\)$/,"").split(/\(/)})
     //convert to key-value map/object         
     .reduce(function(m,it){return m[it[0]]=it[1],m},{})

для

var transformstyle="-webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px)"

вы получите:

{scale: "1.1", rotateY: "7deg", translateZ: "-1px"}

Ответ 10

Простой способ извлечь отдельные значения из значения комплексного преобразования:

function parseComplexStyleProperty( str ){
   var regex = /(\w+)\((.+?)\)/g,
       transform = {},
       match;

   while( match = regex.exec(str) )
       transform[match[1]] = match[2];
  
   return transform;
}

//////////////////////////////////////////

var dummyString = "translateX(-50%) scale(1.2)",
    transformObj = parseComplexStyleProperty(dummyString);

console.log(transformObj);