tessl/npm-pixi--graphics

2D graphics rendering library for drawing primitive shapes, paths, and complex vector graphics with fills, strokes, and advanced geometric operations

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Curve and Path Drawing

Name: tessl/npm-pixi--graphics
Author: tessl

Advanced path drawing capabilities including bezier curves, quadratic curves, arcs, and complex path operations. Provides precise control over curve resolution and mathematical accuracy.

Capabilities

Curve Drawing Methods

Core methods for drawing curved paths and complex geometric shapes with mathematical precision.

/**
 * Draws a quadratic bezier curve from current position
 * @param cpX - Control point X coordinate
 * @param cpY - Control point Y coordinate  
 * @param toX - End point X coordinate
 * @param toY - End point Y coordinate
 */
quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): this;

/**
 * Draws a cubic bezier curve from current position
 * @param cpX - First control point X coordinate
 * @param cpY - First control point Y coordinate
 * @param cpX2 - Second control point X coordinate
 * @param cpY2 - Second control point Y coordinate
 * @param toX - End point X coordinate
 * @param toY - End point Y coordinate
 */
bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): this;

/**
 * Draws an arc or circle from center point
 * @param cx - Center X coordinate
 * @param cy - Center Y coordinate
 * @param radius - Arc radius
 * @param startAngle - Starting angle in radians
 * @param endAngle - Ending angle in radians
 * @param anticlockwise - Draw counterclockwise (default: false)
 */
arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;

/**
 * Creates an arc between two tangent lines
 * @param x1 - First tangent point X coordinate
 * @param y1 - First tangent point Y coordinate
 * @param x2 - Second tangent point X coordinate
 * @param y2 - Second tangent point Y coordinate
 * @param radius - Arc radius
 */
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;

Arc Utilities

Static utility class providing mathematical functions for arc calculations and construction.

class ArcUtils {
  /**
   * Creates an arc between two tangent lines
   * @param x1 - First tangent point X coordinate
   * @param y1 - First tangent point Y coordinate
   * @param x2 - Second tangent point X coordinate
   * @param y2 - Second tangent point Y coordinate
   * @param radius - Arc radius
   * @param points - Output array for calculated points
   * @returns Arc-like shape interface
   */
  static curveTo(x1: number, y1: number, x2: number, y2: number, radius: number, points: number[]): IArcLikeShape;
  
  /**
   * Creates an arc or curve from specified parameters
   * @param startX - Starting X coordinate
   * @param startY - Starting Y coordinate
   * @param cx - Center X coordinate
   * @param cy - Center Y coordinate
   * @param radius - Arc radius
   * @param startAngle - Starting angle in radians
   * @param endAngle - Ending angle in radians
   * @param anticlockwise - Draw counterclockwise
   * @param points - Output array for calculated points
   */
  static arc(startX: number, startY: number, cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean, points: number[]): void;
}

Bezier Curve Utilities

Static utility class providing mathematical functions for cubic bezier curve calculations.

class BezierUtils {
  /**
   * Calculates the length of a cubic bezier curve
   * @param fromX - Starting point X coordinate
   * @param fromY - Starting point Y coordinate
   * @param cpX - First control point X coordinate
   * @param cpY - First control point Y coordinate
   * @param cpX2 - Second control point X coordinate
   * @param cpY2 - Second control point Y coordinate
   * @param toX - End point X coordinate
   * @param toY - End point Y coordinate
   * @returns Curve length
   */
  static curveLength(fromX: number, fromY: number, cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): number;
  
  /**
   * Calculates and draws a cubic bezier curve by adding points to array
   * @param cpX - First control point X coordinate
   * @param cpY - First control point Y coordinate
   * @param cpX2 - Second control point X coordinate
   * @param cpY2 - Second control point Y coordinate
   * @param toX - End point X coordinate
   * @param toY - End point Y coordinate
   * @param points - Output array for calculated curve points
   */
  static curveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number, points: number[]): void;
}

Quadratic Curve Utilities

Static utility class providing mathematical functions for quadratic bezier curve calculations.

class QuadraticUtils {
  /**
   * Calculates the length of a quadratic bezier curve
   * @param fromX - Starting point X coordinate
   * @param fromY - Starting point Y coordinate
   * @param cpX - Control point X coordinate
   * @param cpY - Control point Y coordinate
   * @param toX - End point X coordinate
   * @param toY - End point Y coordinate
   * @returns Curve length
   */
  static curveLength(fromX: number, fromY: number, cpX: number, cpY: number, toX: number, toY: number): number;
  
  /**
   * Calculates and draws a quadratic bezier curve by adding points to array
   * @param cpX - Control point X coordinate
   * @param cpY - Control point Y coordinate
   * @param toX - End point X coordinate
   * @param toY - End point Y coordinate
   * @param points - Output array for calculated curve points
   */
  static curveTo(cpX: number, cpY: number, toX: number, toY: number, points: number[]): void;
}

Arc-Like Shape Interface

Interface representing the result of arc calculations and construction operations.

interface IArcLikeShape {
  cx: number;
  cy: number;
  radius: number;
  startAngle: number;
  endAngle: number;
  anticlockwise: boolean;
}

Usage Examples

Drawing Smooth Curves:

import { Graphics } from "@pixi/graphics";

const graphics = new Graphics();

// Quadratic bezier curve (single control point)
graphics
  .lineStyle(3, 0xff0000)
  .moveTo(50, 150)
  .quadraticCurveTo(150, 50, 250, 150);

// Cubic bezier curve (two control points for more complex curves)
graphics
  .lineStyle(3, 0x00ff00)
  .moveTo(50, 200)
  .bezierCurveTo(100, 100, 200, 300, 250, 200);

Drawing Arcs and Circles:

const graphics = new Graphics();

// Complete circle
graphics
  .lineStyle(2, 0x0000ff)
  .arc(150, 150, 50, 0, Math.PI * 2);

// Arc segment (quarter circle)
graphics
  .lineStyle(4, 0xff00ff)
  .arc(300, 150, 60, 0, Math.PI / 2);

// Arc going counter-clockwise
graphics
  .lineStyle(3, 0xffff00)
  .arc(450, 150, 40, 0, Math.PI, true);

Using arcTo for Rounded Corners:

const graphics = new Graphics();

// Create rounded rectangle using arcTo
graphics
  .lineStyle(2, 0x00ffff)
  .moveTo(100, 50)
  .lineTo(180, 50)
  .arcTo(200, 50, 200, 70, 20)  // Top-right corner
  .lineTo(200, 130)
  .arcTo(200, 150, 180, 150, 20)  // Bottom-right corner
  .lineTo(120, 150)
  .arcTo(100, 150, 100, 130, 20)  // Bottom-left corner
  .lineTo(100, 70)
  .arcTo(100, 50, 120, 50, 20)  // Top-left corner
  .closePath();

Complex Path with Mixed Curves:

const graphics = new Graphics();

graphics
  .lineStyle(2, 0x333333)
  .beginFill(0x66ccff, 0.3)
  .moveTo(50, 200)
  // Quadratic curve up
  .quadraticCurveTo(100, 100, 200, 150)
  // Straight line
  .lineTo(300, 150)
  // Bezier curve down
  .bezierCurveTo(350, 180, 380, 250, 300, 280)
  // Arc back to start
  .arc(175, 240, 125, 0, Math.PI, false)
  .closePath()
  .endFill();

Using Curve Utilities for Custom Calculations:

import { BezierUtils, QuadraticUtils, ArcUtils } from "@pixi/graphics";

// Calculate curve length before drawing
const bezierLength = BezierUtils.curveLength(0, 0, 50, -50, 100, 50, 150, 0);
console.log(`Bezier curve length: ${bezierLength}`);

const quadLength = QuadraticUtils.curveLength(0, 0, 75, -75, 150, 0);
console.log(`Quadratic curve length: ${quadLength}`);

// Manually calculate curve points
const points: number[] = [];
BezierUtils.curveTo(50, -50, 100, 50, 150, 0, points);

// Draw using calculated points
const graphics = new Graphics();
graphics.lineStyle(2, 0xff0000);
graphics.moveTo(0, 0);
for (let i = 0; i < points.length; i += 2) {
  graphics.lineTo(points[i], points[i + 1]);
}

Rounded Rectangle with NextRoundedRectBehavior:

import { Graphics } from "@pixi/graphics";

// Enable new rounded rectangle behavior (circular arcs)
Graphics.nextRoundedRectBehavior = true;

const graphics = new Graphics();
graphics
  .beginFill(0xffffff)
  .lineStyle(2, 0x000000)
  .drawRoundedRect(50, 50, 200, 100, 25)
  .endFill();

// Disable for old behavior (quadratic bezier curves)
Graphics.nextRoundedRectBehavior = false;

Creating Smooth Animation Paths:

// Create a smooth path for object animation
const graphics = new Graphics();
const path: [number, number][] = [];

graphics
  .lineStyle(1, 0x666666, 0.5)
  .moveTo(100, 300);

// Create smooth S-curve
graphics.bezierCurveTo(200, 100, 400, 500, 500, 300);

// Extract points for animation (this would require extending the curve utilities)
// In practice, you'd sample points along the curve for smooth animation

Install with Tessl CLI