Find center of child when parent scale/position changes

Recommended Posts

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?

Share this post

Link to post
Share on other sites

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


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.