Как вы получаете translatex
, Перевести
или Translatez
Значение в JavaScript?
Оказывается, вам нужно прочитать преобразование матриц. Но это может быть довольно легко.
Матрицы
Браузеры поверните трансформировать
значения в 2D
или 3D
Матрицы в зависимости от того, какие преобразования вы применяли.
- Браузеры создают
3D
Матрицы, если вы применяете 3D-преобразования (X, Y, Z оси). - Браузеры создают
2D
Матрицы, если вы применяете 2D преобразования (только х, оси Y).
Мы можем получить матрицу через JavaScript с GetComputedstyle
Отказ
const style = window.getComputedStyle(element) const matrix = style.transform || style.webkitTransform || style.mozTransform
Давайте посмотрим на некоторые примеры:
.two-d { transform: translateX(10px) translateY(20px); }
.three-d { transform: translateX(10px) translateY(20px) translateZ(30px); }
2D VS 3D Matrices
Обратите внимание на значения матрицы выше. Вы можете заметить это:
2D матрица
2D Matrix имеет 6
значения.
- 5-е значение –
переводчик
6-е значение –
переводитель
3D матрица
3D Matrix имеет 16
значения.
- 13-е значение –
переводчик
- 14-е значение –
переводитель
15-е значение –
преобразователь
Получение ценностей Translate
Как только мы узнаем шаблон, извлечение значений легко. Во-первых, нам нужно знать, с какой матрицей мы имеем дело.
const style = window.getComputedStyle(element) const matrix = style.transform || style.webkitTransform || style.mozTransform // Can either be 2d or 3d transform const matrixType = matrix.includes('3d') ? '3d' : '2d'
Если матрица 2D
мы можем получить ценности translatex
и Перевести
такие значения, как это:
const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ') if (matrixType === '2d') { const x = matrixValues[4] const y = matrixValues[5] }
Если матрица 3D
мы можем получить ценности translatex
, Перевести
и Translatez
такие значения, как это:
const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ') if (matrixType === '3d') { const x = matrixValues[12] const y = matrixValues[13] const z = matrixValues[14] }
Я упаковал это в хорошую функцию для нас, чтобы использовать.
/** * Gets computed translate values * @param {HTMLElement} element * @returns {Object} */ function getTranslateValues (element) { const style = window.getComputedStyle(element) const matrix = style.transform || style.webkitTransform || style.mozTransform // No transform property. Simply return 0 values. if (matrix === 'none') { return { x: 0, y: 0, z: 0 } } // Can either be 2d or 3d transform const matrixType = matrix.includes('3d') ? '3d' : '2d' const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ') // 2d matrices have 6 values // Last 2 values are X and Y. // 2d matrices does not have Z value. if (matrixType === '2d') { return { x: matrixValues[4], y: matrixValues[5], z: 0 } } // 3d matrices have 16 values // The 13th, 14th, and 15th values are X, Y, and Z if (matrixType === '3d') { return { x: matrixValues[12], y: matrixValues[13], z: matrixValues[14] } } }
Используй это:
const {x, y, z} = getTranslateValues(element)
💥.
Только простые преобразования
gettranslatevalues
Работает только если Перевести
объявлен перед другими преобразованиями. Это связано с тем, что ценности преобразования стоят друг на друга.
Давайте объясним это при примере 2D Matrix.
Допустим, у вас есть этот элемент.
.element { transform: translateX(10px) translateY(20px); }
Вы уже знаете это:
- 5-й номер
10
что такое же значение, какпереводчик
- 6-го числа –
20
, что такое же значение, какпереводитель
Теперь давайте добавим вращать
Преобразование позади translatex
и Перевести
Отказ
.element { transform: translateX(10px) translateY(20px) rotate(10deg); }
Там нет разницы в 5 и 6-м значениях:
- 5-й номер
10
что такое же значение, какпереводчик
- 6-го числа –
20
, что такое же значение, какпереводитель
Но посмотрите, что произойдет, если вы вращать
первый.
.element { transform: rotate(10deg) translateX(10px) translateY(20px); }
- 5-й номер
6.37511
Что не то, что мы писали запереводчик
- 6-го числа –
21.4326
, что не то, что мы написали запереводитель
Просто обратите внимание на это!
Получение других ценностей преобразования в JavaScript
У меня не было возможности иметь дело с масштаб
, коситься
и вращать
Тем не менее, но мне было любопытно. Так что я гугул и нашел некоторые ответы:
Я считаю, что расчеты работают с отдельными преобразованиями. Я не уверен, что они работают, если преобразования сложены друг на друга. (Например, Skew -> Поверните
дает очень разное значение по сравнению с Rotate -> перекоснуть
).
Держите это просто, я думаю!
Полезные репозиторий фрагментов JavaScript
Я добавил этот код на репозиторий GitHub, который содержит JavaScript-фрагменты, которые я нашел полезным. Вы можете быть заинтересованы в Проверяя это Отказ
Спасибо за прочтение. Эта статья была первоначально опубликована на мой блог Отказ Подпишись на Моя рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.