図形とテキスト

Slides は共有 Shape エンジンを使って、編集可能な図形、コネクタ、図形内テキストを提供します。FSlide.insertShape() は Slides のコマンドパイプラインに接続された Shape Facade を返します。

図形を挿入する

const slide = univerAPI.getActivePresentation()?.getActiveSlide()if (!slide) {  throw new Error('No active slide')}const shape = slide.insertShape({  shapeType: univerAPI.Enum.ShapeTypeEnum.RoundRect,  transform: { left: 80, top: 64, width: 320, height: 120 },  visible: true,  selectable: true,  shapeData: {    fill: {      fillType: univerAPI.Enum.ShapeFillEnum.SolidFill,      color: '#dbeafe',    },  },})

Shape ホストアダプターが利用できない場合や入力を作成できない場合、insertShape() は null を返します。図形を挿入する前に Slides 構成の Shape 依存関係を登録してください。

リッチテキストを追加する

if (shape) {  const richText = univerAPI.newRichText()    .text('Quarterly ')    .bold('review')  shape.getText()    .setRichText(richText)    .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER)    .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)}

図形の取得には slide.getShape(id) または slide.getShapes() を使用します。共通要素メソッドで位置、サイズ、表示、名前、説明を更新でき、slide.deleteElement(shape) で削除できます。

図形のテキストを編集する

以下または前の例で insertShape() が返す図形を使用します。getText() はライブの FShapeText オブジェクトを返します。getPlainText() でテキストを読み取り、setText() で全文を置き換え、フォント、色、配置を設定できます。

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 プラグインが自動登録します。

図形の結合

同じスライドで対応するオブジェクトを 2～10 個選択し、図形の結合を実行します。操作は union（全領域の結合）、combine（重複部分の除外）、intersect（共通部分）、subtract（主オブジェクトから他を減算）、fragment（領域への分割）です。書式は主オブジェクトから引き継ぎます。選択したオブジェクトを置き換え、元に戻す、やり直し、共同編集に対応します。

以下のコマンドは現在の選択を使用し、適用できない場合は merged が false になります。編集可能で、同じグループ階層のオブジェクトが必要です。コネクタ、SmartArt、OLE、チャート、表は対象外です。一部の効果、アニメーション、複雑なテキスト配置でも実行できません。

テキストボックスは輪郭に変換され、結合後はテキストとして編集できません。描画に使う正確なフォントデータが必要です。UniverSlidesUIPlugin は対応する読み込み済み Web フォントを解決できます。他のソースには設定の mergeShapeFontResolver(font, unitId, text) を使用し、太さ、スタイル、フォールバックも一致するフォントの ArrayBuffer または Promise を返してください。特定できなければ undefined を返します。フォントが不足すると、オブジェクトを変更せず結合を拒否します。

import { MergeSlideShapesCommand } from '@univerjs-pro/slides-ui'const merged = await univerAPI.executeCommand(MergeSlideShapesCommand.id, {  operation: 'union',})