Показать сообщение отдельно
  #7 (permalink)  
Старый 20.01.2013, 15:12
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Цитата:
А покажите пожалуйста примеры
пример где невозможно обойтись без матрицы

допустим я хочу узнать на какой угол сейчас повёрнут элемент.
причём повёрнут он в 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>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 20.01.2013 в 15:48.
Ответить с цитированием