width/height after transform_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-08 20:45 出处：网络

How do I retrieve the width and height properties after I\'ve applied transform: rotate(45deg);? Like, 11x11 square after rotation becomes 17x17 (Chrome result)开发者_Python百科, but javascript still

How do I retrieve the width and height properties after I've applied transform: rotate(45deg);?

Like, 11x11 square after rotation becomes 17x17 (Chrome result)开发者_Python百科, but javascript still returns original width/height - 10x10.

How do I get this 17x17?

Instead of calculating it yourself, you can get this via the HTMLDOMElement's getBoundingClientRect().

This will return an object with the correct height and width, taking into account the transformation matrix.

jsFiddle.

Even if you rotate something the dimensions of it do not change, so you need a wrapper. Try wrapping your div with another div element and count the wrappers dimensions:

  <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>

Redited: the wrapper solution is not working properly, as the wrapper is not automatically adjusted to the contents of the inner div. Follow the mathematical solution:

var rotationAngle;

var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);

I made a function for this, domvertices.js

It computes the 4 vertices 3d coordinates of any, deep, transformed, positioned DOM element -- really just any element: see the 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: }
}

With those vertices, you can compute anything among: width, height... Eg, in your case:

// 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));

See the README for more infos.

It is published as a npm module (with no dep), so just install it with:

npm install domvertices

Cheers.

In case you're looking for a function to programmatically calculate these values...

// 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)) };
}

Here's a little something I put up. Probably not the best thing ever, but does the job for me.