도형
도형 기능을 사용하면 기본 기하 도형, 화살표, 순서도 요소를 비롯한 도형과 그림을 문서에 삽입하고 편집할 수 있습니다.
소개
Univer Docs의 도형으로 다음 작업을 할 수 있습니다.
- 기하 도형 삽입: 사각형, 원, 화살표 등을 추가합니다.
- 모양 사용자 지정: 채우기 색상, 테두리, 텍스트를 조정합니다.
- 자유롭게 배치: 문서의 원하는 위치에 도형을 배치합니다.
플러그인 모드
설치
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-ui도형에는 @univerjs-pro/engine-formula의 UniverProFormulaEnginePlugin도 필요합니다. 기본 초기화 코드에서 기존 UniverFormulaEnginePlugin의 가져오기와 등록을 이 플러그인으로 교체하세요. 두 수식 엔진을 함께 등록하면 도형을 삽입할 때 의존성 미등록 오류가 발생할 수 있습니다.
사용법
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 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.
| 패키지 | 데스크톱 등록 | 모바일 등록 |
|---|---|---|
@univerjs-pro/docs-shape-ui | UniverDocsShapeUIPlugin | UniverDocsShapeMobileUIPlugin |
도형 텍스트 편집
아래 또는 앞의 예제에서 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)도형 서식 복사
원본 도형을 선택하고 서식 복사를 활성화한 뒤 대상 도형을 선택하세요. 채우기, 선, 효과 및 지원되는 텍스트 서식을 복사하고 대상 ID, 기하 정보, 텍스트 내용 및 수식 연결은 유지합니다. 서식 지우기는 삽입 기본값을 복원합니다. SmartArt는 제외되며 해당 도형 UI 플러그인이 기능을 자동 등록합니다.
이 가이드는 어떠셨나요?