|
Цитата:
|
|
А покажите пожалуйста примеры
|
пример где невозможно обойтись без матрицы
допустим я хочу узнать на какой угол сейчас повёрнут элемент.
причём повёрнут он в CSS
ниже небольшой эксперемент
1) Попробуем извлечь значение transform из стиля элемента. (но там нечего нет так как в style мы незаписывали нечего)
2) Попробуем извлечь значение transform из расчитанного стиля. (но тут я получаю тоько матрицу в которой описаны все преобразования)
3) раз удалось получить только матрицу, то единственный способ узнать градусы это вычислить градусы из матрицы.
<!DOCTYPE HTML>
<html>
<head> </head>
<style>
#div1 {
background-color:#ddd;
height: 100px; width: 100px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg);
}
</style>
<body>
<br/><br/>
<div id="div1">javascript.ru</div>
<script>
//пример 1
var el=document.getElementById('div1'),
style=el.style,
transform = style.getPropertyValue("-webkit-transform") ||
style.getPropertyValue("-moz-transform") ||
style.getPropertyValue("-ms-transform") ||
style.getPropertyValue("-o-transform") ||
style.getPropertyValue("transform");
alert(transform);
console.log(style);
//пример 2
style=window.getComputedStyle(el, null),
transform = style.getPropertyValue("-webkit-transform") ||
style.getPropertyValue("-moz-transform") ||
style.getPropertyValue("-ms-transform") ||
style.getPropertyValue("-o-transform") ||
style.getPropertyValue("transform");
alert(transform);
//пример 3
alert('сейчас произведём расчёт градусов');
matrix = transform.split( '(' )[1].split( ')' )[0].split(',');
alert( Math.round(Math.atan2(matrix[1], matrix[0]) * (180/Math.PI)) );
</script>
</body>
</html>
