Получение угла, на который повернут элемент средствами javascript

Получение угла, на который повернут элемент средствами javascript
В этой короткой статье я покажу как можно получить угол наклона элемента на странице.
Угол наклона задается с помощью css свойств, для каждого браузера свое свойство, вот например, поворот на 45 градусов выглядит так:

-webkit-transform: rotate(45deg); /* для хрома и сафари */
-moz-transform: rotate(45deg); /* для FireFox */
-ms-transform: rotate(45deg); /* для IE */
-o-transform: rotate(45deg); /* для оперы */

Чтобы получить угол средствами js нужно получить значение этих свойств, но если попытаться получить значение, то в результате мы получим вот такую строку:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, 0, 0)

В Этой строке 6 параметров, и ни один из них не является значением угла в градусах. Это матрица, по которой производится искривление элемента.
Первый параметр — это косинус угла, на который сделан поворот. Второй — синус угла, на который сделан поворот, Третий — минус(cos(a)*-1) косинус угла, и четвертый минус синус угла.
Пятый и шестой параметры определяют смещение по вертикали и горизонтали.
Для получения угла нам понадобится только первый и второй параметры, то есть синус и косинус угла. Дальше дело техники, обычная математика. Ниже приведен код для получения угла в градусах:

// функция для определения угла наклона элемента 
function getDegreeElementById(id_element){
	var element = document.getElementById(id_element);
	var style = window.getComputedStyle(element, null);
	// получаем значение стилей
	var valueStyle = style.getPropertyValue("-webkit-transform") ||
		style.getPropertyValue("-moz-transform") ||
		style.getPropertyValue("-ms-transform") ||
		style.getPropertyValue("-o-transform") ||
		style.getPropertyValue("transform");
	// если стилей нет, то угол 0 градусов
	if(valueStyle == 'none') return 0;
	// разбираем полученное значение
	console.log(valueStyle);
	var values = valueStyle.split('(')[1];
	values = values.split(')')[0];
	values = values.split(',');
	// получаем синус и косинус
	var cos = values[0];
	var sin = values[1];
	// вычисляем угол
	var degree = Math.round(Math.asin(sin) * (180/Math.PI));
	if(cos<0){
		addDegree = 90 - Math.round(Math.asin(sin) * (180/Math.PI));
		degree = 90 + addDegree;
	}
	if(degree < 0){
		degree = 360 + degree;
	}
	return degree;
}

И пример использования:

<style>
#test-text-block{
	width: 400px;
	margin: 150px auto 0;
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg);  
}
</style>

<div id="test-text-block">тестовый текст</div>

// пример использования
var degree = getDegreeElementById(‘test-text-block’);
alert(degree);

Рассказать друзьям:


Оценить:
(3 оценок, среднее: 5,00 из 5)

Получение угла, на который повернут элемент средствами javascript: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code