Find center of child when parent scale/position changes

[lTyl]

Heya. I am using PixiJS to build a visualizing tool as part of a larger application. Currently, I am building a minimap component which draws linked ancestors from a selected chain in the main web application. Each link is drawn from the center of one shape to the center of another.

The minimap has panning and zooming. When the minimap is updated, and new links are drawn, the lines linking two shapes are not drawn to the center of those shapes. This draw bug only happens if the main draw layer scale and position was changed from a pan or zoom action. Panning works by changing the X and Y position of the relevant Pixi Container on drag. Zooming works by changing the scale property for X and Y.

Obviously, my center point calculation is failing to factor in the position/scale of the container. I am calculating the center via:

var center = {
    x: shape.x + (shape.width / 2),
    y: shape.y + (shape.height / 2)
};

Thus, how can I get the center point of a Container (shape) to always represent the center point of that container, regardless of how I manipulate the scale and positioning of the parent? This will be the world coordinate representing the center point of a container. Is there an easy way of getting that point?

[Taz]

Here's a way that to find the center that factors in the position and scale of the parent by applying the parent's transform:

var bounds = shape.getBounds();
var center = new PIXI.Point(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
console.log(center.x + ", " + center.y);

 

You can also get the shape's position from applying the parent transform like this (but I think you would still have to manually scale width & height to calculate shape's center point):

var position = shape.parent.toGlobal(shape.position);