Hooman Askari

How to move graphics out of a container into the main stage

Recommended Posts

Hi

I am trying to move a Graphic out of its Container and add it into the main stage, but once it's done, the position, angle, and scale of the Graphic are reset back to whatever was the default info of the Graphic before it was added to the Container.

The container is interactive, can be moved, scaled and rotated.

Is there a way to preserve that information, most importantly the angle (or rotation) of the Graphics after they are moved to another container, in this case, the main stage?

Share this post


Link to post
Share on other sites

look for `toLocal `and `toGlobal`.
Before transfer the sprite or graphic from container to your stage, make a toLocal or toGlobal on stage with your graphics and assign new position with result.

This should work i think.

const local = yourStage.toLocal(grafic);             
grafic.position.copy(local);

 

Share this post


Link to post
Share on other sites
2 minutes ago, Hooman Askari said:

The position is the easiest part, which I have already fixed, via caching the moving delta.

Does this `toLocal `and `toGlobal` work for the angle too? What about scale?

yes it should work, if i remember, but i can make mistake, i can't test for now sorry.

Share this post


Link to post
Share on other sites
25 minutes ago, jonforum said:

yes it should work, if i remember, but i can make mistake, i can't test for now sorry.

I did run some tests, and it does not work.

The code above does not yield the correct position, and even if it does, toLocal and toGlobal, return a point, with x and y, which can only be used for positioning. As I mentioned the position is already fixed for me, by saving the move delta and then adding it to the Graphics X and Y once they are moved out of the Container.

My main confusion is about the angle. There does not seem to be a correct way to calculate it, even though the Graphic is already painted on the canvas with the desired angle.

What I am after is behavior like Fabric.js where you can multi-select objects in the canvas (in Fabric.js it puts them inside a container and removes them from it and add them back to the main stage on deselect) but it preserves the angle, scale, and position.

Share this post


Link to post
Share on other sites

Here we are: 

https://www.pixiplayground.com/#/edit/x4NP0Pmt47f2oGIIVEaSw

Container has graphics inside, and I copied it (graphics1 and graphics2) then used method to move graphics2 from container to stage, and it didnt change position.

graphics1 exists only to show that rotation stays the same.

sorry for "_recursiveUpdateTransform" usage, its not obvious, but it makes sure that worldTransform of particular element is up-to-date. just updateTransform() cant do that.

Here's the function:

function moveToContainer(elem, container) {
    elem._recursivePostUpdateTransform();
    container._recursivePostUpdateTransform();
    let mat = elem.worldTransform.clone();
    mat.prepend(container.worldTransform);
    elem.transform.setFromMatrix(mat);

    container.addChild(elem);
}

 

Share this post


Link to post
Share on other sites
16 minutes ago, ivan.popelyshev said:

Here's the function:

It doesn't seem to work for me. It messes up with the position and doesn't get the angle at all, the scale is also wrong.

I am using pixi-viewport and I am trying to understand if it's caused by that or not.

Share this post


Link to post
Share on other sites

Here you go: https://jsfiddle.net/human_a/1snmk829/

In this fiddle, you can do the grouping, rotating, scaling and ungrouping via the buttons on top of the canvas.

Turns out the issue is caused by the pivot point. If I set it to anything other than 0, 0 it's gonna mess up everything.

Try clicking the group, ungroup buttons without rotating or scaling, it is still messing it up every time you press them.

Edit: Also, when using it with pixi-viewport, the zoom, pan of the viewport affects the scale, angle, and position after ungrouping.

Any ideas?

Share this post


Link to post
Share on other sites
setPivotToCenter(container)
container.position.set(250, 250);

well, one thing that you have to be aware is that setFromMatrix cant distinguish between position and pivot. If you use pivots, the decomposition becomes ambigious. I thought about that but didnt tell you i dont know why.

I guess you have to use shapes centered in (0,0) , not drawRect(x, y, ...)

graphics.drawRect(-25, -25, 50, 50);
graphics.position.set(x + 25, y + 25);

 

Share this post


Link to post
Share on other sites
2 minutes ago, ivan.popelyshev said:

I guess you have to use shapes centered in (0,0) , not drawRect(x, y, ...)

That is a good point and it might work, but the problem is (IMHO the biggest problem in Pixijs) that it's going to be inconsistent between different types of graphics. (there has been a big debate about anchors and pivots in pixi for a long time, which is part of this inconsistency). 

For example, circles and ellipses are being drawn like that right now, but what about polygons and polylines, etc.

I also have containers with image sprites inside them, because I need to group them, and the technique would not work for them.

Share this post


Link to post
Share on other sites

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...

  • Recently Browsing   0 members

    No registered users viewing this page.