Source Code github [#142]Created with Sketch.

Star

Overview

The Star component draws star shapes with customizable number of points, sizes, colors, and borders. It's perfect for creating decorative elements, rating systems, badges, and geometric designs in your Glixy application.

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

<div bind:this={host} class="w-full h-96">
  {#if host}
    <Stage {host}>
      <Star 
        x={200} 
        y={200} 
        points={5}
        size={100}
        innerSize={40}
        background={{color: 0xffdd00, opacity: 1}}
        border={{color: 0xff6600, width: 3, opacity: 1}}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

Props

The Star component accepts the following properties:

points (number, required)

Number of points on the star (e.g., 5 for a traditional star).

size (number, required)

Outer radius of the star in pixels (distance from center to star points).

innerSize (number, required)

Inner radius of the star in pixels (distance from center to inner vertices).

x (number, default: 0)

X position of the star center in pixels.

y (number, default: 0)

Y position of the star center in pixels.

z (number, default: 0)

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

rotation (number, default: 0)

Rotation angle in radians.

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

Scale factor for the star.

background (object, default: {color: 0, opacity: 1})

Background fill configuration:

  • color (number): Fill color as hex number (e.g., 0xff0000 for red)
  • opacity (number): Fill opacity between 0 and 1

border (object, default: {color: 0, width: 0, rounded: false, opacity: 1})

Border configuration:

  • color (number): Border color as hex number
  • width (number): Border width in pixels
  • rounded (boolean): Whether border ends are rounded
  • opacity (number): Border opacity between 0 and 1

cornerRadius (number, default: 0)

Corner radius in pixels for rounded star points (currently not implemented in rendering).

Interaction Props

The Star component supports mouse and pointer interactions:

onpointerover (function)

Called when the pointer enters the star area.

onpointerout (function)

Called when the pointer leaves the star area.

onpointerdown (function)

Called when the pointer is pressed down on the star.

onpointermove (function)

Called when the pointer moves over the star.

onpointerup (function)

Called when the pointer is released over the star.

Usage Notes

Important considerations when using the Star component:

  • Star must be placed inside a Stage or Container
  • Points, size, and innerSize are required properties
  • The size property controls the outer radius (distance from center to points)
  • The innerSize property controls the inner radius (distance from center to inner vertices)
  • A smaller innerSize relative to size creates sharper, more pointed stars
  • A larger innerSize relative to size creates more rounded, flower-like shapes
  • Colors are specified as hexadecimal numbers (e.g., 0xff0000 for red)
  • The star is drawn from the center position outward
<- Previous Page

Rectangle

 Next Page ->

Made with Glixy