@diffusionstudio/core-v4/dist/renderer/renderer.d.ts

2D motion graphics and video rendering engine

import { Mask } from '../masks';
import { Serializer } from '../services';
import { Timestamp } from '../models';
import { frame, float, hex } from '../types';
import { Rect, RoundRect, Circle, Stroke, Shadow, FillOptions, ImageOptions, Transform, Ellipse } from './interfaces';
import { BlendMode, FillRule } from './types';
type VideoRendererInit = {
    fps?: number;
    callback?(): Promise<void>;
    context?: AudioContext | OfflineAudioContext;
    audioDestination?: AudioNode;
    width?: number;
    height?: number;
    background?: hex | 'transparent';
    resolution?: number;
};
/**
 * Video and audio renderer combined
 */
export declare class Renderer extends Serializer {
    _background: hex | 'transparent';
    /**
    * The canvas element
    */
    readonly canvas: HTMLCanvasElement;
    /**
     * The main 2d context of the canvas
     */
    readonly videoCtx: CanvasRenderingContext2D;
    /**
     * The resolution of the canvas
     */
    resolution: number;
    /**
     * The width of the canvas
     * Initially 0 so the constructor will set the width
     */
    width: number;
    /**
     * The height of the canvas
     * Initially 0 so the constructor will set the height
     */
    height: number;
    /**
     * The scale of the text
     */
    textScale: number;
    /**
     * The audio context
     */
    readonly audioCtx: AudioContext | OfflineAudioContext;
    readonly audioDestination: AudioNode;
    /**
     * Offset in **seconds** relative to the hardware time when the playback started
     */
    hardwareOffset: number;
    /**
     * Offset in **seconds** relative to 0 when the playback started
     */
    playbackOffset: number;
    /**
     * Defines the fps used for rendering.
     */
    playbackFps: float;
    /**
     * The fps used when the ticker is inactive (not playing)
     */
    inactiveFps: number;
    /**
     * Defines the current state of the ticker
     */
    playing: boolean;
    /**
     * Defines if the ticker is active
     */
    stopped: boolean;
    /**
     * User defined fixed duration
     *
     * @deprecated Use markers.stop instead
     */
    duration?: Timestamp;
    /**
     * The function to call when the ticker is updated
     */
    private callback;
    /**
     * The last time the timer was updated
     */
    private lastFrameTime;
    constructor({ width, height, background, resolution, fps, callback, context, audioDestination, }?: VideoRendererInit);
    /**
    * The current time of the hardware in seconds
    */
    get hardwareTime(): number;
    /**
     * The current time of the playback in **seconds** relative to 0
     */
    get playbackTime(): number;
    get playbackTimestamp(): Timestamp;
    /**
     * The current frame that the playback is set to
     */
    get playbackFrame(): frame;
    /**
     * Starts the animation loop
     */
    start(): void;
    /**
     * Stops the animation loop
     */
    stop(): void;
    /**
     * Starts the frame incrementation
     */
    play(): Promise<void>;
    /**
     * Pauses the frame incrementation
     */
    pause(): Promise<void>;
    /**
     * The animation loop
     */
    private timer;
    private resumeAudioContext;
    /**
     * The background color of the canvas
     */
    get background(): hex | 'transparent';
    set background(background: hex | 'transparent');
    /**
     * Resize the canvas
     */
    resize(width?: number, height?: number, resolution?: number): this;
    clear(region?: Rect): this;
    rect(rect: RoundRect): this;
    circle(circle: Circle | Ellipse): this;
    image(image: CanvasImageSourceWebCodecs, options: ImageOptions): this;
    clip(data?: Path2D | Mask, fillRule?: FillRule): this;
    opacity(opacity: number): this;
    transform(transform?: Transform): this;
    blendMode(mode?: BlendMode): this;
    save(): this;
    restore(): this;
    filter(filter?: string): this;
    fill(options?: FillOptions, draw?: boolean): this;
    shadow(options?: Shadow): this;
    stroke(options?: Stroke, draw?: boolean): this;
    /**
     * Add the renderer to the dom
     */
    mount(element: HTMLElement): void;
    /**
     * Remove the renderer from the dom
     */
    unmount(): void;
    private createGradient;
}
export {};