tessl/npm-zrender

A lightweight 2D graphics library providing canvas and SVG rendering for Apache ECharts

Overview

Eval results

Files

Shape Library

Name: tessl/npm-zrender
Author: tessl

ZRender provides a comprehensive library of built-in geometric shapes, from basic primitives like circles and rectangles to complex shapes like stars and trochoids. All shapes inherit from the Path class and support complete styling, transformations, and event handling.

Basic Shapes

Circle

Perfect circles with center point and radius:

class Circle extends Path {
  constructor(opts: CircleProps);
  shape: CircleShape;
}

interface CircleProps extends PathProps {
  shape: CircleShape;
}

interface CircleShape {
  cx: number;    // Center X coordinate
  cy: number;    // Center Y coordinate
  r: number;     // Radius
}

Rect

Rectangles with optional rounded corners:

class Rect extends Path {
  constructor(opts: RectProps);
  shape: RectShape;
}

interface RectProps extends PathProps {
  shape: RectShape;
}

interface RectShape {
  x: number;           // Top-left X coordinate
  y: number;           // Top-left Y coordinate
  width: number;       // Width
  height: number;      // Height
  r?: number | number[]; // Corner radius (single value or [TL, TR, BR, BL])
}

Ellipse

Elliptical shapes with independent X and Y radii:

class Ellipse extends Path {
  constructor(opts: EllipseProps);
  shape: EllipseShape;
}

interface EllipseProps extends PathProps {
  shape: EllipseShape;
}

interface EllipseShape {
  cx: number;    // Center X coordinate
  cy: number;    // Center Y coordinate
  rx: number;    // X-axis radius
  ry: number;    // Y-axis radius
}

Linear Shapes

Line

Straight line segments:

class Line extends Path {
  constructor(opts: LineProps);
  shape: LineShape;
}

interface LineProps extends PathProps {
  shape: LineShape;
}

interface LineShape {
  x1: number;    // Start X coordinate
  y1: number;    // Start Y coordinate
  x2: number;    // End X coordinate
  y2: number;    // End Y coordinate
  percent?: number; // Line completion percentage (0-1)
}

Polyline

Open multi-point line:

class Polyline extends Path {
  constructor(opts: PolylineProps);
  shape: PolylineShape;
}

interface PolylineProps extends PathProps {
  shape: PolylineShape;
}

interface PolylineShape {
  points: number[][]; // Array of [x, y] coordinate pairs
  smooth?: number | 'spline' | 'bezier'; // Smoothing factor
}

Polygon

Closed multi-point shape:

class Polygon extends Path {
  constructor(opts: PolygonProps);
  shape: PolygonShape;
}

interface PolygonProps extends PathProps {
  shape: PolygonShape;
}

interface PolygonShape {
  points: number[][]; // Array of [x, y] coordinate pairs
  smooth?: number | 'spline' | 'bezier'; // Smoothing factor
}

Curved Shapes

Arc

Arc segments and sectors:

class Arc extends Path {
  constructor(opts: ArcProps);
  shape: ArcShape;
}

interface ArcProps extends PathProps {
  shape: ArcShape;
}

interface ArcShape {
  cx: number;        // Center X coordinate
  cy: number;        // Center Y coordinate
  r: number;         // Radius
  startAngle: number; // Start angle in radians
  endAngle: number;   // End angle in radians
  clockwise?: boolean; // Direction of arc
}

Sector

Pie chart sectors (arc with lines to center):

class Sector extends Path {
  constructor(opts: SectorProps);
  shape: SectorShape;
}

interface SectorProps extends PathProps {
  shape: SectorShape;
}

interface SectorShape {
  cx: number;         // Center X coordinate
  cy: number;         // Center Y coordinate
  r0: number;         // Inner radius
  r: number;          // Outer radius
  startAngle: number; // Start angle in radians
  endAngle: number;   // End angle in radians
  clockwise?: boolean; // Direction of arc
}

Ring

Donut or ring shapes:

class Ring extends Path {
  constructor(opts: RingProps);
  shape: RingShape;
}

interface RingProps extends PathProps {
  shape: RingShape;
}

interface RingShape {
  cx: number;    // Center X coordinate
  cy: number;    // Center Y coordinate
  r: number;     // Outer radius
  r0: number;    // Inner radius
}

BezierCurve

Cubic Bézier curves:

class BezierCurve extends Path {
  constructor(opts: BezierCurveProps);
  shape: BezierCurveShape;
}

interface BezierCurveProps extends PathProps {
  shape: BezierCurveShape;
}

interface BezierCurveShape {
  x1: number;    // Start point X
  y1: number;    // Start point Y
  x2: number;    // End point X
  y2: number;    // End point Y
  cpx1: number;  // Control point 1 X
  cpy1: number;  // Control point 1 Y
  cpx2: number;  // Control point 2 X
  cpy2: number;  // Control point 2 Y
  percent?: number; // Curve completion percentage (0-1)
}

Complex Shapes

Star

Multi-pointed star shapes:

class Star extends Path {
  constructor(opts: StarProps);
  shape: StarShape;
}

interface StarProps extends PathProps {
  shape: StarShape;
}

interface StarShape {
  cx: number;    // Center X coordinate
  cy: number;    // Center Y coordinate
  n: number;     // Number of points
  r0: number;    // Inner radius
  r: number;     // Outer radius
}

Heart

Heart shape:

class Heart extends Path {
  constructor(opts: HeartProps);
  shape: HeartShape;
}

interface HeartProps extends PathProps {
  shape: HeartShape;
}

interface HeartShape {
  cx: number;    // Center X coordinate
  cy: number;    // Center Y coordinate
  width: number; // Heart width
  height: number; // Heart height
}

Droplet

Water droplet or teardrop shape:

class Droplet extends Path {
  constructor(opts: DropletProps);
  shape: DropletShape;
}

interface DropletProps extends PathProps {
  shape: DropletShape;
}

interface DropletShape {
  cx: number;    // Center X coordinate
  cy: number;    // Center Y coordinate
  width: number; // Droplet width
  height: number; // Droplet height
}

Isogon

Regular polygons (triangle, pentagon, hexagon, etc.):

class Isogon extends Path {
  constructor(opts: IsogonProps);
  shape: IsogonShape;
}

interface IsogonProps extends PathProps {
  shape: IsogonShape;
}

interface IsogonShape {
  x: number;     // Center X coordinate
  y: number;     // Center Y coordinate
  r: number;     // Radius
  n: number;     // Number of sides
}

Mathematical Curves

Rose

Rose curves (mathematical curves):

class Rose extends Path {
  constructor(opts: RoseProps);
  shape: RoseShape;
}

interface RoseProps extends PathProps {
  shape: RoseShape;
}

interface RoseShape {
  cx: number;    // Center X coordinate
  cy: number;    // Center Y coordinate
  r: number[];   // Radius array
  k: number;     // Rose parameter
  n: number;     // Number of petals
}

Trochoid

Trochoid curves (cycloid variations):

class Trochoid extends Path {
  constructor(opts: TrochoidProps);
  shape: TrochoidShape;
}

interface TrochoidProps extends PathProps {
  shape: TrochoidShape;
}

interface TrochoidShape {
  cx: number;    // Center X coordinate
  cy: number;    // Center Y coordinate
  r: number;     // Fixed circle radius
  r0: number;    // Rolling circle radius
  d: number;     // Point distance from center
  location?: string; // 'out' | 'in'
}

Usage Examples

Basic Shapes

import { Circle, Rect, Line } from "zrender";

// Create a circle
const circle = new Circle({
  shape: { cx: 100, cy: 100, r: 50 },
  style: {
    fill: '#ff6b6b',
    stroke: '#d63031',
    lineWidth: 2
  }
});

// Create a rounded rectangle
const rect = new Rect({
  shape: { x: 200, y: 50, width: 120, height: 80, r: 10 },
  style: {
    fill: '#74b9ff',
    stroke: '#0984e3',
    lineWidth: 2
  }
});

// Create a line
const line = new Line({
  shape: { x1: 50, y1: 200, x2: 250, y2: 250 },
  style: {
    stroke: '#00b894',
    lineWidth: 3,
    lineCap: 'round'
  }
});

zr.add(circle);
zr.add(rect);
zr.add(line);

Complex Shapes

import { Star, Heart, Sector } from "zrender";

// Create a 5-pointed star
const star = new Star({
  shape: {
    cx: 150,
    cy: 150,
    n: 5,       // 5 points
    r0: 30,     // Inner radius
    r: 60       // Outer radius
  },
  style: {
    fill: '#fdcb6e',
    stroke: '#e17055',
    lineWidth: 2
  }
});

// Create a heart
const heart = new Heart({
  shape: {
    cx: 300,
    cy: 150,
    width: 80,
    height: 80
  },
  style: {
    fill: '#e84393',
    stroke: '#c0392b',
    lineWidth: 2
  }
});

// Create a pie sector
const sector = new Sector({
  shape: {
    cx: 150,
    cy: 300,
    r0: 20,     // Inner radius (donut hole)
    r: 80,      // Outer radius
    startAngle: 0,
    endAngle: Math.PI / 2  // 90 degrees
  },
  style: {
    fill: '#00cec9',
    stroke: '#00b894',
    lineWidth: 2
  }
});

zr.add(star);
zr.add(heart);
zr.add(sector);

Polylines and Polygons

import { Polyline, Polygon } from "zrender";

// Create a smooth polyline
const polyline = new Polyline({
  shape: {
    points: [
      [50, 200], [100, 150], [150, 180], 
      [200, 120], [250, 160], [300, 100]
    ],
    smooth: 0.3  // Smooth factor
  },
  style: {
    stroke: '#6c5ce7',
    lineWidth: 3,
    fill: 'none'
  }
});

// Create a polygon
const polygon = new Polygon({
  shape: {
    points: [
      [100, 300], [150, 250], [200, 280],
      [180, 320], [120, 330]
    ]
  },
  style: {
    fill: '#a29bfe',
    stroke: '#6c5ce7',
    lineWidth: 2
  }
});

zr.add(polyline);
zr.add(polygon);

Animated Shapes

import { Circle, Arc } from "zrender";

// Animated growing circle
const growingCircle = new Circle({
  shape: { cx: 200, cy: 200, r: 10 },
  style: { fill: '#00b894', opacity: 0.8 }
});

growingCircle.animate('shape')
  .when(2000, { r: 100 })
  .start('easeOutElastic');

// Animated arc (progress indicator)
const progressArc = new Arc({
  shape: {
    cx: 300,
    cy: 300,
    r: 50,
    startAngle: -Math.PI / 2,
    endAngle: -Math.PI / 2,  // Start at 0%
    clockwise: true
  },
  style: {
    stroke: '#74b9ff',
    lineWidth: 8,
    lineCap: 'round',
    fill: 'none'
  }
});

// Animate to 75% complete
progressArc.animate('shape')
  .when(3000, { endAngle: -Math.PI / 2 + Math.PI * 1.5 })
  .start('easeInOut');

zr.add(growingCircle);
zr.add(progressArc);

Shape States and Interactions

import { Rect } from "zrender";

const interactiveRect = new Rect({
  shape: { x: 100, y: 100, width: 100, height: 60, r: 5 },
  style: {
    fill: '#0984e3',
    stroke: '#74b9ff',
    lineWidth: 2
  }
});

// Add hover states
interactiveRect.on('mouseover', () => {
  interactiveRect.animate('style')
    .when(200, {
      fill: '#74b9ff',
      shadowBlur: 10,
      shadowColor: '#0984e3'
    })
    .start();
});

interactiveRect.on('mouseout', () => {
  interactiveRect.animate('style')
    .when(200, {
      fill: '#0984e3',
      shadowBlur: 0
    })
    .start();
});

// Add click interaction
interactiveRect.on('click', () => {
  interactiveRect.animate('shape')
    .when(300, { r: 20 })
    .when(600, { r: 5 })
    .start('easeInOutBounce');
});

zr.add(interactiveRect);

Install with Tessl CLI