在 JavaScript 中建立與套用 WordArt 效果

概觀

WordArt 效果讓您可以在 PowerPoint 簡報中加入視覺吸引、具風格的文字。使用 Aspose.Slides，開發人員可以以程式方式建立、客製化與管理 WordArt，就像在 Microsoft PowerPoint 中操作一樣——不需要安裝 Office。本文章概述了 WordArt 的使用方式，包括如何套用文字變形、填色樣式、輪廓、陰影以及其他格式選項，讓您的簡報內容更加表現力豐富且引人入勝。WordArt 讓您把文字當作圖形物件來處理。它是一組套用於文字的效果或特殊變更，使文字更具吸引力或更顯眼。

建立簡易 WordArt 範本並套用至文字

使用 Aspose.Slides

首先，我們使用以下 JavaScript 程式碼建立簡單的文字：

var pres = new aspose.slides.Presentation();
try {
    var slide = pres.getSlides().get_Item(0);
    var autoShape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 200, 200, 400, 200);
    var textFrame = autoShape.getTextFrame();
    var portion = textFrame.getParagraphs().get_Item(0).getPortions().get_Item(0);
    portion.setText("Aspose.Slides");
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

接著，透過下列程式碼將文字的字型高度設定為較大的值，以讓效果更加明顯：

var fontData = new aspose.slides.FontData("Arial Black");
portion.getPortionFormat().setLatinFont(fontData);
portion.getPortionFormat().setFontHeight(36);

使用 Microsoft PowerPoint

前往 Microsoft PowerPoint 中的 WordArt 效果功能表：

todo:image_alt_text

在右側功能表中，您可以選擇預先定義的 WordArt 效果；在左側功能表中，您可以為新 WordArt 指定設定。

以下是部分可用的參數或選項：

todo:image_alt_text

使用 Aspose.Slides

在此，我們將文字的圖案色彩套用為 SmallGrid 並使用以下程式碼加入 1 像素寬的黑色文字邊框：

portion.getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Pattern));
portion.getPortionFormat().getFillFormat().getPatternFormat().getForeColor().setColor(java.getStaticFieldValue("java.awt.Color", "ORANGE"));
portion.getPortionFormat().getFillFormat().getPatternFormat().getBackColor().setColor(java.getStaticFieldValue("java.awt.Color", "WHITE"));
portion.getPortionFormat().getFillFormat().getPatternFormat().setPatternStyle(java.newByte(aspose.slides.PatternStyle.SmallGrid));
portion.getPortionFormat().getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
portion.getPortionFormat().getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLACK"));

產生的文字如下：

todo:image_alt_text

套用其他 WordArt 效果

使用 Microsoft PowerPoint

在程式的功能表中，您可以將這些效果套用至文字、文字方塊、圖形或類似的元件：

todo:image_alt_text

例如，Shadow、Reflection 與 Glow 效果可套用於文字；3D Format 與 3D Rotation 效果可套用於文字方塊；Soft Edges 屬性可套用於 Shape 物件（即使未設定 3D Format 屬性仍會產生效果）。

套用陰影效果

此處我們僅針對文字本身設定屬性。使用以下 JavaScript 程式碼將陰影效果套用至文字：

portion.getPortionFormat().getEffectFormat().enableOuterShadowEffect();
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().getShadowColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLACK"));
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setScaleHorizontal(100);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setScaleVertical(65);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setBlurRadius(4.73);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setDirection(230);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setDistance(2);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setSkewHorizontal(30);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setSkewVertical(0);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().getShadowColor().getColorTransform().add(aspose.slides.ColorTransformOperation.SetAlpha, 0.32);

Aspose.Slides API 支援三種陰影類型：OuterShadow、InnerShadow 與 PresetShadow。

使用 PresetShadow 時，您可以以預設值為文字套用陰影。

使用 Microsoft PowerPoint

在 PowerPoint 中只能使用單一類型的陰影。以下為示範：

todo:image_alt_text

使用 Aspose.Slides

Aspose.Slides 甚至允許同時套用兩種陰影：InnerShadow 與 PresetShadow。

注意：

同時使用 OuterShadow 與 PresetShadow 時，僅會套用 OuterShadow 效果。
若同時使用 OuterShadow 與 InnerShadow，實際套用的效果取決於 PowerPoint 版本，例如在 PowerPoint 2013 中會產生雙重效果，而在 PowerPoint 2007 中則只套用 OuterShadow。

套用 Display 效果至文字

我們使用以下 JavaScript 程式碼為文字加入 Display 效果：

portion.getPortionFormat().getEffectFormat().enableReflectionEffect();
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setBlurRadius(0.5);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setDistance(4.72);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setStartPosAlpha(0.0);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setEndPosAlpha(60.0);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setDirection(90);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setScaleHorizontal(100);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setScaleVertical(-100);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setStartReflectionOpacity(60.0);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setEndReflectionOpacity(0.9);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setRectangleAlign(aspose.slides.RectangleAlignment.BottomLeft);

套用 Glow 效果至文字

使用下列程式碼將 Glow 效果套用至文字，使其發光或更突出：

portion.getPortionFormat().getEffectFormat().enableGlowEffect();
portion.getPortionFormat().getEffectFormat().getGlowEffect().getColor().setR(255);
portion.getPortionFormat().getEffectFormat().getGlowEffect().getColor().getColorTransform().add(aspose.slides.ColorTransformOperation.SetAlpha, 0.54);
portion.getPortionFormat().getEffectFormat().getGlowEffect().setRadius(7);

操作結果：

todo:image_alt_text

您可以變更陰影、Display 與 Glow 的參數。這些效果的屬性會分別套用於文字的每個區段。

在 WordArt 中使用變形 (Transformations)

我們透過以下程式碼使用 Transform 屬性（套用於整個文字區塊）：

textFrame.getTextFrameFormat().setTransform(java.newByte(aspose.slides.TextShapeType.ArchUpPour));

結果如下：

todo:image_alt_text

Microsoft PowerPoint 與 Aspose.Slides for Node.js via Java 均提供了多種預定義的變形類型。

使用 PowerPoint

前往格式 → 文字效果 → 變形以存取預定義的變形類型。

使用 Aspose.Slides

使用 TextShapeType 列舉可選取變形類型。

套用 3D 效果至文字與圖形

我們使用以下範例程式碼將 3D 效果套用至文字圖形：

autoShape.getThreeDFormat().getBevelBottom().setBevelType(aspose.slides.BevelPresetType.Circle);
autoShape.getThreeDFormat().getBevelBottom().setHeight(10.5);
autoShape.getThreeDFormat().getBevelBottom().setWidth(10.5);
autoShape.getThreeDFormat().getBevelTop().setBevelType(aspose.slides.BevelPresetType.Circle);
autoShape.getThreeDFormat().getBevelTop().setHeight(12.5);
autoShape.getThreeDFormat().getBevelTop().setWidth(11);
autoShape.getThreeDFormat().getExtrusionColor().setColor(java.getStaticFieldValue("java.awt.Color", "ORANGE"));
autoShape.getThreeDFormat().setExtrusionHeight(6);
autoShape.getThreeDFormat().getContourColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
autoShape.getThreeDFormat().setContourWidth(1.5);
autoShape.getThreeDFormat().setDepth(3);
autoShape.getThreeDFormat().setMaterial(aspose.slides.MaterialPresetType.Plastic);
autoShape.getThreeDFormat().getLightRig().setDirection(aspose.slides.LightingDirection.Top);
autoShape.getThreeDFormat().getLightRig().setLightType(aspose.slides.LightRigPresetType.Balanced);
autoShape.getThreeDFormat().getLightRig().setRotation(0, 0, 40);
autoShape.getThreeDFormat().getCamera().setCameraType(aspose.slides.CameraPresetType.PerspectiveContrastingRightFacing);

產生的文字與圖形如下：

todo:image_alt_text

接著，我們使用此 JavaScript 程式碼為文字套用 3D 效果：

textFrame.getTextFrameFormat().getThreeDFormat().getBevelBottom().setBevelType(aspose.slides.BevelPresetType.Circle);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelBottom().setHeight(3.5);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelBottom().setWidth(3.5);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelTop().setBevelType(aspose.slides.BevelPresetType.Circle);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelTop().setHeight(4);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelTop().setWidth(4);
textFrame.getTextFrameFormat().getThreeDFormat().getExtrusionColor().setColor(java.getStaticFieldValue("java.awt.Color", "ORANGE"));
textFrame.getTextFrameFormat().getThreeDFormat().setExtrusionHeight(6);
textFrame.getTextFrameFormat().getThreeDFormat().getContourColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
textFrame.getTextFrameFormat().getThreeDFormat().setContourWidth(1.5);
textFrame.getTextFrameFormat().getThreeDFormat().setDepth(3);
textFrame.getTextFrameFormat().getThreeDFormat().setMaterial(aspose.slides.MaterialPresetType.Plastic);
textFrame.getTextFrameFormat().getThreeDFormat().getLightRig().setDirection(aspose.slides.LightingDirection.Top);
textFrame.getTextFrameFormat().getThreeDFormat().getLightRig().setLightType(aspose.slides.LightRigPresetType.Balanced);
textFrame.getTextFrameFormat().getThreeDFormat().getLightRig().setRotation(0, 0, 40);
textFrame.getTextFrameFormat().getThreeDFormat().getCamera().setCameraType(aspose.slides.CameraPresetType.PerspectiveContrastingRightFacing);

操作結果：

todo:image_alt_text

3D 效果套用於文字或其圖形時，與其他效果的交互遵循特定規則。

將文字與其所在圖形視為同一場景。3D 效果包含 3D 物件表示與放置該物件的場景。

若場景同時設定於圖形與文字，圖形的場景優先，文字的場景會被忽略。
若圖形本身沒有場景但有 3D 表示，則使用文字的場景。
若圖形原本沒有任何 3D 效果，則圖形保持平面，3D 效果僅套用於文字。

上述說明與 ThreeDFormat.getLightRig() 與 ThreeDFormat.getCamera() 方法相關。

為文字套用 Outer Shadow 效果

Aspose.Slides for Node.js via Java 提供 OuterShadow 與 InnerShadow 類別，讓您能對由 TextFrame 所承載的文字套用陰影效果。請依照以下步驟操作：

建立一個 Presentation 例項。
依索引取得投影片參考。
在投影片上新增類型為 Rectangle 的 AutoShape。
取得該 AutoShape 關聯的 TextFrame。
將 AutoShape 的 FillType 設為 NoFill。
實例化 OuterShadow 類別。
設定陰影的 BlurRadius。
設定陰影的 Direction。
設定陰影的 Distance。
將 RectanglelAlign 設為 TopLeft。
將陰影的 PresetColor 設為 Black。
將簡報寫出為 PPTX 檔案。

以下 Java 範例程式碼示範如何將 Outer Shadow 效果套用至文字：

var pres = new aspose.slides.Presentation();
try {
    // 取得投影片的參考
    var sld = pres.getSlides().get_Item(0);
    // 新增矩形類型的 AutoShape
    var ashp = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 150, 75, 150, 50);
    // 為矩形加入 TextFrame
    ashp.addTextFrame("Aspose TextBox");
    // 停用圖形填色，以便取得文字的陰影
    ashp.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
    // 新增外部陰影並設定所有必要參數
    ashp.getEffectFormat().enableOuterShadowEffect();
    var shadow = ashp.getEffectFormat().getOuterShadowEffect();
    shadow.setBlurRadius(4.0);
    shadow.setDirection(45);
    shadow.setDistance(3);
    shadow.setRectangleAlign(aspose.slides.RectangleAlignment.TopLeft);
    shadow.getShadowColor().setPresetColor(aspose.slides.PresetColor.Black);
    // 將簡報寫入磁碟
    pres.save("pres_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

為圖形套用 Inner Shadow 效果

請依照以下步驟操作：

建立一個 Presentation 例項。
取得投影片參考。
新增類型為 Rectangle 的 AutoShape。
啟用 InnerShadowEffect。
設定所有必要參數。
將 ColorType 設為 Scheme。
設定 Scheme Color。
將簡報寫出為 PPTX 檔案。

以下範例程式碼（根據上述步驟）示範如何在 JavaScript 中於兩個圖形之間加入連接線：

var pres = new aspose.slides.Presentation();
try {
    // 取得投影片的參考
    var slide = pres.getSlides().get_Item(0);
    // 新增矩形類型的 AutoShape
    var ashp = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 150, 75, 400, 300);
    ashp.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
    // 為矩形加入 TextFrame
    ashp.addTextFrame("Aspose TextBox");
    var port = ashp.getTextFrame().getParagraphs().get_Item(0).getPortions().get_Item(0);
    var pf = port.getPortionFormat();
    pf.setFontHeight(50);
    // 啟用 InnerShadowEffect
    var ef = pf.getEffectFormat();
    ef.enableInnerShadowEffect();
    // 設定所有必要參數
    ef.getInnerShadowEffect().setBlurRadius(8.0);
    ef.getInnerShadowEffect().setDirection(90.0);
    ef.getInnerShadowEffect().setDistance(6.0);
    ef.getInnerShadowEffect().getShadowColor().setB(189);
    // 設定 ColorType 為 Scheme
    ef.getInnerShadowEffect().getShadowColor().setColorType(aspose.slides.ColorType.Scheme);
    // 設定 Scheme Color
    ef.getInnerShadowEffect().getShadowColor().setSchemeColor(aspose.slides.SchemeColor.Accent1);
    // 儲存簡報
    pres.save("WordArt_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

常見問題集 (FAQ)

我可以在不同字型或文字系統（例如阿拉伯文、中文）中使用 WordArt 效果嗎？

可以，Aspose.Slides 支援 Unicode，並能與所有主要字型與文字系統合作。Shadow、Fill、Outline 等 WordArt 效果均可套用於任何語言，儘管字型的可用性與呈現可能受系統安裝的字型影響。

我可以將 WordArt 效果套用至投影片母版元素嗎？

可以，您可以在母版投影片上的形狀（例如標題占位符、頁腳或背景文字）套用 WordArt 效果。對母版版面的變更會套用至所有使用該母版的投影片。

WordArt 效果會影響簡報檔案大小嗎？

會略微影響。陰影、Glow、漸層填色等效果會因為額外的格式資訊而稍微增加檔案大小，但差異通常可以忽略不計。

我可以在未儲存簡報的情況下預覽 WordArt 效果的結果嗎？

可以，您可以使用 Shape 或 Slide 類別的 getImage 方法將含有 WordArt 的投影片渲染為影像（如 PNG、JPEG），以在記憶體或螢幕上即時預覽結果，無需先儲存完整簡報。

在 JavaScript 中自動化簡報本地化