@onjmin/dtm
    Preparing search index...

    Type Alias Renderer

    1つのピアノロール描画面（ヘッダー/鍵盤/グリッドの3枚のCanvas）を表す描画器。

    描画状態はインスタンスに閉じ込める。 モジュールグローバルに置くと、1ページに2つ以上の エディタをマウントしたとき後からマウントした側がそれを奪い、先にマウントした側の描画が 相手のCanvasへ流れ込む。曲ごとに音律（12平均律 / 31平均律）が違うと格子まで食い違う。

    type Renderer = {
        destroy: () => void;
        drawGrid: (noteLengthSteps?: number) => void;
        drawHeader: () => void;
        drawKeyboard: () => void;
        drawNoteLyrics: (notes: Note[], syllables: string[]) => void;
        drawNotes: (notes: Note[], color?: number[], isActive?: boolean) => void;
        drawPitchGuide: (pitchUnits: number, label: string) => void;
        drawSelectedNotes: (
            notes: Note[],
            selectedIds: Set<number>,
            baseColor?: number[],
        ) => void;
        drawSelectionRect: (
            rect: { height: number; width: number; x: number; y: number } | null,
        ) => void;
        drawSpeechSpans: (
            spans: { durationSteps: number; note: Note }[],
            color?: number[],
        ) => void;
        getDrawOffset: () => { x: number; y: number };
        getGridCanvas: () => HTMLCanvasElement;
        getGridContext: () => CanvasRenderingContext2D;
        getGridPosition: (
            e: MouseEvent | PointerEvent,
        ) => { pitch: Units; step: number; x: number; y: number };
        getHeaderCanvas: () => HTMLCanvasElement;
        getRenderConfig: () => RenderConfig;
        getXY: (e: MouseEvent | PointerEvent) => [number, number, number];
        onClick: (callback: (step: number, pitch: Units) => void) => void;
        setBackgroundActive: (active: boolean) => void;
        setDrawOffset: (x: number, y: number) => void;
    }
    Index

    Properties

    destroy drawGrid drawHeader drawKeyboard drawNoteLyrics drawNotes drawPitchGuide drawSelectedNotes drawSelectionRect drawSpeechSpans getDrawOffset getGridCanvas getGridContext getGridPosition getHeaderCanvas getRenderConfig getXY onClick setBackgroundActive setDrawOffset

    Properties

    destroy: () => void

    Canvasをマウント先から取り外す。

    drawGrid: (noteLengthSteps?: number) => void
    drawHeader: () => void
    drawKeyboard: () => void
    drawNoteLyrics: (notes: Note[], syllables: string[]) => void
    drawNotes: (notes: Note[], color?: number[], isActive?: boolean) => void
    drawPitchGuide: (pitchUnits: number, label: string) => void

    語りの基準ピッチの行にガイドを引く。この行にノートを置くと音源の素の声の高さで話す。 ラベルは行の左端に出す。

    drawSelectedNotes: (
        notes: Note[],
        selectedIds: Set<number>,
        baseColor?: number[],
    ) => void
    drawSelectionRect: (
        rect: { height: number; width: number; x: number; y: number } | null,
    ) => void
    drawSpeechSpans: (
        spans: { durationSteps: number; note: Note }[],
        color?: number[],
    ) => void

    語り（「…」）が実際に占める長さを、ノートの行に薄い帯で重ねる（プレビュー）。 語りの長さは読み上げが決めるのでノートの音価とは一致しない。帯を見れば 次の歌い出しと重なるかが分かる。

    getDrawOffset: () => { x: number; y: number }
    getGridCanvas: () => HTMLCanvasElement
    getGridContext: () => CanvasRenderingContext2D
    getGridPosition: (
        e: MouseEvent | PointerEvent,
    ) => { pitch: Units; step: number; x: number; y: number }
    getHeaderCanvas: () => HTMLCanvasElement
    getRenderConfig: () => RenderConfig
    getXY: (e: MouseEvent | PointerEvent) => [number, number, number]
    onClick: (callback: (step: number, pitch: Units) => void) => void
    setBackgroundActive: (active: boolean) => void
    setDrawOffset: (x: number, y: number) => void

    Settings

    Member Visibility

    On This Page

    Properties