CrossX

A visual component that renders an X-shaped cross icon.

Creates a cross (×) shape using two rotated quads positioned at 45-degree angles. Commonly used for close buttons, delete actions, or cancel indicators in UI.

The cross automatically scales to fit within the visual's bounds while maintaining proper proportions. Both the line thickness and overall scale can be customized.

Example usage:

var closeButton = new CrossX();
closeButton.size(24, 24);
closeButton.color = Color.RED;
closeButton.thickness = 3;

Instance Members #

The thickness of the cross lines in pixels. Default value is 2. Marked with @content to trigger recomputation when changed.

Scale factor applied to the cross shape within its bounds. Default value is 1 (no scaling). Values < 1 make the cross smaller within its container. Marked with @content to trigger recomputation when changed.

The color of the cross. Applies to both diagonal lines. Default is Color.WHITE.

Computes the content layout of the cross. Positions and sizes the two diagonal quads based on current dimensions, thickness, and internal scale settings.

The quads are sized to 70% of the container width to create proper visual balance and ensure the cross fits nicely within its bounds.

Creates a new CrossX visual component. Initializes with a 16x16 size and white color.

Private Members #

First quad component forming one diagonal line of the cross.

Second quad component forming the other diagonal line of the cross.

Metadata #