Formas
La función de forma le permite insertar y editar formas y dibujos dentro de un documento, incluidas formas geométricas básicas, flechas y elementos de diagrama de flujo.
Introducción
En Univer Docs, las formas le permiten:
- Insertar formas geométricas: agregue rectángulos, círculos, flechas y más.
- Personalice la apariencia: ajuste los colores de relleno, los bordes y el texto.
- Coloque libremente: coloque formas en cualquier parte del documento.
Modo de complemento
Instalación
pnpm add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-uinpm install @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-uiyarn add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-uibun add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-uiLas formas también requieren UniverProFormulaEnginePlugin del paquete @univerjs-pro/engine-formula. En el código de inicialización base, sustituya la importación y el registro de UniverFormulaEnginePlugin por este plugin. No registre ambos motores de fórmulas, ya que la inserción de formas podría fallar por una dependencia no registrada.
Uso
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)Si tiene una licencia comercial para Univer, consulte Uso de la licencia en el cliente para la configuración.
Compatibilidad móvil
Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs-pro/docs-shape-ui | UniverDocsShapeUIPlugin | UniverDocsShapeMobileUIPlugin |
Editar el texto de una forma
Utiliza la forma devuelta por insertShape() a continuación o en el ejemplo anterior. getText() devuelve un objeto FShapeText activo. Lee el texto con getPlainText(), reemplázalo por completo con setText() y configura la fuente, el color y la alineación.
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() reemplaza el texto existente. Utiliza setRichText() para combinar varios estilos. Para editar texto enriquecido existente, llama a getRichText()?.copy(), modifica el constructor y pásalo a setRichText(). Los cambios del constructor no se aplican automáticamente. Consulta también los estilos de texto y los márgenes y la disposición del cuadro de texto.
const richText = univerAPI.newRichText() .text('Quarterly ') .bold('review')shapeText.setRichText(richText)Copiar formato de formas
Selecciona la forma original, activa el pincel y elige la forma de destino. Se copian relleno, contorno, efectos y formato de texto compatible, conservando identidad, geometría, contenido y vínculos de fórmulas del destino. Borrar formato restaura los valores de inserción. SmartArt queda excluido. El plugin UI correspondiente registra esta función automáticamente.
¿Cómo es esta guía?