Jump to content

Scaling rectangle from center and transform Origin


Sahil
 Share

Recommended Posts

Hi,

I was just getting started with PIXI js and had couple of questions regarding transform origin. Both questions are related to transform origin and positioning so I thought I will ask them in same question.

 

In first example I want to scale rectangle from center but when I scale it it scales from top left corner. As I was writing this question I realized that the graphics object is getting scaled and it makes sense that rectangle gets scaled to top left corner. In demo I have code commented out where my approach is to transform graphics object to center so scaling will be from the center. Is there another approach to scale shapes from center?

Basically I want to animate multiple rectangles and I would rather create single graphics object to scale all rectangles from their center instead of using one graphics object per rectangle. (that is if my commented approach is correct);

https://codepen.io/Sahil89/pen/rvjwwP?editors=0010

 

In second example, I wanted to give my text object a fixed position and translate it using mouse coordinates. But it seems like there isn't a way to give a fixed position to sprites and translate them from that position. So lets say I have multiple sprites I have to do additional calculation to translate them relative to their original position.

https://codepen.io/Sahil89/pen/QrdgBx?editors=0010

If I had to do it using 2d Canvas I would have created my object with left and top property as following example,

https://codepen.io/Sahil89/pen/OZWjPZ?editors=1010

can I do something similar with PIXI sprites?

Link to comment
Share on other sites

You have to study the way pixi transforms work. Each container has Position, Scale, Rotation, Pivot.

Container transform affects its children. Position+pivot combo allows to "pin" world coords (position) to local (pivot) in a certain point. Pixi does not have origin point, to emulate it you can add certain value both to position and pivot.

I would like to explain more, but its better if you just search through the forum and pixijs issues https://github.com/pixijs/pixi.js/issues , and I accumulate saved time to make an article to help people.

Basically I want to animate multiple rectangles and I would rather create single graphics object to scale all rectangles from their center instead of using one graphics object per rectangle. (that is if my commented approach is correct)

Use graphics "position", "scale" and "pivot" fields. Experiment. Make friends with them. You cannot scale individual rectangle because its a shape inside graphics and not a child of pixi stage tree.

Your goal also can be achieved with Container and multiple Sprites with PIXI.Texture.WHITE and colored tint inside.

Link to comment
Share on other sites

Pivot works like the registration/reference point in graphic editing software. Both of these boxes are positioned at 0, 0. The second box will transform around its center.

VtDADKA.jpg

 

 

 @ivan.popelyshev Is there any word on Chad's proposal for adding an origin property to transforms in v5?

https://github.com/pixijs/pixi.js/issues/4138

https://github.com/pixijs/pixi.js/issues/997

If there was an option to do a smooth origin like GreenSock does with SVG, that would be icing on the cake. ?

https://codepen.io/GreenSock/pen/PqbWmZ

 

 

Link to comment
Share on other sites

@OSUblake 

I think its a good time to do that, add one extra object inside Transform, we may do it for V5.

Currently there's other talk about Transforms, im trying to add degrees as an option instead of radians.

Also, I published this thing 2 days ago: http://pixijs.io/examples/#/projection/runner.js , it has extra props: position3d, euler, scale3d, pivot3d.

Smooth origin requires a place where we accumulate offset, do you have an idea where to store it?

 

Link to comment
Share on other sites

Love the demo! And degrees would be nice. I don't think a lot of people are going to care if the value is stored in degrees as long as there is a way to get and set it in radians.

 

GreenSock stores the value in an offset property. You can see the some of the transform values here.

https://codepen.io/osublake/pen/BxWayz

The origin is stored in global coordinates, allowing you to switch between a local and global origin.

https://codepen.io/GreenSock/pen/waKrNj

 

Link to comment
Share on other sites

  • 2 years later...
On 4/30/2018 at 2:50 PM, OSUblake said:

Pivot works like the registration/reference point in graphic editing software. Both of these boxes are positioned at 0, 0. The second box will transform around its center.

VtDADKA.jpg

 

 

 @ivan.popelyshev Is there any word on Chad's proposal for adding an origin property to transforms in v5?

https://github.com/pixijs/pixi.js/issues/4138

https://github.com/pixijs/pixi.js/issues/997

If there was an option to do a smooth origin like GreenSock does with SVG, that would be icing on the cake. ?

https://codepen.io/GreenSock/pen/PqbWmZ

 

 

Hi, had you impliment this with pixi?
i want to add this transform points to sprite.

 

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...