G6

画布操作

G6

画布操作

Loading...

画布操作概述

G6 提供了一系列画布操作 API，用于控制和获取画布的基本信息。通过这些 API，你可以：

获取画布实例
获取和设置画布尺寸
操作画布渲染器和图层

API 参考

Graph.getCanvas()

获取画布实例，返回的实例可用于进行底层的画布操作。

getCanvas(): Canvas;

返回值类型说明

Canvas 实例包含以下主要功能：

getLayer(name?: string): 获取指定图层
getLayers(): 获取所有图层
getCamera(): 获取相机实例
getRoot(): 获取根节点
setCursor(cursor: string): 设置鼠标样式

示例

// 获取画布实例
const canvas = graph.getCanvas();

// 获取主图层
const mainLayer = canvas.getLayer('main');

// 设置鼠标样式
canvas.setCursor('pointer');

// 获取画布根节点
const root = canvas.getRoot();

Graph.getSize()

获取当前画布容器的尺寸。返回一个包含宽度和高度的数组。

getSize(): [number, number];

示例

// 获取画布尺寸
const [width, height] = graph.getSize();
console.log('画布宽度:', width);
console.log('画布高度:', height);

// 使用尺寸信息进行计算
const centerX = width / 2;
const centerY = height / 2;

Graph.setSize(width, height)

设置画布容器的尺寸。这个方法会同时更新画布和容器的大小。

setSize(width: number, height: number): void;

参数

参数	描述	类型	默认值	必选
width	画布宽度（像素）	number	-	✓
height	画布高度（像素）	number	-	✓

示例

// 设置固定尺寸
graph.setSize(800, 600);

Loading...

画布操作概述

G6 提供了一系列画布操作 API，用于控制和获取画布的基本信息。通过这些 API，你可以：

获取画布实例
获取和设置画布尺寸
操作画布渲染器和图层

API 参考

Graph.getCanvas()

获取画布实例，返回的实例可用于进行底层的画布操作。

getCanvas(): Canvas;

返回值类型说明

Canvas 实例包含以下主要功能：

getLayer(name?: string): 获取指定图层
getLayers(): 获取所有图层
getCamera(): 获取相机实例
getRoot(): 获取根节点
setCursor(cursor: string): 设置鼠标样式

示例

// 获取画布实例
const canvas = graph.getCanvas();

// 获取主图层
const mainLayer = canvas.getLayer('main');

// 设置鼠标样式
canvas.setCursor('pointer');

// 获取画布根节点
const root = canvas.getRoot();

Graph.getSize()

获取当前画布容器的尺寸。返回一个包含宽度和高度的数组。

getSize(): [number, number];

示例

// 获取画布尺寸
const [width, height] = graph.getSize();
console.log('画布宽度:', width);
console.log('画布高度:', height);

// 使用尺寸信息进行计算
const centerX = width / 2;
const centerY = height / 2;

Graph.setSize(width, height)

设置画布容器的尺寸。这个方法会同时更新画布和容器的大小。

setSize(width: number, height: number): void;

参数

参数	描述	类型	默认值	必选
width	画布宽度（像素）	number	-	✓
height	画布高度（像素）	number	-	✓

示例

// 设置固定尺寸
graph.setSize(800, 600);