pixi.js
    Preparing search index...

    Class DashLineShader

    A shader that draws the strokes of a SmoothGraphics as dashed lines, with anti-aliased dash ends.

    Set it as the customShader of the context: it applies to every stroke of the context, and the context is then rendered without batching. Dashes follow the path, and restart at the beginning of each shape. Fills are hidden.

    import { DashLineShader, SmoothGraphics } from 'pixi.js';

    const dashes = new DashLineShader({ dash: 10, gap: 5 });
    const graphics = new SmoothGraphics();

    graphics.context.customShader = dashes;
    graphics.moveTo(0, 0).lineTo(200, 100).stroke({ color: 0xff0000, width: 3 });

    // the dash pattern can be changed at any time
    dashes.dash = 20;

    Hierarchy (View Summary)

    Index
    constructor
    compatibleRenderers glProgram gpuProgram groups resources uid
    dash gap
    addResource destroy from
    compatibleRenderers: number

    A number that uses two bits on whether the shader is compatible with the WebGL renderer and/or the WebGPU renderer. 0b00 - not compatible with either 0b01 - compatible with WebGL 0b10 - compatible with WebGPU This is automatically set based on if a GlProgram or GpuProgram is provided.

    glProgram: GlProgram

    An instance of the GL program used by the WebGL renderer

    gpuProgram: GpuProgram

    An instance of the GPU program used by the WebGPU renderer

    groups: Record<number, BindGroup>
    resources: Record<string, any>

    A record of the resources used by the shader.

    uid: number = ...

    A unique identifier for the shader

    • get dash(): number

      Length of each dash, in pixels at a scale of 1. Set it to 0 to hide the strokes.

      Returns number

      8
    • set dash(value: number): void

      Parameters

      • value: number

      Returns void

    • get gap(): number

      Length of each gap between dashes, in pixels at a scale of 1.

      Returns number

      5
    • set gap(value: number): void

      Parameters

      • value: number

      Returns void

    • Sometimes a resource group will be provided later (for example global uniforms) In such cases, this method can be used to let the shader know about the group.

      Parameters

      • name: string

        the name of the resource group

      • groupIndex: number

        the index of the group (should match the webGPU shader group location)

      • bindIndex: number

        the index of the bind point (should match the webGPU shader bind point)

      Returns void

    • Use to destroy the shader when its not longer needed. It will destroy the resources and remove listeners.

      Parameters

      • destroyPrograms: boolean = false

        if the programs should be destroyed as well. Make sure its not being used by other shaders!

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods