Text

Creates a PIXI.Text

Renders a line or multiple lines of text to the canvas.

The primary advantage of this class over BitmapText is that you have great control over the style of the text, which you can change at runtime.

The primary disadvantages is that each piece of text has it’s own texture, which can use more memory. When text changes, this texture has to be re-generated and re-uploaded to the GPU, taking up time.

To split a line you can use ‘\n’ in your text string, or, on the style prop, change its wordWrap property to true and and give the wordWrapWidth property a value.

Usage

<script>
  import { Text } from 'svelte-pixi'
</script>

<Text
  text="Hello World"
  anchor={0.5}
  x={200}
  y={200}
  style={{
    fill: 'white',
  }}
/>
  

Component API

Props

Name Type Default Description
anchor PointLike The anchor sets the origin point of the text.
blendMode The blend mode to be applied to the sprite.
Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode.
instance PIXI.Text The PIXI.Text instance. Can be set or bound to.
pluginName string Plugin that is responsible for rendering this element.
roundPixels boolean If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation.
Advantages can include sharper image quality (like text) and faster rendering on canvas.
The main disadvantage is movement of objects may appear less smooth.
style PIXI.TextStyle Sets the style of the text
text string The text to display

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