Jump to content

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?

Link to comment
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);


Link to comment
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.

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.


  • Recently Browsing   0 members

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