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

[Hooman Askari]

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?

[jonforum]

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);

 

[Hooman Askari]

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?

[jonforum]

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.

[Hooman Askari]

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.

[ivan.popelyshev]

Yes, this is not an easy task. Btw threejs has special method "attachChild" or something like that.

I can make you a demo later, because you satisfied my requirement "spend a few hours on it first".

[Hooman Askari]

11 minutes ago, ivan.popelyshev said:

Btw threejs has special method "attachChild" or something like that.

Thanks. Btw, the question is for pixijs not threejs, unless you have a different point.

[ivan.popelyshev]

I mean that other renderer has it, so we need something like that in pixi too . Its not the first time this feature was requested.

[ivan.popelyshev]

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);
}

 

[Hooman Askari]

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.

[ivan.popelyshev]

It should work. Please provide the example when it doesn't work.

[Hooman Askari]

5 minutes ago, ivan.popelyshev said:

Please provide the example when it doesn't work.

I'll try to replicate and share it here. I am experimenting with it now to find out the reason why it's not working.

[Hooman Askari]

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?

[ivan.popelyshev]

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);

 

[Hooman Askari]

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.