ImageView

A view component for displaying and laying out images with flexible scaling options.

ImageView provides automatic image loading from asset IDs and supports multiple scaling modes to fit images within their container. It handles texture management and cleanup automatically.

Features:

• Automatic asset loading from image paths or asset IDs
• Multiple scaling modes (FIT, FILL, CUSTOM)
• Proper texture lifecycle management
• Reactive updates when image or scaling properties change

var imageView = new ImageView();
imageView.size(200, 150);
imageView.image = "hero.png";
imageView.scaling = FIT; // Scale to fit within bounds

// Or use FILL to cover the entire area
imageView.scaling = FILL;

// Or use custom scaling
imageView.scaling = CUSTOM;
imageView.imageScale = 2.0;

Instance Members #

Default is false, automatically set to true when any of this instance's observable variables has changed.

Custom scale factor for the image. Only applied when scaling mode is set to CUSTOM. Default is 1.0 (original size).

Determines how the image is scaled within the view bounds.

• FIT: Scale to fit within bounds while maintaining aspect ratio
• FILL: Scale to fill the entire bounds, cropping if necessary
• CUSTOM: Use the imageScale value Default is FIT.

The image to display, specified as an asset ID or path. Setting this will automatically load the image texture. Set to null to clear the image.

Whether the internal image quad inherits the view's alpha value. When true, the image opacity is multiplied by the view's alpha. Default follows the quad's inheritAlpha setting.

Directly sets the image texture without going through asset loading. Useful when you already have a texture reference. Handles cleanup of previously loaded textures.

Computes the view size based on the image dimensions and constraints. Calculates the appropriate scale factor for FIT mode.

Creates a new ImageView with default settings. The view is transparent by default and contains a centered image quad.

Private Members #

The internal quad used to render the image texture.

The computed scale factor based on FIT scaling mode.

Reference to the currently loaded texture for lifecycle management.

Event when any observable value as changed on this instance.

Event when imageScale field changes.

Event when scaling field changes.

Event when image field changes.

Updates the image quad scale based on the current scaling mode. Called automatically when scaling or imageScale properties change.

Loads and sets the image texture based on the current image property. Handles asset loading, texture management, and cleanup of previous textures.

Positions and sizes the image quad within the view bounds. Handles different scaling modes including cropping for FILL mode.

Metadata #