Web SDK

形狀

插件信息

形狀功能允許您在文件中插入和編輯形狀與繪圖，包括基本幾何形狀、箭頭和流程圖元素。

介紹

在 Univer Docs 中，形狀使您能夠：

  • 插入幾何形狀：新增矩形、圓形、箭頭等。
  • 自訂外觀：調整填充顏色、邊框和文字。
  • 自由定位：將形狀放置在文件中的任意位置。

外掛模式

安裝

Shell
pnpm add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

形狀還依賴 @univerjs-pro/engine-formula 中的 UniverProFormulaEnginePlugin。請將基礎初始化程式碼中原有的 UniverFormulaEnginePlugin 匯入與註冊替換為此插件。不要同時註冊兩種公式引擎，否則插入形狀時可能出現相依項目未註冊的錯誤。

使用

TypeScript
import { UniverDocsShapePlugin } from '@univerjs-pro/docs-shape'import { UniverDocsShapeUIPlugin } from '@univerjs-pro/docs-shape-ui'import DocsShapeUIZhTW from '@univerjs-pro/docs-shape-ui/locale/zh-TW'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-shape-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.ZH_TW,  locales: {    [LocaleType.ZH_TW]: mergeLocales(      DocsShapeUIZhTW,     ),  },})univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverDocsShapePlugin)univer.registerPlugin(UniverDocsShapeUIPlugin)

如果您擁有 Univer 商業授權，請參閱在用戶端使用授權進行配置。

行動裝置支援

先設定行動版編輯器。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在開啟文件前完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。

套件桌面版註冊行動版註冊
@univerjs-pro/docs-shape-uiUniverDocsShapeUIPluginUniverDocsShapeMobileUIPlugin

編輯形狀文字

使用下方或前面範例中 insertShape() 回傳的形狀物件。getText() 回傳即時的 FShapeText 物件，可透過 getPlainText() 讀取純文字、setText() 取代全部文字，並設定字型、顏色與對齊方式。

TypeScript
import '@univerjs-pro/docs-shape/facade'const document = univerAPI.getActiveDocument()const paragraph = document?.getParagraphs()[0]if (!document || !paragraph) throw new Error('No active document paragraph')const shape = document.insertShape({  shapeType: univerAPI.Enum.ShapeTypeEnum.Rect,  placement: {    wrappingStyle: univerAPI.Enum.TextWrappingStyle.INLINE,    anchor: { paragraphId: paragraph.getId(), segmentId: paragraph.getSegmentId() },  },})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()；僅修改建構器不會自動寫回。更多選項請參閱文字樣式與文字方塊內距和版面配置。

TypeScript
const richText = univerAPI.newRichText()  .text('Quarterly ')  .bold('review')shapeText.setRichText(richText)

圖案格式刷

選取來源圖案，啟用格式刷，再選取目標。格式刷複製填滿、外框、效果與支援的文字格式，保留目標識別、幾何、文字內容及公式繫結。清除格式會還原插入時的預設樣式。SmartArt 不適用；對應的圖案 UI 外掛會自動註冊此行為。

你覺得這篇文檔如何？

© 2026 DreamNum Co., Ltd.