Source Code github [#142]Created with Sketch.

Rectangle

Overview

The Rectangle component draws rectangular shapes with customizable dimensions, colors, borders, and corner radius. It's perfect for creating UI elements, backgrounds, buttons, and geometric designs in your Glixy application.

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

<div bind:this={host} class="w-full h-96">
  {#if host}
    <Stage {host}>
      <Rectangle
        x={100}
        y={100}
        width={200}
        height={150}
        background={{ color: 0xac4de5, opacity: 1 }}
        border={{ color: 0xfdc02a, width: 2, opacity: 1, rounded: true }}
        cornerRadius={5}
      />
    </Stage>
  {:else}
    <div>Loading stage...</div>
  {/if}
</div>

Props

The Rectangle component accepts the following properties:

width (number, required)

Width of the rectangle in pixels.

height (number, required)

Height of the rectangle in pixels.

x (number, default: 0)

X position of the rectangle in pixels.

y (number, default: 0)

Y position of the rectangle in pixels.

z (number, default: 0)

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

rotation (number, default: 0)

Rotation angle in radians.

anchor (number, default: 0)

Absolute anchor point for transformations.

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

Scale factor for the rectangle.

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 rectangles.

cursor (string, default: "auto")

CSS cursor style when hovering over the rectangle.

Interaction Props

The Rectangle component supports mouse and pointer interactions:

onpointerover (function)

Called when the pointer enters the rectangle area.

onpointerout (function)

Called when the pointer leaves the rectangle area.

onpointerdown (function)

Called when the pointer is pressed down on the rectangle.

onpointermove (function)

Called when the pointer moves over the rectangle.

onpointerup (function)

Called when the pointer is released over the rectangle.

Usage Notes

Important considerations when using the Rectangle component:

  • Rectangle must be placed inside a Stage or Container
  • Width and height are required properties
  • Colors are specified as hexadecimal numbers (e.g., 0xff0000 for red)
  • Border width of 0 means no border will be drawn
  • Corner radius creates rounded corners - higher values create more rounded corners
  • Use opacity values to create transparent or semi-transparent effects
  • Interactions automatically make the rectangle interactive - no additional setup needed
<- Previous Page

Video

 Next Page ->

Star