javascript - call js from html
ancho/alto después de la transformación (5)
¿Cómo recupero las propiedades de ancho y alto después de haber aplicado la transform: rotate(45deg); ?
Al igual que, 11x11 cuadrado después de la rotación se convierte en 17x17 (resultado de Chrome), pero javascript todavía devuelve el ancho / alto original - 10x10.
¿Cómo consigo este 17x17?
En caso de que esté buscando una función para calcular estos valores mediante programación ...
// 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)) };
}
Aquí hay algo que pongo. Probablemente no sea lo mejor, pero hace el trabajo por mí.
En lugar de calcularlo usted mismo, puede obtener esto a través de getBoundingClientRect() .
Esto devolverá un objeto con la height y el width correctos, teniendo en cuenta la matriz de transformación.
jsFiddle .
Estoy escribiendo esta respuesta ya que has etiquetado a JQuery.
Jquery toma en consideración los factores de transformación al calcular las dimensiones.
Así que, si usas
$(''mySelector'').width()
Te dará el ancho real. Lo mismo ocurre con la height() , la left() y la top()
Hice una función para esto, domvertices.js
Calcula las coordenadas 3d de 4 vértices de cualquier elemento DOM profundo, transform , position , realmente cualquier elemento: vea la 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: }
}
Con esos vértices, puedes calcular cualquier cosa entre: ancho, alto ... Por ejemplo, en tu caso:
// 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));
Vea el README para más información.
-
Se publica como un módulo commonJS, así que instálelo con:
npm install domvertices
Aclamaciones.
Incluso si giras algo, las dimensiones no cambian, por lo que necesitas una envoltura. Intente envolver su div con otro elemento div y cuente las dimensiones de las envolturas:
<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>
Rediteado: la solución de la envoltura no funciona correctamente, ya que la envoltura no se ajusta automáticamente al contenido del div interior. Siga la solución matemática:
var rotationAngle;
var x = $(''#box'').width()*Math.cos(rotationAngle) + $(''#box'').height()*Math.sin(rotationAngle);