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 |