Transforms and Anchors

Transforms

Every display object has properties that affect where and how it is rendered on screen.

Order of Operations

Corona calculates a transform matrix for a display object by applying the properties in a specific order.

  1. Scale
  2. Rotation
  3. Translation

Transforms are always relative to the parent, so the final transform includes the transforms of the object's parents (and ancestors). See Transforms in the Groups Guide.

Origin and Position

The origin is the position of a display object. It is controlled by the object.x and object.y properties. This is the point about which rotation and scale are applied.

Anchors

The anchors of an object control how geometry is positioned relative to the object's origin. These are specified via the object.anchorX and object.anchorY properties.

Anchors range from 0.0 to 1.0. When you change an anchor value, the object's origin does not change. Instead the geometry moves relative to the origin.

By default, the anchor is set to (0.5, 0.5) which centers the geometry about the origin. An anchor pair of (0,0) makes the top-left of the geometry's bounds the origin, while an anchor pair of (1,1) makes it the bottom-right of the geometry's bounds.

You can change the default via display.setDefault().

The following diagram illustrates how changing the anchor affects objects. The dotted square is rotated to illustrate how geometry is rotated about the origin depending on the anchor.

Groups

By default, objects like shapes have anchors. Groups however do not honor anchors by default. You must use set the anchorChildren property. See Aligning Children in the Groups Guide.