Làm cách nào để truy xuất thuộc tính chiều rộng và chiều cao sau khi đã áp dụng transform: rotate(45deg);?chiều rộng/chiều cao sau khi chuyển đổi
Giống như, hình vuông 11x11 sau khi xoay thành 17x17 (kết quả của Chrome), nhưng javascript vẫn trả lại chiều rộng/chiều cao ban đầu - 10x10.
Làm cách nào để nhận được 17x17 này?
Thậm chí nếu bạn xoay thứ gì đó thì kích thước của nó không thay đổi, vì vậy bạn cần một trình bao bọc. Hãy thử gói div của bạn với một phần tử div và đếm kích thước giấy gói:
<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: giải pháp wrapper không hoạt động đúng, như bao bọc không được tự động điều chỉnh các nội dung của div bên trong. Thực hiện theo các giải pháp toán học:
var rotationAngle;
var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);
Có thể trong Firefox nó không thay đổi, nhưng Chrome trong chế độ xem thanh tra hiển thị các giá trị được tính toán. Wrapper là một giải pháp tuyệt vời, nhưng nó đắt tiền. – jolt
@ Fire firefox hoạt động giống như bạn đã mô tả. trước hết, chúng ta cần phải rõ ràng rằng một hộp xoay vẫn có cùng kích thước. giống như, nếu bạn xoay một mảnh giấy trên bàn làm việc, kích thước của nó vẫn giữ nguyên. thats lý do tại sao bạn cần wrapper. nếu bạn không thể khăng khăng nó, bạn cần toán học để tính toán kích thước bạn cần. cùng một toán học, firefox sử dụng nội bộ để tính toán kích thước của gói. hãy xem xét +1 của tôi ở đây. – nonouco
Vâng, trong khi bạn đăng nội dung này, tôi đã thực hiện một chức năng để tính toán các thứ nguyên mới. -1 cho CSS3/DOM3/HTML5 để không tạo các hàm gốc để lấy các giá trị thiết yếu này. – jolt
Trong trường hợp bạn đang tìm kiếm một chức năng để lập trình tính toán các giá trị ...
// 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)) };
}
Dưới đây là một chút gì đó tôi đưa lên. Có lẽ không phải là điều tốt nhất từ trước đến giờ, nhưng tôi có làm việc đó cho tôi.
Thay vì tự tính toán, bạn có thể thực hiện việc này qua số getBoundingClientRect() của HTMLDOMElement.
Điều này sẽ trả về một đối tượng với đúng height và width, có tính đến ma trận chuyển đổi.
ps không hoạt động với $, chỉ với: querySelector – user956584
@Userpassword Có, đó là cách jQuery hoạt động. Bạn cần sử dụng '[0]' hoặc 'get (0)' hoặc tương tự. – alex
Tôi chỉ có điều này để hoạt động chính xác. Có, tôi biết câu hỏi là cũ, nhưng nếu câu hỏi đã được yêu cầu hôm nay tôi tin rằng đây sẽ là câu trả lời được chấp nhận. – bestprogrammerintheworld
tôi đã thực hiện một chức năng cho điều này, domvertices.js
Nó tính toán 4 đỉnh tọa độ 3d của bất kỳ, vùng sâu, transform ed, position ed DOM yếu tố - thực sự chỉ là bất kỳ yếu tố: xem 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: }
}
Với những đỉnh, bạn có thể tính toán bất cứ điều gì trong số: chiều rộng, chiều cao ... Ví dụ, trong trường hợp của bạn:
// 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));
Xem README để biết thêm infos.
-
Nó được công bố như một module commonJS, vì vậy chỉ cần cài đặt nó với:
npm install domvertices
Cheers.
Thưa ông, xứng đáng là một huy chương. http://bl.ocks.org/abernier/97a5fb8c1bebacd1958e – Orwellophile
Tuyệt vời! Một add rất đẹp sẽ là 'width' và' height' (hoặc 'w, h') cho những ai nhớ toán học không tốt;) Ngay cả khi' function 'sẽ là tuyệt vời nếu bạn muốn tránh các calcs nếu chúng không được sử dụng. – Campbeln
@abernier [có thể bạn là người có thể trả lời câu hỏi của tôi (bounty +100) ??? Bất kỳ sự trợ giúp nào cũng rất được đề xuất ...] (https://stackoverflow.com/questions/45578101/formular-to-calculate-width-height-relative-to-parent-of-container-with-transl) – Axel
Tôi đang viết câu trả lời này vì bạn đã gắn thẻ JQuery.
Jquery xem xét các yếu tố biến đổi khi tính toán thứ nguyên.
Vì vậy, nếu bạn sử dụng
$('mySelector').width()
nó sẽ cung cấp cho bạn độ rộng thực tế. Cùng đi với height(), left() và top()
tôi tự hỏi tại sao bạn đang nhận 17x17, coi nó xoay 45 độ từ 11x11, sau đó kích thước mới nên 15x15 hoặc 16x16 – jondinham
Tôi nghĩ rằng Chrome tự động ceils kết quả cosinus. – jolt