Shapes Demo Description

This page demonstrates the XShapeNotes component from @boardxus/canvasx-core. It displays a variety of shape types, including rectangles, diamonds, circles, hexagons, triangles, stars, and more. Each shape is rendered on the canvas and can be used as a building block for diagrams and visualizations.

XShapeNotes Documentation

Overview

The XShapeNotes widget allows you to add a wide range of geometric shapes to your CanvasX board. Each shape can be customized in size, color, and label, and supports drag, resize, and other interactions.

Properties

• shapeName: string — The name of the shape (e.g., 'rect', 'diamond', 'circle', 'hexagon', etc.).
• width, height: number — The dimensions of the shape.
• backgroundColor: string — The fill color of the shape.
• id: string — Unique identifier for the shape.
• textAlign: string — Alignment of the label text inside the shape.

Usage Example

const shape = new XShapeNotes('My Shape', {
  shapeName: 'star',
  width: 200,
  height: 200,
  backgroundColor: 'lightblue',
  id: 'star1',
  textAlign: 'center',
});
canvas.add(shape);

Tips & Best Practices

• Use shapeName to select from a variety of built-in shapes.
• Combine shapes with connectors to build flowcharts and diagrams.
• Customize backgroundColor and textAlign for better visual distinction.