Skip to main content

NinePatchImage

Displays an image or sprite with stretchable and scalable regions.

component NinePatchImage

NinePatchImage Example

The regions 1, 3, 7 and 9 are scaled according to their aspect ratio. Regions 2 and 8 are stretched horizontally. Regions 4 and 6 are stretched vertically. Region 5 is stretched in both dimensions.

import { NinePatchImage } from ui

export var main = NinePatchImage(
    "my_nine_patch.png",
    fixed_left: 4,
    fixed_right: 4,
    fixed_top: 4,
    fixed_bottom: 4,
)

Supported File Formats​

  • PNG
  • JPEG
  • WEBP
  • SVG
  • TIFF

Constructor​

_ path: String​

An image file path relative to the main file.

frame: Int = 0​

Selects which frame in a sprite is displayed.

frame_count: Int = 1​

The number of frames, if the image is a sprite.

fixed_left: Float = 0​

The width of the fixed left border (Width of regions 1, 4 & 7)

fixed_right: Float = 0​

The width of the fixed right border (Width of regions 3, 6 & 9)

fixed_top: Float = 0​

The height of the fixed top border (Height of regions 1, 2 & 3)

fixed_bottom: Float = 0​

The height of the fixed bottom border (Height of regions 7, 8 & 9)

Layout Behavior​

Always stretches into the available area.