Computing bounding box using getBoundingClientRect () method with swift top, left
I have a div with an absolute position target
, I need to create another div bb
that matches / overlaps the bounding box perfectly for target
.
The following script works, but with the same rotation as 80 degrees, the div position is bb
not retained.
I'd like to know:
- What am I doing wrong in my code? How to fix it?
- Or maybe getBoundingClientRect () is the problem?
Notes: the starting position of the div bb
matches the div target
, I only need to quickly bb
useCSS translate
http://jsbin.com/josufehano/1/ [Chrome]
The problem could be with the next function, but any other feedback is really appreciated. Thank.
calculate: function () {
var elm = document.getElementById(this.config.target.id);
var rect = elm.getBoundingClientRect();
this.data.br.width = rect.width;
this.data.br.height = rect.height;
// calculate swift
this.data.br.left = -Math.abs(this.data.br.width - this.data.width) / 2;
this.data.br.top = -Math.abs(this.data.br.height - this.data.height) / 2;
},
source to share
I solved the problem using the following script. Basically, I need it to take rotation into account when calculating the top / left swift.
http://jsbin.com/hejemixolu/1/
calculate: function () {
var elm = document.getElementById(this.config.target.id);
var rect = elm.getBoundingClientRect();
this.data.br.width = rect.width;
this.data.br.height = rect.height;
this.data.br.left = rect.left;
this.data.br.top = rect.top;
if (this.data.br.left <= this.data.left) {
this.data.br.left = -Math.abs(this.data.left - this.data.br.left);
} else {
this.data.br.left = Math.abs(this.data.br.left - this.data.left);
}
if (this.data.br.top <= this.data.top) {
this.data.br.top = -Math.abs(this.data.top - this.data.br.top);
} else {
this.data.br.top = Math.abs(this.data.br.top - this.data.top);
}
},
source to share