PixiJS

Class: NineSliceSprite

NineSliceSprite

The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically

      A                          B
    +---+----------------------+---+
  C | 1 |          2           | 3 |
    +---+----------------------+---+
    |   |                      |   |
    | 4 |          5           | 6 |
    |   |                      |   |
    +---+----------------------+---+
  D | 7 |          8           | 9 |
    +---+----------------------+---+
  When changing this objects width and/or height:
     areas 1 3 7 and 9 will remain unscaled.
     areas 2 and 8 will be stretched horizontally
     areas 4 and 6 will be stretched vertically
     area 5 will be stretched both horizontally and vertically

new NineSliceSprite (options)

NineSliceSprite.ts:71
Name Type Description
options NineSliceSpriteOptions | Texture

Options to use
options.texture

The texture to use on the NineSlicePlane.
options.leftWidth

Width of the left vertical bar (A)
options.topHeight

Height of the top horizontal bar (C)
options.rightWidth

Width of the right vertical bar (B)
options.bottomHeight

Height of the bottom horizontal bar (D)
options.width

Width of the NineSlicePlane, setting this will actually modify the vertices and not the UV's of this plane.
options.height

Height of the NineSlicePlane, setting this will actually modify the vertices and not UV's of this plane.

Example

 import { NineSlicePlane, Texture } from 'pixi.js';

 const plane9 = new NineSlicePlane(Texture.from('BoxWithRoundedCorners.png'), 15, 15, 15, 15);

Members

defaultOptions NineSliceSpriteOptions static

The default options, used to override the initial values of any options passed in the constructor.

Properties:
Name Type Default Description
bottomHeight number 10
leftWidth number 10
rightWidth number 10
texture Texture.EMPTY
topHeight number 10

bottomHeight number

The width of the right column (b) of the NineSlicePlane.

height number

The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane.

leftWidth number

The width of the left column (a) of the NineSlicePlane.

rightWidth number

The width of the right column (b) of the NineSlicePlane.

roundPixels

Whether or not to round the x/y position of the nine slice.

texture core

The texture that the NineSlicePlane is using.

topHeight number

The width of the right column (b) of the NineSlicePlane.

width number

The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane.