在 获取 API 后，可以调用相关方法：

get/setAppState

控制整个画布应用的状态，例如在运行时切换明暗主题：

api.setAppState({
    theme: ThemeMode.LIGHT,
});

或者隐藏右侧 taskbar：

api.setAppState({
    taskbarVisible: false,
});

完整状态如下：

export interface AppState {
    theme: Theme;
    themeMode: ThemeMode;
    checkboardStyle: CheckboardStyle;
    cameraZoom: number;
    cameraX: number;
    cameraY: number;
    cameraRotation: number;
    contextBarVisible: boolean;
    contextMenuVisible: boolean;
    topbarVisible: boolean;
    penbarVisible: boolean;
    penbarAll: Pen[];
    penbarSelected: Pen;
    penbarDrawRect: Partial<StrokeAttributes & FillAttributes>;
    penbarDrawEllipse: Partial<StrokeAttributes & FillAttributes>;
    penbarDrawLine: Partial<StrokeAttributes>;
    penbarDrawArrow: Partial<StrokeAttributes & MarkerAttributes>;
    penbarDrawRoughRect: Partial<
        RoughAttributes & StrokeAttributes & FillAttributes
    >;
    penbarDrawRoughEllipse: Partial<
        RoughAttributes & StrokeAttributes & FillAttributes
    >;
    penbarPencil: Partial<StrokeAttributes>;
    penbarText: Partial<
        TextSerializedNode & {
            fontFamilies: string[];
        }
    >;
    taskbarVisible: boolean;
    taskbarAll: Task[];
    taskbarSelected: Task[];
    taskbarChatMessages: Message[];
    layersSelected: SerializedNode['id'][];
    layersHighlighted: SerializedNode['id'][];
    propertiesOpened: SerializedNode['id'][];
    /**
     * Allow rotate in transformer
     */
    rotateEnabled: boolean;
    /**
     * Allow flip in transformer
     */
    flipEnabled: boolean;

    /**
     * Allow snap to pixel grid
     */
    snapToPixelGridEnabled: boolean;
    snapToPixelGridSize: number;

    /**
     * Allow snap to objects
     */
    snapToObjectsEnabled: boolean;
}

get/setNodes

获取或者设置画布中的图形。

api.setNodes(nodes);

getNodeById

通过 id 获取图形：

api.getNodeById('1'); // { id: '1', ... }

getCanvas

获取 Canvas Entity，随后可以获取关联的一系列 Component：

const entity = api.getCanvas();

例如获取画布对应的 DOM 元素：

const { element } = entity.read(Canvas); // HTMLCanvasElement | OffscreenCanvas

下面我们介绍这些 Component

Canvas

核心组件

• element 画布对应的 DOM 元素 HTMLCanvasElement | OffscreenCanvas
• htmlLayer HTML 容器元素 HTMLDivElement
• width 画布宽度
• height 画布高度
• renderer 渲染器，可选值为 'webgl' | 'webgpu'，默认为 'webgl'
• shaderCompilerPath 运行时将 GLSL 转译成 WGSL
• devicePixelRatio 默认为 1，详见：devicePixelRatio

Theme

详见：课程 7 - 明暗主题

entity.read(Theme).mode; // ThemeMode.LIGHT

• mode ThemeMode.LIGHT | ThemeMode.DARK
• colors

{
    [ThemeMode.LIGHT]: {
        background: '#fbfbfb',
        grid: '#dedede',
        selectionBrushFill: '#dedede',
        selectionBrushStroke: '#dedede',
        swatches: [],
    },
    [ThemeMode.DARK]: {
        background: '#121212',
        grid: '#242424',
        selectionBrushFill: '#242424',
        selectionBrushStroke: '#242424',
        swatches: [],
    },
}

Grid

在画布中绘制网格作为背景，详见：课程 5 - 绘制网格

enum CheckboardStyle {
    NONE = 'none',
    GRID = 'grid',
    DOTS = 'dots',
}

checkboardStyle 默认值为 CheckboardStyle.GRID

entity.read(Grid).checkboardStyle; // CheckboardStyle.GRID

Cursor

鼠标样式，详见：CSS cursor

entity.read(Cursor).value; // 'default'

GPUResource

保存一系列 GPU 相关资源

• device 详见 @antv/g-device-api
• swapChain 详见：课程 1 - SwapChain
• renderTarget
• depthRenderTarget
• renderCache
• texturePool

Screenshot

详见：导出图片

const { dataURL } = entity.read(Screenshot); // 'data:'

getHtmlLayer

获取 HTML 内容容器，详见：课程 29 - HTML 容器

api.getHtmlLayer(); // HTMLDivElement
// 等价于
api.getCanvas().read(Canvas).htmlLayer;

client2Viewport

将客户端坐标系下的点转换为视口坐标系下的点。

client2Viewport({ x, y }: IPointData): IPointData

viewport2Client

将视口坐标系下的点转换为客户端坐标系下的点。

viewport2Client({ x, y }: IPointData): IPointData