元素
元素是 Board 中可见的内容,包括文本、图片、形状和连接线。通过 FBoard facade 修改元素时,会沿用标准命令链路,因此能够参与撤销、重做和协同编辑。
读取元素
读取活动页面前,先获取活动 Board。如果只需要稳定的 ID、类型、边界和层级顺序,请使用描述信息,避免依赖完整的内部快照结构。
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。
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;需要在一个命令中添加多个元素时,使用对应的批量方法。
编辑形状文字
使用下方或前面示例中 insertShape() 返回的形状对象。getText() 返回实时的 FShapeText 对象,可通过 getPlainText() 读取纯文本、setText() 替换全部文字,并设置字体、颜色和对齐方式。
if (!shape) throw new Error('Shape is not available')const shapeText = shape.getText()console.log(shapeText.getPlainText())shapeText .setText('Quarterly review') .setFontSize(18) .setColor('#2563eb') .setBold(true) .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER) .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)setText() 会替换已有文字;同一形状需要多种文字样式时,使用 setRichText()。编辑现有富文本时,先调用 getRichText()?.copy(),修改构建器后再传给 setRichText(),仅修改构建器不会自动写回。更多选项见文字样式和文本框内边距与布局。
const richText = univerAPI.newRichText() .text('Quarterly ') .bold('review')shapeText.setRichText(richText)连接元素
连接线可以关联已有元素的 ID。如果后续需要修改样式、标签或端点,请保存返回的连接线或其 ID。
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 定位对象。
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。两者都会返回命令是否执行成功。
if (!board.removeElements([connector.id, target.getId()])) { throw new Error('Cannot remove elements')}如果要创建带边框的分组或泳道,请继续阅读容器与泳道。另请参考 Boards facade API 和 Board 元素数据模型。
你觉得这篇文档如何?