指南Univer Sheets进阶使用扩展 Canvas

扩展 Canvas

Univer 部分元素的渲染,如边框和背景,就是使用扩展机制来完成的。Facade 内置了常用扩展注册 API:

  • 中间内容区域:registerSheetMainExtension
  • 行标题:registerSheetRowHeaderExtension
  • 列标题:registerSheetColumnHeaderExtension

继承 SheetExtension 后,提供唯一键值、层级、绘制逻辑就能实现一个 Sheet 渲染扩展。如下:

class RowHeaderCustomExtension extends SheetExtension {
  override uKey = 'RowHeaderCustomExtension'
 
  // 必须大于 10
  override get zIndex() {
    return 11
  }
 
  override draw(ctx: UniverRenderingContext, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton) {
    // ... 主要的渲染逻辑
  }
}
 
SheetRowHeaderExtensionRegistry.add(new RowHeaderCustomExtension())
ℹ️

行标题、列标题的扩展 zIndex 必须大于 10,中间内容区域的扩展 zIndex 必须大于 50,否则会被覆盖。

然后注册到指定的 unitId 上:

univerAPI.registerSheetRowHeaderExtension(unitId, new RowHeaderCustomExtension())

值得注意的是,UniverRenderingContext 本质上就是 CanvasRenderingContext2D,你可以根据自己的需求(例如先清空原有的行、列标题)来进行绘制。

在线案例参考:Render Extension