The following properties affect the position of an element.
| Name | Type | Default | Description |
|---|---|---|---|
x | Float | 0 | x-position |
y | Float | 0 | y-position |
w | Float | 0 | Width |
h | Float | 0 | Height |
mount | Float | 0 | Texture mountpoint: 0 = top-left, 0.5 = center, 1 = bottom-right |
mountX | Float | 0 | Texture mountpoint (horizontal axis) |
mountY | Float | 0 | Texture mountpoint (vertical axis) |
Coordinates
The position of an element can be defined by using the x and y properties. Elements are positioned relative to their parent (like position: absolute in CSS). Lightning also allows more advanced forms of layouting using Flexbox.
Dimensions
By using the w and h properties one can define the dimensions of an element. When a texture is attached to an element, and no w or h has been set, the element will inherit the dimensions from the active texture.
Mount
The mountX and mountY property can be used to specify the alignment of the element relative to the x and y properties. By default they are 0, which means that the top-left corner of the element is positioned at the xy coordinates. When set to 0.5, the xy coordinates will define the positioning of the center of the element. When they are set to 1, the bottom-right corner of the element will be placed on xy.
Dynamic calculations
You can use a numeric value (in pixels), but it is also possible to specify a function that returns the value based on the parent's width (x, w) or height (y, w). These functions will only be called again if the parent's dimensions (might) change.
class LiveDemo extends lng.Application {
static _template() {
return {
Header: {
rect: true, w: window.innerWidth, h: 50, color: 0xff005500,
Title: {
x: (w => w - 50), mountX: 1, mountY: 0.5, y: 30,
text: { text: 'Header' },
OverlayGradient: {
w: (w => 0.25 * w),
rect: true,
colorLeft: 0xFF000000,
colorRight: 0x00000000
}
}
}
}
};
}
const app = new LiveDemo({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());