元素

元素是 Board 中可见的内容,包括文本、图片、形状和连接线。通过 FBoard facade 修改元素时,会沿用标准命令链路,因此能够参与撤销、重做和协同编辑。

读取元素

读取活动页面前,先获取活动 Board。如果只需要稳定的 ID、类型、边界和层级顺序,请使用描述信息,避免依赖完整的内部快照结构。

TypeScript
const board = univerAPI.getActiveBoard()if (!board) throw new Error('No active board')const elements = board.describeElements()const shapes = board.findElements({  elementType: univerAPI.Enum.BoardElementType.Shape,})

插入形状和文本

优先使用语义明确的插入方法,而不是自行构造底层元素快照。insertShape 的几何信息放在 transform 中;返回的实时形状对象还提供文本和样式 API。

TypeScript
const shape = board.insertShape({  shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect,  transform: { left: 80, top: 80, width: 180, height: 100 },  name: 'Review card',})if (!shape) throw new Error('Cannot insert shape')shape.getText().setText('Review')shape.setRotation(6)

独立文本使用 insertText,图片使用 insertImage;需要在一个命令中添加多个元素时,使用对应的批量方法。

连接元素

连接线可以关联已有元素的 ID。如果后续需要修改样式、标签或端点,请保存返回的连接线或其 ID。

TypeScript
const target = board.insertShape({  shapeType: univerAPI.Enum.ShapeTypeEnum.Rect,  transform: { left: 360, top: 80, width: 180, height: 100 },})if (!target) throw new Error('Cannot insert target')const connector = board.insertConnector({  fromElementId: shape.getId(),  toElementId: target.getId(),  style: { endMarker: { type: 'filledTriangle', size: 'md' } },})if (!connector) throw new Error('Cannot insert connector')

变换和排列元素

只传入需要修改的属性。层级顺序、对齐、分布和自动布局方法同样通过元素 ID 定位对象。

TypeScript
if (!board.setElementTransform(shape.getId(), { left: 120, top: 140, rotation: 12 })) {  throw new Error('Cannot transform shape')}if (!board.bringElementsToFront([shape.getId()])) {  throw new Error('Cannot bring shape to front')}

删除元素

删除单个元素使用 removeElement,原子化批量删除使用 removeElements。两者都会返回命令是否执行成功。

TypeScript
if (!board.removeElements([connector.id, target.getId()])) {  throw new Error('Cannot remove elements')}

如果要创建带边框的分组或泳道,请继续阅读容器与泳道。另请参考 Boards facade APIBoard 元素数据模型

你觉得这篇文档如何?

© 2026 DreamNum Co., Ltd.