NineSlicePlane

Creates a PIXI.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
  x={200}
  y={200}
  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}
/>

Component API

Props

Name Type Default 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.Shader PIXI.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
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