@kayahr/wastelib
    Preparing search index...

    Class Portrait

    An animated portrait image. Contains the base frame image but also provides methods to access the animation information. To simply play the animation it is recommended to use the PortraitPlayer class.

    Hierarchy (View Summary)

    Implements

    Index

    Properties

    The image data. Each byte contains two 4-bit color pixels.

    height: number

    The image height in pixels.

    width: number

    The image width in pixels.

    Methods

    • Creates and returns an animation player for this animation. The actual drawing is done by the specified callback which is called for each frame and receives the image to render.

      Parameters

      • onDraw: (frame: BaseImage) => void

        Callback to call on each frame update. This callback is responsible for actually showing the animation frame to the user.

      Returns PortraitPlayer

      The created animation player. You have to call the start() method on it to start the animation.

    • Draws the image onto the given rendering context.

      Parameters

      • ctx: CanvasContext2DLike

        The rendering context to draw the image to.

      • x: number = 0

        Optional horizontal target position. Defaults to 0.

      • y: number = 0

        Optional vertical target position. Defaults to 0.

      Returns void

    • Returns the RGBA color at the specified position.

      Parameters

      • x: number

        The horizontal pixel position.

      • y: number

        The vertical pixel position.

      Returns number

      The RGBA color at the specified position.

      RangeError if coordinates are outside of the image boundaries.

    • Resets the given canvas to the image size and fills the canvas with the image. This does not create a new canvas so any canvas implementation can be used and existing canvas objects can be re-used.

      In a browser you do this:

      const canvas = image.toCanvas(document.createElement("canvas"))`;
      

      In Node.js (with node-canvas) you do this:

      import { createCanvas} from "canvas";

      const canvas = image.toCanvas(createCanvas());

      Type Parameters

      Parameters

      • canvas: T

        The canvas to reset and fill.

      Returns T

      The passed canvas for method chaining.