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}
  style={{
    fill: 'white',
  }}
/>

API

Props

Name	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
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