Разница между трансформированным div с различной точкой происхождения - PullRequest
Новая
       8

Разница между трансформированным div с различной точкой происхождения

2 голосов
/ 25 августа 2011

У меня есть два элемента div (прямоугольник), к которым применяются следующие преобразования: 

translate(100px, 100px) scale(2) rotate(20deg)

Эти div идентичны, за исключением того, что точка начала изменяется, у одного есть (0, 0), а у другого - (64px, 64px). Вы можете увидеть их здесь: http://jsfiddle.net/L7ksC/2/

Как я могу получить левую и верхнюю разницу между этими делениями? Это может быть просто математическое решение, а не Javascript.

Спасибо.

1 Ответ

1 голос
/ 30 августа 2011

У меня есть решение в a jsfiddle .

Я использовал метод position из jquery, чтобы получить верх и левее.Для некоторых углов поворота левое значение не будет соответствовать верхнему левому углу, но небольшая тригонометрия может это уладить.Пожалуйста, дайте мне знать, если что-то в jsfiddle неясно, я с удовольствием объясню подробнее.

Имейте в виду, что крайняя левая точка прямоугольника не совпадает с левой координатой верхней точкидля поворота на 20 градусов.Чтобы вычислить левую координату, я написал такой код: 

  var scale    = 2;
  var p_height = 128;
  var rotation = 20;

  var add_to_left =scale*p_height*Math.sin(rotation*Math.PI/180);

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

...