变换后的宽度/高度

Question

变换后的宽度/高度

jol*_*olt 28 html javascript css jquery css3

我申请后如何检索宽度和高度属性transform: rotate(45deg);？

比如,旋转后11x11平方变为17x17(Chrome结果),但javascript仍然返回原始宽度/高度 - 10x10.

我怎么得到这个17x17？

Answer 1

ale*_*lex 61

相反,你自己计算吧,你可以通过得到这个HTMLDOMElement的getBoundingClientRect().

这将返回一个正确的对象,height并width考虑转换矩阵.

jsFiddle.

@Userpassword是的,这就是jQuery的工作原理.你需要使用`[0]`或`get(0)`或类似的东西. (2认同)
我只有这个才能正常工作。是的，我知道这个问题很旧，但是如果今天提出这个问题，我相信这应该是公认的答案。 (2认同)
与其他所有人达成协议。与其他过度设计/复杂的解决方案相比，这应该是可接受的答案。 (2认同)

Answer 2

non*_*uco 20

即使你旋转某些东西,它的尺寸也不会改变,所以你需要一个包装器.尝试使用另一个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>

Run Code Online (Sandbox Code Playgroud)

Redited:包装器解决方案无法正常工作,因为包装器不会自动调整为内部div的内容.遵循数学解决方案:

var rotationAngle;

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

Run Code Online (Sandbox Code Playgroud)

在击中这个时,我终于想通了javascript中的cos/sin取径向!不是学位!我希望我通过这个评论节省了一点时间;) (4认同)

Answer 3

abe*_*ier 9

我为此做了一个功能, domvertices.js

它计算任何,深,transformed,positioned DOM元素的4个顶点3d坐标- 实际上只是任何元素:参见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: }
}

Run Code Online (Sandbox Code Playgroud)

使用这些顶点,您可以计算以下任何内容:宽度,高度......例如,在您的情况下:

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

Run Code Online (Sandbox Code Playgroud)

有关更多信息,请参阅自述文件.

-

它作为npm模块发布(没有dep),所以只需安装它:

npm install domvertices

Run Code Online (Sandbox Code Playgroud)

干杯.

凉!对于我们这些记得数学不太好的人来说,一个非常好的补充是`width`和`height`(或`w,h`);)即使你想要避免计算结果,`函数`也会很好他们没有被使用. (2认同)

归档时间：	14 年，9 月前
查看次数：	36532 次
最近记录：	7 年，5 月前