扩展 Canvas

📊 Univer Sheet

import { LocaleType, Univer, UniverInstanceType } from '@univerjs/core'

import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'

import { UniverUIPlugin } from '@univerjs/ui'
import { defaultTheme } from '@univerjs/design'

import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'

import { UniverSheetsPlugin } from '@univerjs/sheets'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'

import { FUniver } from '@univerjs/facade'

import { enUS } from './locales'

import { MainCustomExtension } from './main-extension'
import { RowHeaderCustomExtension } from './row-header-extension'
import { ColumnHeaderCustomExtension } from './column-header-extension'

import './style.css'

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: enUS,
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)

univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  disableAutoFocus: true,
})

univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
})
univer.registerPlugin(UniverDocsUIPlugin)

univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
univer.registerPlugin(UniverSheetsNumfmtPlugin)
univer.registerPlugin(UniverSheetsFormulaPlugin)

const unitId = 'workbook'
univer.createUnit(UniverInstanceType.UNIVER_SHEET, { id: unitId })

const univerAPI = FUniver.newAPI(univer)

univerAPI.getHooks().onRendered(() => {
  univerAPI.registerSheetRowHeaderExtension(unitId, new RowHeaderCustomExtension())
  univerAPI.registerSheetColumnHeaderExtension(unitId, new ColumnHeaderCustomExtension())
  univerAPI.registerSheetMainExtension(unitId, new MainCustomExtension())
})

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 (opens in a new tab)，你可以根据自己的需求（例如先清空原有的行、列标题）来进行绘制。

在线案例参考：Render Extension

在 JavaScript 中扩展 Univer 扩展 UI