or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

curves.mddrawing-api.mdgeometry.mdindex.mdstyling.mdutilities.md
tile.json

tessl/npm-pixi--graphics

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@pixi/graphics@6.5.x

To install, run

npx @tessl/cli install tessl/npm-pixi--graphics@6.5.0

index.mddocs/

PIXI Graphics

PIXI Graphics is a comprehensive 2D graphics rendering library that provides powerful tools for drawing primitive shapes, complex paths, and vector graphics programmatically. It offers a chainable API for creating scalable graphics with support for fills, strokes, textures, transformations, and advanced geometric operations, all optimized for high-performance rendering in web applications and games.

Package Information

  • Package Name: @pixi/graphics
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @pixi/graphics

Core Imports

import { Graphics, GraphicsGeometry, FillStyle, LineStyle } from "@pixi/graphics";

For CommonJS:

const { Graphics, GraphicsGeometry, FillStyle, LineStyle } = require("@pixi/graphics");

Import utilities:

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

Basic Usage

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

// Create a new graphics object
const graphics = new Graphics();

// Draw a red rectangle
graphics
  .beginFill(0xff0000, 0.8)
  .drawRect(50, 50, 100, 100)
  .endFill();

// Draw a blue circle with yellow border
graphics
  .lineStyle(4, 0xffff00, 1)
  .beginFill(0x0000ff, 0.5)
  .drawCircle(200, 150, 50)
  .endFill();

// Draw a complex path
graphics
  .lineStyle(2, 0x00ff00)
  .moveTo(300, 100)
  .lineTo(400, 100)
  .quadraticCurveTo(450, 125, 400, 150)
  .lineTo(300, 150)
  .closePath();

Architecture

PIXI Graphics is built around several key components:

  • Graphics Class: Main drawing interface providing chainable methods for shape creation and styling
  • Geometry Management: GraphicsGeometry class handles vertex data, batching, and GPU optimization
  • Style System: FillStyle and LineStyle classes manage appearance properties including colors, textures, and line properties
  • Shape Building: Utility functions and classes for constructing complex geometric shapes with optimized algorithms
  • Curve Mathematics: Specialized utilities for bezier curves, quadratic curves, and arc calculations
  • Batching System: Optimized rendering through BatchPart objects and draw call pooling

Capabilities

Core Drawing API

Primary Graphics class providing chainable methods for drawing shapes, paths, and applying styles. Supports real-time graphics creation with immediate and deferred rendering modes.

class Graphics extends Container {
  constructor(geometry?: GraphicsGeometry);
  
  // Static properties
  static nextRoundedRectBehavior: boolean;
  
  // Shape drawing methods
  drawRect(x: number, y: number, width: number, height: number): this;
  drawCircle(x: number, y: number, radius: number): this;
  drawEllipse(x: number, y: number, width: number, height: number): this;
  drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): this;
  drawPolygon(...path: Array<number> | Array<IPointData>): this;
  drawShape(shape: IShape): this;
  
  // Path methods
  moveTo(x: number, y: number): this;
  lineTo(x: number, y: number): this;
  closePath(): this;
}

Core Drawing API

Styling and Fill System

Comprehensive styling system for controlling appearance of drawn graphics including solid fills, texture fills, gradients, and line styling with caps, joins, and alignment options.

interface IFillStyleOptions {
  color?: number;
  alpha?: number;
  texture?: Texture;
  matrix?: Matrix;
}

interface ILineStyleOptions extends IFillStyleOptions {
  width?: number;
  alignment?: number;
  native?: boolean;
  cap?: LINE_CAP;
  join?: LINE_JOIN;
  miterLimit?: number;
}

Styling and Fill System

Curve and Path Drawing

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

interface Graphics {
  // Curve methods
  quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): this;
  bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): this;
  arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
}

Curve and Path Drawing

Geometry Management

Low-level geometry management for advanced use cases including custom vertex manipulation, batching optimization, and geometry reuse across multiple graphics objects.

class GraphicsGeometry extends BatchGeometry {
  constructor();
  
  readonly bounds: Bounds;
  points: number[];
  colors: number[];
  uvs: number[];
  indices: number[];
  graphicsData: GraphicsData[];
  batches: BatchPart[];
  
  drawShape(shape: IShape, fillStyle?: FillStyle, lineStyle?: LineStyle, matrix?: Matrix): GraphicsGeometry;
  clear(): GraphicsGeometry;
  updateBatches(): void;
}

Geometry Management

Graphics Utilities

Collection of utility functions and classes for shape building, curve calculations, and rendering optimizations. Includes mathematical utilities for arc, bezier, and quadratic curve operations.

declare const graphicsUtils: {
  buildPoly: IShapeBuildCommand;
  buildCircle: IShapeBuildCommand;
  buildRectangle: IShapeBuildCommand;
  buildRoundedRectangle: IShapeBuildCommand;
  buildLine: (graphicsData: GraphicsData) => void;
  ArcUtils: typeof ArcUtils;
  BezierUtils: typeof BezierUtils;
  QuadraticUtils: typeof QuadraticUtils;
  BatchPart: typeof BatchPart;
  FILL_COMMANDS: Record<SHAPES, IShapeBuildCommand>;
  BATCH_POOL: Array<BatchPart>;
  DRAW_CALL_POOL: Array<BatchDrawCall>;
};

Graphics Utilities