Фигуры

Функция фигур позволяет вставлять и редактировать в документе фигуры и рисунки, включая простые геометрические фигуры, стрелки и элементы блок-схем.

Введение

В Univer Docs с помощью фигур можно:

• Вставлять геометрические фигуры: добавлять прямоугольники, круги, стрелки и другие фигуры.
• Настраивать внешний вид: изменять цвет заливки, границы и текст.
• Свободно размещать: располагать фигуры в любом месте документа.

Режим плагинов

Установка

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

npm install @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

yarn add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

bun add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

Использование

import { UniverDocsShapePlugin } from '@univerjs-pro/docs-shape'import { UniverDocsShapeUIPlugin } from '@univerjs-pro/docs-shape-ui'import DocsShapeUIEnUS from '@univerjs-pro/docs-shape-ui/locale/en-US'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.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DocsShapeUIEnUS,     ),  },})univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverDocsShapePlugin)univer.registerPlugin(UniverDocsShapeUIPlugin)

Если у вас есть коммерческая лицензия Univer, инструкции по настройке см. в разделе Использование лицензии в клиенте.

Поддержка мобильных устройств

Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.

Редактирование текста фигуры

Используйте фигуру, возвращённую insertShape() ниже или в предыдущем примере. getText() возвращает активный объект FShapeText. Метод getPlainText() читает текст, setText() заменяет его целиком; методы форматирования задают шрифт, цвет и выравнивание.

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(). Изменения построителя не применяются автоматически. См. также стили текста и отступы и компоновку текстового блока.

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

Копирование формата фигур

Выберите исходную фигуру, включите копирование формата и выберите целевую. Копируются заливка, контур, эффекты и поддерживаемое оформление текста; идентификатор, геометрия, текст и связи формул цели сохраняются. Очистка формата восстанавливает настройки вставки. SmartArt исключён. Соответствующий UI-плагин регистрирует поведение автоматически.