How to overlap the center of two divs when it has been resized and rotated?
I need to find a "formula" that allows the center of two to overlap divs
when one is resized and rotated .
Please refer to this example and press in the following order: button 1,2 and 3
.
http://jsbin.com/horiracudi/1/edit
You will see that there div a1
was re-sized
and rotated
.
When you press button 4
,
- I need to adjust
div a1
x,y position
so that its center is exactly located at the top of the center fordiv a0
.
This should work with:
- Any rotation
- Size / height of any size
div a1
Maybe I need to save transform-origin: 50% 50%;
Any idea how to fix this problem?
Compensation can be added to the function.
btn4.addEventListener('click', function (event) {
this.data.left -= this.data.width / 2; // compensation should be here
this.data.top -= this.data.height / 2;
this.render('a1');
}.bind(this));
source to share
I went through your code and found that you are changing the default data property ( window.app.data
) every time you click on your buttons. So when button 4 is clicked we only have the a1
div data , whereas we need both the data a1
and the a0
div to calculate the position in your case.
I think this is wrong. We have to keep each property of the element separately and only update its data so that you can keep track of the value data
for a0
and a1
div when button 4 is clicked.
Another problem is the formula for calculating the a1
div position . It should be:
this.data['a1'].left = this.data['a0'].left + (this.data['a0'].width - this.data['a1'].width) / 2;
this.data['a1'].top = this.data['a0'].top + (this.data['a0'].height - this.data['a1'].height) / 2;
I have updated your code at: http://jsbin.com/gowegivuce/4/edit
source to share
try this, you will change the width and height of the width with 2 *, so now the changed left and right will be split by 4.
btn4.addEventListener('click', function (event) {
this.data.left -= this.data.width / 4;
this.data.top -= this.data.height / 4;
this.render('a1');
}.bind(this));
source to share