Get rotated position of element

[swampthang 112 Likes (Specialist)]

The pen shows a typical way of getting the x/y coordinates for a rotated element. I can use this, but wondering if there might be some hidden gem in GSAP that calculates these points already or, if there might be a faster way to get these values...

See the Pen QrBMqm by swampthang (@swampthang) on CodePen

[OSUblake 9,990 Likes (Superhero)]

It's pretty easy if you can get the matrix. SVG provides the easiest way to get a matrix. 

 

a = topLeft;

b = topRight;

c = bottomRight;

d = bottomLeft;

 

var r = element.getBBox(); 
var p = svg.createSVGPoint(); 
      
var matrix = svg.getScreenCTM().inverse().multiply(element.getScreenCTM()); 

p.x = r.x;
p.y = r.y;
var a = p.matrixTransform(matrix);

p.x = r.x + r.width;
p.y = r.y;
var b = p.matrixTransform(matrix);

p.x = r.x + r.width;
p.y = r.y + r.height;
var c = p.matrixTransform(matrix);

p.x = r.x;
p.y = r.y + r.height;
var d = p.matrixTransform(matrix);

 

 

A demo where I use that to match up the positions of different SVG elements.

 

See the Pen ZxVmyx by osublake (@osublake) on CodePen

 

 

[swampthang 112 Likes (Specialist)]

Awesome, Blake. Is there a way to get that to work for elements inside a foreignObject?

[OSUblake 9,990 Likes (Superhero)]

40 minutes ago, swampthang said:

Awesome, Blake. Is there a way to get that to work for elements inside a foreignObject?

 

Hmmm... I dunno. Are you still doing electron based apps?

 

What I did above will probably only work for regular SVG elements. However, a new feature is the DOMMatrix, which looks like it was added to Chrome 61. I haven't tried it yet, but that should work for any type of any element. *In theory*

https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix

 

But if you can get a 2d matrix...

matrix(a,b,c,d,e,f);

 

Then you should be able to get a transformed corner like this. You of course would need to do that for every corner.

var x = matrix.a * corner.x + matrix.c * corner.y + matrix.e;
var y = matrix.b * corner.x + matrix.d * corner.y + matrix.f;

 

 

 

[OSUblake 9,990 Likes (Superhero)]

Interesting. Just saw that there's a DOMPoint, and it will work with a DOMMatrix almost exactly like my SVG example. I guess it doesn't matter if it's a 2d or 3d matrix since it will do the math for you.

https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix/DOMMatrix

 

 

[OSUblake 9,990 Likes (Superhero)]

MDN says it's non-standard, but it's just in draft.

https://drafts.fxtf.org/geometry/

 

[swampthang 112 Likes (Specialist)]

8 hours ago, OSUblake said:

Are you still doing electron based apps?

 

Yes. That's what this is gonna be used in. DOMMatrix with DOMPoint looks promising if it will work in the version of Chromium in the version of Electron I'm using for this app. Thanks!

[OSUblake 9,990 Likes (Superhero)]

I can't find a way to get a DOMMatrix from an element. Webkit had this, but I don't see an equivalent of that in Chrome.

https://developer.apple.com/documentation/webkitjs/webkitcssmatrix

 

[swampthang 112 Likes (Specialist)]

Thanks, Blake. I know this is really ugly but I quickly put together something that will give me the data I need, ie, crop-points, pad-points, render-size, etc.

 

See the Pen ZoMQEr?editors=1010 by swampthang (@swampthang) on CodePen

 

For what it's worth, the reason I need all this is because of the way complex filters work in FFMPEG. Order is critical. A complex filter applies each filter and then "sends the results" to the next filter in the chain. So, for example, if a PNG sequence, represented by the green box in the pen, gets rotated, dragged to a new position and resized (in my Electron app) in order to render the sequence to an MOV file, I have to first scale it, then rotate it, then crop it to fit the stage and then add padding where appropriate. Using GSAP to allow manipulation of all these parameters is really an awesome thing. I love this library the more I use it!

Edited May 15, 2018 by swampthang
Added explanation

[OSUblake 9,990 Likes (Superhero)]

That works! 

 

The nice thing about using a matrix to get the coordinates is that it will handle other transforms like scale. Maybe @GreenSock will consider adding transform methods like that to the CSSPlugin. 

[GreenSock 8,117 Likes (Superhero)]

1 hour ago, OSUblake said:

Maybe @GreenSock will consider adding transform methods like that to the CSSPlugin

 

Are you talking about getCorners(), getPoint(), etc.? I couldn't quite tell if you were joking or if you thought there was a good place in CSSPlugin for some new features related to transforms. Open to suggestions - I just always have to be careful about file size and how many people might actually use such features (cost/benefit ratio). 

[OSUblake 9,990 Likes (Superhero)]

Sometimes I need the matrix, but I hate splitting up a string, so I was thinking it might be helpful if there was a way to get the matrix values from GSAP. And if there was a way to transform a point from that matrix, even better.

 

Didn't you have something like that in the CSSTransform tool?

 

[GreenSock 8,117 Likes (Superhero)]

58 minutes ago, OSUblake said:

Sometimes I need the matrix, but I hate splitting up a string, so I was thinking it might be helpful if there was a way to get the matrix values from GSAP. And if there was a way to transform a point from that matrix, even better.

 

Didn't you have something like that in the CSSTransform tool?

 

 

Sshhh. There is no "CSSTransform" tool (officially)

 

It's not something that many people showed interest in, and it's a very tricky thing that could turn into a bit of a nightmare to support so it was never released. If it becomes a popular request, I'll definitely consider re-investing time into that eventually.

[swampthang 112 Likes (Specialist)]

The main thing I need is a quick, reliable way to get the x/y values for each corner of a rotated element's bounding box. 

[swampthang 112 Likes (Specialist)]

7 hours ago, OSUblake said:

 

The nice thing about using a matrix to get the coordinates is that it will handle other transforms like scale

 

I forked and am trying to factor in scaling the box in another codepen. Now I see what you're talking about, Blake. Not a simple task.

[swampthang 112 Likes (Specialist)]

Can do it by just resetting the width and height first. Ok, I know that's cheating but it'll do for now. I added a scale field to the settings. Changing any field value will reset everything...

 

See the Pen ELeLzB?editors=1010 by swampthang (@swampthang) on CodePen

 

[OSUblake 9,990 Likes (Superhero)]

Here's your matrix. Then just transform the points like I showed above.

 

const cos = Math.cos(rotation);
const sin = Math.sin(rotation);
  
matrix.a = cos * scaleX;
matrix.b = sin * scaleX;
matrix.c = -sin * scaleY;
matrix.d = cos * scaleY;
matrix.e = x - matrix.a + matrix.c;
matrix.f = y - matrix.b + matrix.d;

 

 

See the Pen QrVxee by osublake (@osublake) on CodePen

 

[OSUblake 9,990 Likes (Superhero)]

4 hours ago, GreenSock said:

 

Sshhh. There is no "CSSTransform" tool (officially)

 

It's not something that many people showed interest in, and it's a very tricky thing that could turn into a bit of a nightmare to support so it was never released. If it becomes a popular request, I'll definitely consider re-investing time into that eventually.

 

 

I can appreciate the difficulty and the amount of support it would involve, but it still has a lot of neat features. The spinning dot wheel demo you made with that tool is really cool. You should make that into a coding challenge. I'd like to see how many people could actually do that.

[swampthang 112 Likes (Specialist)]

1 hour ago, OSUblake said:

Here's your matrix.

 

Awesome, Blake! Much simpler than my convoluted approach. Of course, it helps to fully understand the matrix. That gets me well on the road to a much more respectable solution. Thanks again!

 

[OSUblake 9,990 Likes (Superhero)]

Understanding how matrices work probably isn't too important. I would focus on how and when to use them. 

 

Using an SVG Matrix. The trick is doing stuff in the correct order.

 

matrix = svg.createSVGMatrix()
  .translate(X, Y)
  .rotate(R)
  .scaleNonUniform(SX, SY);

 

 

See the Pen pVOQJv by osublake (@osublake) on CodePen