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

Usage

<script>
  import * as PIXI from 'pixi.js'
  import { NineSlicePlane, onTick } from 'svelte-pixi'

  let width = 100
  let height = 100
  let counter = 0

  onTick((delta) => {
    counter += delta * 0.04

    width = 100 + Math.cos(counter) * 20
    height = 100 + Math.sin(counter) * 20
  })
</script>

<NineSlicePlane
  texture={PIXI.Texture.from('/assets/nine-slice-blue.png')}
  leftWidth={12}
  topHeight={12}
  rightWidth={12}
  bottomHeight={12}
  {width}
  {height}
  pivot={{ x: width / 2, y: height / 2 }}
  scale={2}
/>

API

Props

Name	Description
bottomHeight	number The height of the bottom row.
drawMode	PIXI.DRAW_MODES The way the Mesh should be drawn, can be any of the PIXI.DRAW_MODES constants.
geometry	PIXI.Geometry Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU. Can be shared between multiple Mesh objects.
instance	PIXI.NineSlicePlane The PIXI.NineSlicePlane instance. Can be set or bound to.
leftWidth	number The width of the left column.
rightWidth	number The width of the right column.
shader	PIXI.ShaderPIXI.MeshMaterial Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. Can be shared between multiple Mesh objects.
state	PIXI.State Represents the WebGL state the Mesh required to render, excludes shader and geometry. E.g., blend mode, culling, depth testing, direction of rendering triangles, backface, etc.
texture	PIXI.Texture The texture to use on the NineSlicePlane.
topHeight	number The height of the top row.

Additional props are passed on to Container

Slots

Name	Props	Fallback
default	{}

Events

Name	Type	Detail
added	forwarded
click	forwarded
create	forwarded
globalmousemove	forwarded
globalpointermove	forwarded
globaltouchmove	forwarded
mousedown	forwarded
mousemove	forwarded
mouseout	forwarded
mouseover	forwarded
mouseup	forwarded
mouseupoutside	forwarded
pointercancel	forwarded
pointerdown	forwarded
pointermove	forwarded
pointerout	forwarded
pointerover	forwarded
pointertap	forwarded
pointerup	forwarded
pointerupoutside	forwarded
removed	forwarded
removedFrom	forwarded
rightclick	forwarded
rightdown	forwarded
rightup	forwarded
rightupoutside	forwarded
tap	forwarded
touchcancel	forwarded
touchend	forwarded
touchendoutside	forwarded
touchmove	forwarded
touchstart	forwarded