Anchor point of x,y in JavaFX nodes

Question

Some sprite applications (namely pulpcore) allows you to define an anchor point for an object.

For example if the anchor point of a rectangle is 0,0 and it's coordinates are x:0,y:0 the top left point of the rectangle would be displayed on the top left point of the screen.

If however the anchor point of the rectangle is 50,50 and it's size is 100x100, the middle of the rectangle would be placed at 0,0 and only it's bottom-right part would be displayed.

Is there a similar property in JavaFX? Is there an easy way to implement this (can you bind the x and the y coordinates of a JavaFX node to its own height and width?)?

When I bind the x,y coordinates to boundsInLocal/Parent.width I get a runtime exception.

Answer 1

The origin for a Rectangle is upper left as you say. You have 2 options for positioning the node. You can use either layoutX and layoutY. var rect = Rectangle { layoutX: 50 layoutY: 50 widht: 100 height: 100 }

or translateX and translateY

var rect = Rectangle { translateX: 50 translateY: 50 widht: 100 height: 100 } The main purpose of using both layoutX/Y and translateX/Y, is that translateX/Y is intended to be changeable whereas layoutX/Y is meant for initial positioning. For example, you can change translateX/Y in an animation while the original position is remembered in layoutX/Y. The ultimate location will always be layoutX+ translateX and layoutY + translateY.

To shift the origin to the center point (50,50) use a negative translate. var rect = Rectangle { translateX: -50 translateY: -50 widht: 100 height: 100 }

Some shapes are not based on upper left origin. For example, Circle uses centerX and centerY.