Y upward coordinates

Pretty much if not all graphics system (at least that I know of) uses a coordinates system that makes y be positive downward and the origin start at the top left corner of the screen. JavaFX is no exception to this.
This is something that always makes my head hurt. Every time I’m drawing something I have to do the extra step of thinking it upside down. Fortunately for me there is an easy workaround: changing the transforms applied to the topmost node container(parent).

Edit: There are also some situations where you really need to invert the coordinate system for example in my case I’m receiving number data from the calculation engine and need to represent it with the y upward.

To do this you’ll have to first invert the y axis of the coordinate system by doing a scale than translate it by the height of the screen – don’t forget that the order in which you apply the transforms makes a difference, so using the translate and scale parameters instead will produce a different result.


public class MyScene extends Scene{

(...)

var objectsGroup: Group = Group {

transforms: bind [Transform.translate(0, height), Transform.scale(1, -1)] // height is the scene height

}; // "topmost" group

(...)

}

There is a catch though: you’ll have to invert the y of every image and text node you insert by aplying a -1 scale to y of the node.

var text:Text = Text{

(...)

scaleY: -1

(...)

};

I hope this information was usefull in some way. See you on the next post 🙂

Advertisements

One thought on “Y upward coordinates

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s