在 JavaScript 中创建和应用 WordArt 效果

关于 WordArt？

WordArt 或 Word Art 是一种功能，允许您对文本应用效果，使其脱颖而出。使用 WordArt，例如，您可以为文本添加轮廓或填充颜色（或渐变），为其添加 3D 效果等。您还可以倾斜、弯曲和拉伸文本的形状。

WordArt 允许您像对待图形对象一样对待文本。一般而言，WordArt 由对文本进行的效果或特殊修改组成，使其更具吸引力或更显眼。

Microsoft PowerPoint 中的 WordArt

要在 Microsoft PowerPoint 中使用 WordArt，您必须选择一个预定义的 WordArt 模板。WordArt 模板是一组会应用于文本或其形状的效果。

Aspose.Slides 中的 WordArt

在 Aspose.Slides for Node.js via Java 20.10 中，我们实现了对 WordArt 的支持，并在后续的 Aspose.Slides for Node.js via Java 发行版中对该功能进行了改进。

使用 Aspose.Slides for Node.js via Java，您可以轻松地在 JavaScript 中创建自己的 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 效果。

应用显示效果到文本

我们通过以下 JavaScript 示例代码为文本添加显示效果：

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);

为文本应用辉光效果

我们使用以下代码将辉光效果应用于文本，使其发光或突出：

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

您可以更改阴影、显示和辉光的参数。这些效果的属性会分别设置在文本的每个部分上。

在 WordArt 中使用变换

我们通过以下代码使用 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() 方法相关。

对文本应用外部阴影效果

Aspose.Slides for Node.js via Java 提供了 OuterShadow 和 InnerShadow 类，允许您对由 TextFrame 承载的文本应用阴影效果。请按照以下步骤操作：

创建一个 Presentation 类的实例。
使用索引获取幻灯片的引用。
向幻灯片添加矩形类型的 AutoShape。
访问与该 AutoShape 关联的 TextFrame。
将 AutoShape 的 FillType 设置为 NoFill。
实例化 OuterShadow 类。
设置阴影的 BlurRadius。
设置阴影的 Direction。
设置阴影的 Distance。
将 RectanglelAlign 设置为 TopLeft。
将阴影的 PresetColor 设置为 Black。
将演示文稿写入 PPTX 文件。

下面的 Java 示例代码实现了上述步骤，演示了如何对文本应用外部阴影效果：

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();
    }
}

对形状应用内部阴影效果

请按照以下步骤操作：

创建一个 Presentation 类的实例。
获取幻灯片的引用。
添加矩形类型的 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 颜色
    ef.getInnerShadowEffect().getShadowColor().setSchemeColor(aspose.slides.SchemeColor.Accent1);
    // 保存演示文稿
    pres.save("WordArt_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

常见问题

我可以在不同的字体或文字（例如阿拉伯文、中文）上使用 WordArt 效果吗？

是的，Aspose.Slides 支持 Unicode 并可与所有主流字体和文字系统一起使用。无论语言如何，都可以应用诸如阴影、填充和轮廓等 WordArt 效果，但字体的可用性和渲染可能取决于系统字体。

我可以将 WordArt 效果应用于幻灯片母版元素吗？

是的，您可以对母版幻灯片上的形状（包括标题占位符、页脚或背景文字）应用 WordArt 效果。对母版布局所做的更改会影响所有使用该母版的幻灯片。

WordArt 效果会影响演示文稿文件大小吗？

会有轻微影响。阴影、辉光和渐变填充等 WordArt 效果可能会因添加的格式元数据而略微增加文件大小，但差异通常可以忽略不计。

我可以在不保存演示文稿的情况下预览 WordArt 效果的结果吗？

是的，您可以使用 Shape 或 Slide 类的 getImage 方法，将包含 WordArt 的幻灯片渲染为图像（例如 PNG、JPEG）。这样可以在内存中或屏幕上预览结果，而无需保存或导出完整的演示文稿。

在 JavaScript 中管理演示文稿批注 PowerPoint 动画