Jak mogę pobrać właściwości szerokości i wysokości po zastosowaniu transform: rotate(45deg);?szerokość/wysokość po transformacji
Podobnie, 11x11 kwadrat po rotacji staje się 17x17 (wynik Chrome), ale javascript nadal zwraca oryginalną szerokość/wysokość - 10x10.
Jak uzyskać 17x17?
Nawet jeśli coś obrócisz, jego wymiary się nie zmienią, więc potrzebujesz opakowania. Spróbuj owijając swoje div z innego elementu div i liczyć wymiary owijarki:
<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: rozwiązanie owijka nie działa prawidłowo, jak owijka nie jest automatycznie dostosowywana do zawartości wewnętrznej div. Śledź rozwiązanie matematycznego:
var rotationAngle;
var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);
Może w Firefoksie to się nie zmienia, ale Chrome w widoku inspektora pokazuje obliczone wartości. Wrapper to świetne rozwiązanie, ale jest drogie. – jolt
@ Tom firefox zachowuje się tak, jak opisałeś. Przede wszystkim musimy wyjaśnić, że obrócona skrzynia ma wciąż te same wymiary. to jak, jeśli obrócisz kartkę papieru na biurku, jej wymiary pozostaną takie same. to dlatego potrzebujesz opakowania. jeśli nie możesz tego zrobić, potrzebujesz matematyki do obliczenia potrzebnych wymiarów. ta sama matematyka, firefox używa wewnętrznie do obliczania wymiarów wrap. proszę rozważyć moje +1 tutaj. – nonouco
Tak, kiedy to opublikowałeś, już stworzyłem funkcję do obliczania nowych wymiarów. -1 dla CSS3/DOM3/HTML5, ponieważ nie tworzy natywnych funkcji do pobierania tych istotnych wartości. – jolt
W przypadku szukasz funkcję programowo obliczyć te wartości ...
// 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)) };
}
Oto trochę coś znosić. Prawdopodobnie nie jest to najlepsza rzecz, ale wykonuje to za mnie.
Zamiast obliczać to samodzielnie, można to uzyskać za pomocą 's getBoundingClientRect().
Spowoduje to zwrócenie obiektu o poprawnej wartości height i width, z uwzględnieniem macierzy transformacji.
ps nie działa z $, tylko z: querySelector – user956584
@Userpassword Tak, tak działa jQuery. Musisz użyć '[0]' lub 'get (0)' lub podobnego. – alex
Mam tylko to, aby działało poprawnie. Tak, wiem, że pytanie jest stare, ale jeśli pytanie zadano dzisiaj, to chcę, żeby to była zaakceptowana odpowiedź. – bestprogrammerintheworld
Zrobiłem funkcję dla tego, domvertices.js
oblicza on 4 wierzchołki współrzędne 3D dowolnym, głębokie, transform ED, position ed DOM elementu - tak naprawdę każdy element: widzieć 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: }
}
Z tych wierzchołków, można obliczyć coś pomiędzy: szerokości, wysokości ... na przykład w przypadku:
// 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));
Zobacz README informacje o wiecej.
-
Wydawany jest jako moduł commonJS, więc wystarczy zainstalować go z:
npm install domvertices
Cheers.
Twój sir, zasłużyć na medal. http://bl.ocks.org/abernier/97a5fb8c1bebacd1958e – Orwellophile
Cool! Bardzo miłym dodatkiem byłoby "szerokość" i "wysokość" (lub "w, h") dla tych z nas, którzy pamiętają matematykę nie tak dobrze;) Nawet jako "funkcja" byłaby świetna, jeśli chcesz uniknąć kalców, jeśli nie są używane. – Campbeln
@abernier [może jesteś tym, który może odpowiedzieć na moje pytanie (nagroda +100) ??? Każda pomoc jest bardzo apreciated ...] (https://stackoverflow.com/questions/45578101/formular-to-calculate-width-height-relative- to-parent-of-container-with-transl) – Axel
Piszę tę odpowiedź, ponieważ otagowałeś JQuery.
Jquery bierze pod uwagę współczynniki transformacji podczas obliczania wymiarów.
Tak więc, jeśli używasz
$('mySelector').width()
to daje rzeczywistą szerokość. To samo z height(), left() i top()
zastanawiam się dlaczego jesteś coraz 17x17, niby to obrócony o 45 stopni od 11x11, a następnie nowe wymiary powinny wynosić 15x15, 16x16 – jondinham
myślę Chrome automatycznie ceils wynik Cosinus. – jolt