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

Styling and Fill System

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

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

Capabilities

Line Style Configuration

Methods for configuring line appearance including width, color, texture, and geometric properties.

/**
 * Sets line style with basic parameters
 * @param width - Line thickness in pixels
 * @param color - Hex color value for the line
 * @param alpha - Alpha transparency (0-1)
 * @param alignment - Line alignment: 0=inner, 0.5=middle, 1=outer (WebGL only)
 * @param native - Use native LINES instead of TRIANGLE_STRIP
 */
lineStyle(width?: number, color?: number, alpha?: number, alignment?: number, native?: boolean): this;

/**
 * Sets line style with options object
 * @param options - Line style configuration options
 */
lineStyle(options?: ILineStyleOptions): this;

/**
 * Sets line style with texture support
 * @param options - Line style options including texture configuration
 */
lineTextureStyle(options?: ILineStyleOptions): this;

Fill Style Options Interface

Configuration interface for fill appearance including color, transparency, texture, and transformation.

interface IFillStyleOptions {
  /** Hex color value for filling (default: 0xFFFFFF) */
  color?: number;
  /** Alpha transparency value 0-1 (default: 1) */
  alpha?: number;
  /** Texture to use for filling (default: Texture.WHITE) */
  texture?: Texture;
  /** Transformation matrix applied to texture (default: null) */
  matrix?: Matrix;
}

Line Style Options Interface

Extended configuration interface for line appearance including geometric properties and rendering options.

interface ILineStyleOptions extends IFillStyleOptions {
  /** Line thickness in pixels (default: 0) */
  width?: number;
  /** Line alignment: 0=inner, 0.5=middle, 1=outer, WebGL only (default: 0.5) */
  alignment?: number;
  /** Use native LINES instead of TRIANGLE_STRIP (default: false) */
  native?: boolean;
  /** Line cap style at endpoints (default: LINE_CAP.BUTT) */
  cap?: LINE_CAP;
  /** Line join style at vertices (default: LINE_JOIN.MITER) */
  join?: LINE_JOIN;
  /** Miter limit ratio for LINE_JOIN.MITER (default: 10) */
  miterLimit?: number;
}

FillStyle Class

Class for managing fill appearance properties including color, texture, and transformation.

class FillStyle {
  /** Hex color value for filling (default: 0xFFFFFF) */
  color: number;
  /** Alpha transparency value 0-1 (default: 1.0) */
  alpha: number;
  /** Texture for fill (default: Texture.WHITE) */
  texture: Texture;
  /** Transform matrix applied to texture (default: null) */
  matrix: Matrix;
  /** Whether fill is visible (default: false) */
  visible: boolean;

  /** Creates new FillStyle with default values */
  constructor();
  
  /** Creates a copy of the fill style */
  clone(): FillStyle;
  
  /** Resets all properties to default values */
  reset(): void;
  
  /** Destroys the fill style and performs cleanup */
  destroy(): void;
}

LineStyle Class

Class for managing line appearance properties extending FillStyle with geometric line properties.

class LineStyle extends FillStyle {
  /** Line thickness in pixels (default: 0) */
  width: number;
  /** Line alignment: 0=inner, 0.5=middle, 1=outer, WebGL only (default: 0.5) */
  alignment: number;
  /** Use native LINES instead of TRIANGLE_STRIP (default: false) */
  native: boolean;
  /** Line cap style at endpoints (default: LINE_CAP.BUTT) */
  cap: LINE_CAP;
  /** Line join style at vertices (default: LINE_JOIN.MITER) */
  join: LINE_JOIN;
  /** Miter limit ratio for LINE_JOIN.MITER (default: 10) */
  miterLimit: number;

  /** Creates new LineStyle with default values */
  constructor();
  
  /** Creates a copy of the line style */
  clone(): LineStyle;
  
  /** Resets all properties to default values (overrides parent color to 0x0 instead of 0xFFFFFF) */
  reset(): void;
}

Line Cap Styles

Enumeration defining line cap styles applied at the endpoints of lines.

enum LINE_CAP {
  /** No cap at line ends - line ends exactly at endpoint */
  BUTT = 'butt',
  /** Semicircular cap extending past endpoint by half line width */
  ROUND = 'round', 
  /** Square cap extending past endpoint by half line width */
  SQUARE = 'square'
}

Line Join Styles

Enumeration defining line join styles applied at vertices where line segments meet.

enum LINE_JOIN {
  /** Sharp corner where outer edges of lines meet at a point */
  MITER = 'miter',
  /** Square butt cap with triangular fill at the turn */
  BEVEL = 'bevel',
  /** Circular arc connecting the outer edges at the joint */
  ROUND = 'round'
}

Graphics Curve Settings

Configuration interface for curve resolution and quality settings affecting bezier curves, arcs, and other curved shapes.

interface IGraphicsCurvesSettings {
  /** Enable adaptive curve resolution based on curve length */
  adaptive: boolean;
  /** Maximum length of individual curve segments */
  maxLength: number;
  /** Minimum number of segments per curve */
  minSegments: number;
  /** Maximum number of segments per curve */
  maxSegments: number;
  /** Curve approximation epsilon for precision */
  epsilon: number;
  /** Calculate optimal segment count for a given curve length */
  _segmentsCount(length: number, defaultSegments?: number): number;
}

Global Curve Settings

Global constant defining default curve resolution settings for all graphics operations.

/**
 * Global graphics curve resolution settings with adaptive configuration
 */
declare const GRAPHICS_CURVES: IGraphicsCurvesSettings;

Usage Examples

Basic Line and Fill Styling:

import { Graphics, LINE_CAP, LINE_JOIN } from "@pixi/graphics";

const graphics = new Graphics();

// Simple line styling
graphics
  .lineStyle(4, 0xff0000, 1)
  .moveTo(50, 50)
  .lineTo(150, 100);

// Advanced line styling with options
graphics
  .lineStyle({
    width: 6,
    color: 0x00ff00,
    alpha: 0.8,
    cap: LINE_CAP.ROUND,
    join: LINE_JOIN.ROUND,
    miterLimit: 15
  })
  .drawRect(200, 50, 100, 80);

Texture Fill with Transformation:

import { Graphics, Texture, Matrix } from "@pixi/graphics";

const graphics = new Graphics();
const texture = Texture.from('pattern.png');
const matrix = new Matrix().scale(0.5, 0.5).rotate(Math.PI / 4);

// Texture fill with transformation
graphics
  .beginTextureFill({
    texture: texture,
    color: 0xffffff,
    alpha: 0.7,
    matrix: matrix
  })
  .drawRect(0, 0, 200, 150)
  .endFill();

Line Alignment Comparison:

const graphics = new Graphics();

// Inner alignment (0) - line grows inward
graphics
  .lineStyle({ width: 10, color: 0xff0000, alignment: 0 })
  .drawRect(50, 50, 100, 100);

// Middle alignment (0.5) - line grows equally inward and outward  
graphics
  .lineStyle({ width: 10, color: 0x00ff00, alignment: 0.5 })
  .drawRect(200, 50, 100, 100);

// Outer alignment (1) - line grows outward
graphics
  .lineStyle({ width: 10, color: 0x0000ff, alignment: 1 })
  .drawRect(350, 50, 100, 100);

Creating and Reusing Style Objects:

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

// Create reusable style objects
const redFill = new FillStyle();
redFill.color = 0xff0000;
redFill.alpha = 0.7;
redFill.visible = true;

const thickBlueLine = new LineStyle();
thickBlueLine.width = 8;
thickBlueLine.color = 0x0000ff;
thickBlueLine.cap = LINE_CAP.ROUND;
thickBlueLine.join = LINE_JOIN.ROUND;

// Apply styles to graphics (note: styles are applied via Graphics methods)
const graphics = new Graphics();
graphics
  .lineStyle({
    width: thickBlueLine.width,
    color: thickBlueLine.color,
    cap: thickBlueLine.cap,
    join: thickBlueLine.join
  })
  .beginFill(redFill.color, redFill.alpha)
  .drawRect(100, 100, 150, 100)
  .endFill();

Native Lines vs Triangle Strip:

const graphics = new Graphics();

// Default triangle strip rendering (better for thick lines)
graphics
  .lineStyle({ width: 20, color: 0xff0000, native: false })
  .moveTo(50, 50)
  .lineTo(250, 100);

// Native line rendering (hardware accelerated, limited styling)
graphics
  .lineStyle({ width: 2, color: 0x00ff00, native: true })
  .moveTo(50, 150)
  .lineTo(250, 200);

Install with Tessl CLI