Source Code github [#142]Created with Sketch.

Text

Overview

The Text component renders text content in your Glixy application. It provides full control over typography including font family, size, weight, style, and color. Text elements can be positioned, rotated, scaled, and styled just like other Glixy elements.

Loading...
<script>
  import { Stage, Text } from 'glixy';
  
  let host: HTMLElement | null = $state(null);
</script>

<div bind:this={host} class="w-full h-96">
  {#if host}
    <Stage {host}>
      <Text 
        text="Hello, Glixy!" 
        x={100} 
        y={100}
        style={{
          font: 'Arial',
          size: 24,
          color: 0x333333
        }}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

Props

The Text component accepts the following properties:

text (string, required)

The text content to display.

style (object, required)

Text styling configuration with the following properties:

  • font (string): Font family name (e.g., 'Arial', 'Helvetica')
  • size (number): Font size in pixels
  • color (number): Text color as hex number (e.g., 0x000000 for black)
  • weight (string): Font weight ('normal', 'bold', 'lighter', etc.)
  • style (string): Font style ('normal', 'italic', 'oblique')

x (number, default: 0)

X position of the text in pixels.

y (number, default: 0)

Y position of the text in pixels.

z (number, default: 0)

Z-index for layering. Higher values appear on top.

width (number, default: 0)

Width constraint for the text. If 0, text uses natural width.

height (number, default: 0)

Height constraint for the text. If 0, text uses natural height.

rotation (number, default: 0)

Rotation angle in radians.

opacity (number, default: 1)

Opacity value between 0 (transparent) and 1 (opaque).

scale (object, default: {x: 1, y: 1})

Scale factor for the text.

anchor (object, default: {x: 0, y: 0})

Anchor point for transformations. {x: 0.5, y: 0.5} centers the anchor.

Usage Notes

Important considerations when using the Text component:

  • Text must be placed inside a Stage or Container
  • Font families must be available on the user's system or loaded via web fonts
  • Colors are specified as hexadecimal numbers (e.g., 0xff0000 for red)
  • Use anchor points for precise positioning and rotation centers
  • Text rendering performance is optimized for static text; avoid frequent text changes
  • Long text strings may extend beyond the visible area if width/height are not set
<- Previous Page

Sprite

 Next Page ->

Video