ширина / высота после преобразования - PullRequest
Новая
       8

ширина / высота после преобразования

28 голосов
/ 27 сентября 2011

Как получить свойства ширины и высоты после применения transform: rotate(45deg);?

Например, квадрат 11x11 после поворота становится 17x17 (результат Chrome), но javascript по-прежнему возвращает исходную ширину / высоту - 10x10.

Как мне получить этот 17x17?

Ответы [ 5 ]

61 голосов
/ 21 августа 2013

Вместо того, чтобы вычислять это самостоятельно, вы можете получить это через HTMLDOMElement 's getBoundingClientRect().

Это вернет объект с правильными height и width с учетом матрицы преобразования.

jsFiddle .

20 голосов
/ 27 сентября 2011

Даже если вы вращаете что-то, его размеры не меняются, поэтому вам нужна обертка. Попробуйте обернуть ваш div другим элементом div и сосчитать размеры оберток: 

  <style type="text/css">
  #wrap {
    border:1px solid green;
    float:left;
    }

  #box {
    -moz-transform:rotate(120deg);
    border:1px solid red;
    width:11px;
    height:11px;
  }
  </style>

  <script type="text/javascript">
  $(document).ready(function() {
    alert($('#box').width());
    alert($('#wrap').width());
  });
  </script>
</head>

<body>
 <div id="wrap">
  <div id="box"></div>
  </div>
</body>

Отредактировано: Раствор обертки не работает должным образом, поскольку обертка автоматически не подстраивается под содержимое внутреннего блока. Следуйте математическому решению: 

var rotationAngle;

var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);
9 голосов
/ 11 мая 2015

Я сделал для этого функцию, domvertices.js

Он вычисляет 4 вершины 3d-координаты любой, глубокий, transform ed, position ed элемент DOM - на самом деле просто любой элемент: см. DEMO . 

a                b
 +--------------+
 |              |
 |      el      |
 |              |
 +--------------+
d                c

var v = domvertices(el);
console.log(v);
{
  a: {x: , y: , z: },
  b: {x: , y: , z: },
  c: {x: , y: , z: },
  d: {x: , y: , z: }
}

С этими вершинами вы можете вычислить все что угодно: ширину, высоту ... Например, в вашем случае: 

// norm(a,b)
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));

См. README для получения дополнительной информации.

-

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

npm install domvertices

Приветствие.

3 голосов
/ 27 сентября 2011

Если вам нужна функция для программного расчета этих значений ... 

// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el){
    return $.extend({ width : el.outerWidth(false), height : el.outerHeight(false) }, el.offset());
};

// get rotated dimensions   
var transformedDimensions = function(el, angle){
    var dimensions = getPositionData(el);
    return { width : dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)), height : dimensions.height + Math.ceil(dimensions.height * Math.cos(angle)) };
}

Вот кое-что, что я поднял.Наверное, не самая лучшая вещь, но делает эту работу за меня.

0 голосов
/ 20 июля 2016

Я пишу этот ответ, поскольку вы пометили JQuery.

Jquery принимает во внимание факторы преобразования при расчете размеров.

Итак, если вы используете 

$('mySelector').width()

это даст вам фактическую ширину.То же самое касается height(), left() и top()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...