component-Rescaler
Rescaler
type Rescaler = {
id?: string;
child: Component;
mode?: "fit" | "fill";
horizontal_align?: "left" | "right" | "justified" | "center";
vertical_align?: "top" | "center" | "bottom" | "justified";
width?: f32;
height?: f32;
top?: f32;
left?: f32;
bottom?: f32;
right?: f32;
rotation?: f32;
transition?: Transition;
}
Properties
id
- Id of a component.child
- List of component's children.mode
- (default="fit"
) Resize mode:"fit"
- Resize the component proportionally, so one of the dimensions is the same as its parent, but it still fits inside it."fill"
- Resize the component proportionally, so one of the dimensions is the same as its parent and the entire area of the parent is covered. Parts of a child that do not fit inside the parent are not rendered.
horizontal_align
- (default="center"
) Horizontal alignment.vertical_align
- (default="center"
) Vertical alignment.width
- Width of a component in pixels. Exact behavior might be different based on the parent component:- If the parent component is a layout, check sections "Absolute positioning" and "Static positioning" of that component.
- If the parent component is not a layout, then this field is required.
height
- Height of a component in pixels. Exact behavior might be different based on the parent component:- If the parent component is a layout, check sections "Absolute positioning" and "Static positioning" of that component.
- If the parent component is not a layout, then this field is required.
top
- Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent.left
- Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent.bottom
- Distance in pixels between this component's bottom edge and its parent's bottom edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent.right
- Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent.rotation
- Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent.transition
- Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained aRescaler
component with the same id.
Transition
type Transition = {
duration_ms: f64;
easing_function?: EasingFunction;
}
Properties
duration_ms
- Duration of a transition in milliseconds.easing_function
- (default="linear"
) Easing function to be used for the transition.
EasingFunction
type EasingFunction =
| { function_name: "linear"; }
| { function_name: "bounce"; }
| {
function_name: "cubic_bezier";
points: [f64, f64, f64, f64];
}
Easing functions are used to interpolate between two values over time.
Custom easing functions can be implemented with cubic Bézier.
The control points are defined with points
field by providing four numerical values: x1
, y1
, x2
and y2
. The x1
and x2
values have to be in the range [0; 1]
. The cubic Bézier result is clamped to the range [0; 1]
.
You can find example control point configurations here.