meo-canvas - v8.0.0
    Preparing search index...

    Interface ImageNode

    Renders images with configurable sizing, positioning, and effects. Supports object-fit modes, positioning, border radius, and saturation filters.

    interface ImageNode {
        children: BoxNode[];
        initialProps: Partial<BoxProps>;
        key?: string;
        name?: string;
        node: Node;
        props: ImageProps & BaseProps;
        _renderContent(
            ctx: CanvasRenderingContext2D,
            x: number,
            y: number,
            width: number,
            height: number,
        ): Promise<void>;
        appendChild(child: BoxNode, index: number): void;
        applyDefaults(): void;
        finalizeLayout(): boolean;
        getLoadingPromise(): Promise<void>;
        load(cache?: RenderImageCache, diskCacheKeys?: Set<string>): Promise<void>;
        processInitialChildren(): void;
        render(
            ctx: CanvasRenderingContext2D,
            offsetX?: number,
            offsetY?: number,
        ): Promise<void>;
        resolveInheritedStyles(parentProps: BoxProps & BaseProps): void;
        setLayout(props: BoxProps): void;
        setPageTime(seconds: number): void;
        updateLayoutBasedOnComputedSize(): void;
    }

    Hierarchy (View Summary)

    Index
    children initialProps key? name? node props
    _renderContent appendChild applyDefaults finalizeLayout getLoadingPromise load processInitialChildren render resolveInheritedStyles setLayout setPageTime updateLayoutBasedOnComputedSize
    children: BoxNode[]

    Child nodes.

    initialProps: Partial<BoxProps>

    Original props passed to the constructor before any modifications.

    key?: string

    Unique node identifier.

    name?: string

    Node type name.

    node: Node

    The Yoga layout engine node.

    props: ImageProps & BaseProps

    Current props including defaults and inherited values.

    Protected_renderContent

    • Performs final layout adjustments recursively after the main layout calculation.

      Returns boolean

      Whether any node was marked as dirty during finalization.

    • The in-flight load, starting one if nothing has asked yet.

      Returns Promise<void>

    • Fetches and decodes the source, then tells Yoga what proportions it has.

      cache is scoped to one render, so the same URL appearing on several nodes is fetched once. Safe to call more than once: the first call's promise is returned again rather than a second fetch being started.

      Parameters

      Returns Promise<void>

    • Draws this node, through its mask when it has one.

      Every component's drawing arrives here — Text, Image, Chart and Grid override _renderContent rather than this — so masking one node type means masking all of them.

      The two kinds of mask are applied differently because they are different operations. A shape or path clips, which is a yes-or-no test per pixel and costs nothing but a save/restore. A gradient cannot: its whole purpose is the answers in between, so the node is composited through one instead. Both are applied to the node's layout box, before its own transform, which is what keeps the two consistent with each other.

      dither is held on the context around all of it, so the node's mask, background, content and children are drawn with one answer and whatever draws next is left with its own.

      Parameters

      Returns Promise<void>

    • Tells this node which moment of the render it is being drawn for.

      Parameters

      • seconds: number

      Returns void

    Settings
    Member Visibility

    On This Page
    Properties
    Methods