在 JavaScript 中自定义演示文稿形状

本页内容简介

使用 JavaScript 和 Aspose.Slides for Node.js 在 PowerPoint 演示文稿中创建和自定义形状：几何路径、圆角、复合形状。

概述

本文介绍了如何通过编辑点和几何路径编辑形状几何，从而自定义 Aspose.Slides 中的演示文稿形状。它展示了如何使用GeometryPath修改现有形状、执行基本路径编辑操作、添加或删除点，并将更新后的几何重新应用到形状。

此外，还演示了如何创建自定义和复合形状、构建带圆角的形状、判断形状几何是否闭合、检查形状元素，以及将 Java AWT 文本轮廓转换为几何路径。

使用编辑点更改形状

在 PowerPoint 中，您可以使用编辑点来修改正方形：

• 将角向内或向外移动。
• 调整某一点的曲率。
• 添加新点。

编辑点可让您修改形状的轮廓，或以现有形状为基础创建新形状。

形状编辑技巧

编辑 PowerPoint 形状时，请牢记以下概念：

• 形状（或其路径）可以是闭合的，也可以是开放的。
• 形状的路径由通过线段相连的锚点组成。
• 线段可以是直的或曲的。锚点和控制手柄决定其形状。
• 锚点可分为拐角点、直线点或平滑点：
  • 在拐角点，相邻线段可以形成角度。
  • 在平滑点，两个控制手柄共线且距离锚点相等。
  • 在直线点，两个控制手柄共线但与锚点的距离可不同。
• 移动锚点或调整其手柄会改变形状的轮廓。

为通过编辑点编辑 PowerPoint 形状，Aspose.Slides 提供了GeometryPath类。

• 一个GeometryPath实例表示GeometryShape对象的几何路径。
• 要从GeometryShape实例获取GeometryPath，可使用GeometryShape.getGeometryPaths方法。
• 要为形状设置GeometryPath，可使用以下方法：针对单路径形状的GeometryShape.setGeometryPath以及针对多路径形状的GeometryShape.setGeometryPaths。
• 要添加线段，可使用GeometryPath下的方法。
• 通过GeometryPath.setStroke和GeometryPath.setFillMode方法，可设置几何路径的外观。
• 使用GeometryPath.getPathData方法，可将GeometryShape的几何路径作为路径段数组检索。
• 若要访问更多形状几何自定义选项，可通过PathIterator读取java.awt.Shape，并将段重放到GeometryPath上。

简单编辑操作

使用以下方法编辑几何路径。接受索引的重载会在路径的段数组中对应的零基位置插入段。

操作	方法
附加或插入直线段。	GeometryPath.lineTo
附加或插入带有两个控制点和终点的三次 Bézier 曲线。	GeometryPath.cubicBezierTo
附加或插入带有一个控制点和终点的二次 Bézier 曲线。	GeometryPath.quadraticBezierTo
附加具有指定尺寸和角度（度）的椭圆弧。	GeometryPath.arcTo
通过将终点连接到起点来关闭当前图形。	GeometryPath.closeFigure
设置图形的起始点。	GeometryPath.moveTo
移除指定零基索引处的段。	GeometryPath.removeAt

向形状添加自定义点

本示例使用GeometryPath.lineTo在矩形形状中插入两个点，并通过GeometryShape.setGeometryPath应用编辑后的路径。坐标相对于形状本身：两个新点位于中心，距离左侧 100 点、顶部 50 点。段索引 1 和 4 将它们放在上下边缘，向内拉动这些边缘。

const slides = require("aspose.slides.via.java");

const presentation = new slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const shape = slide.getShapes().addAutoShape(slides.ShapeType.Rectangle, 100, 100, 200, 100);

    const geometryPath = shape.getGeometryPaths()[0];
    geometryPath.lineTo(100, 50, 1);
    geometryPath.lineTo(100, 50, 4);

    shape.setGeometryPath(geometryPath);
} finally {
    presentation.dispose();
}

从形状中移除点

本示例通过GeometryPath.removeAt删除零基索引为 2 的段，以改变心形轮廓。使用GeometryShape.setGeometryPath应用修改后的路径后，形状轮廓得到更新。

const slides = require("aspose.slides.via.java");

const presentation = new slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const shape = slide.getShapes().addAutoShape(slides.ShapeType.Heart, 100, 100, 300, 300);

    const path = shape.getGeometryPaths()[0];
    path.removeAt(2);

    shape.setGeometryPath(path);
} finally {
    presentation.dispose();
}

创建自定义形状

本示例使用GeometryPath构建一个五角星。外半径 100 点、内半径 50 点交替定义星尖和凹槽；72 度的步进均匀分布五个星尖。路径通过GeometryPath.closeFigure闭合，并使用GeometryShape.setGeometryPath应用到矩形形状，替换其轮廓。

const slides = require("aspose.slides.via.java");
const java = require("java");

const points = [];
const outerRadius = 100;
const innerRadius = 50;
const angleStep = 72;

for (let angle = -90; angle < 270; angle += angleStep) {
    let radians = angle * Math.PI / 180;
    points.push({ x: outerRadius * Math.cos(radians) + outerRadius, y: outerRadius * Math.sin(radians) + outerRadius });
    radians = (angle + angleStep / 2) * Math.PI / 180;
    points.push({ x: innerRadius * Math.cos(radians) + outerRadius, y: innerRadius * Math.sin(radians) + outerRadius });
}

const starPath = new slides.GeometryPath();
starPath.moveTo(java.newFloat(points[0].x), java.newFloat(points[0].y));
for (let i = 1; i < points.length; i++) {
    starPath.lineTo(java.newFloat(points[i].x), java.newFloat(points[i].y));
}
starPath.closeFigure();

const presentation = new slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const shape = slide.getShapes().addAutoShape(slides.ShapeType.Rectangle, 100, 100, outerRadius * 2, outerRadius * 2);
    shape.setGeometryPath(starPath);
} finally {
    presentation.dispose();
}

创建复合自定义形状

本示例为形状的上三分之一和下三分之一分别定义了两个闭合的GeometryPath对象。通过GeometryShape.setGeometryPaths同时应用这两个路径，可创建一个在中间三分之一处留有空隙的单一复合形状。

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const shape = slide.getShapes().addAutoShape(slides.ShapeType.Rectangle, 100, 100, 200, 100);

    const topPath = new slides.GeometryPath();
    topPath.moveTo(0, 0);
    topPath.lineTo(shape.getWidth(), 0);
    topPath.lineTo(shape.getWidth(), java.newFloat(shape.getHeight() / 3));
    topPath.lineTo(0, java.newFloat(shape.getHeight() / 3));
    topPath.closeFigure();

    const bottomPath = new slides.GeometryPath();
    bottomPath.moveTo(0, java.newFloat(shape.getHeight() / 3 * 2));
    bottomPath.lineTo(shape.getWidth(), java.newFloat(shape.getHeight() / 3 * 2));
    bottomPath.lineTo(shape.getWidth(), shape.getHeight());
    bottomPath.lineTo(0, shape.getHeight());
    bottomPath.closeFigure();

    const paths = java.newArray("com.aspose.slides.GeometryPath", [topPath, bottomPath]);
    shape.setGeometryPaths(paths);
} finally {
    presentation.dispose();
}

创建带圆角的自定义形状

本示例将直线段与GeometryPath.arcTo结合，创建一个内凹圆角的形状。每个角的尺寸决定弧的宽度和高度（单位为点），-90 度的扫描角绘制逆时针四分之一椭圆。完成的路径通过GeometryShape.setGeometryPath应用，并以 PPTX 格式保存演示文稿。

const slides = require("aspose.slides.via.java");

const shapeX = 20;
const shapeY = 20;
const shapeWidth = 300;
const shapeHeight = 200;

const leftTopSize = 50;
const rightTopSize = 20;
const rightBottomSize = 40;
const leftBottomSize = 10;

const presentation = new slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const shape = slide.getShapes().addAutoShape(slides.ShapeType.Custom, shapeX, shapeY, shapeWidth, shapeHeight);

    const geometryPath = new slides.GeometryPath();
    geometryPath.moveTo(leftTopSize, 0);
    geometryPath.lineTo(shapeWidth - rightTopSize, 0);
    geometryPath.arcTo(rightTopSize, rightTopSize, 180, -90);
    geometryPath.lineTo(shapeWidth, shapeHeight - rightBottomSize);
    geometryPath.arcTo(rightBottomSize, rightBottomSize, -90, -90);
    geometryPath.lineTo(leftBottomSize, shapeHeight);
    geometryPath.arcTo(leftBottomSize, leftBottomSize, 0, -90);
    geometryPath.lineTo(0, leftTopSize);
    geometryPath.arcTo(leftTopSize, leftTopSize, 90, -90);
    geometryPath.closeFigure();

    shape.setGeometryPath(geometryPath);

    presentation.save("output.pptx", slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

判断形状几何是否闭合

以下辅助方法检查每个非空几何路径是否以闭合段结束。它读取GeometryPath.getPathData，并将最后一段的PathSegment.getPathCommand与PathCommandType.Close比较。若不存在非空路径则返回 false。该检查针对每条路径的最终命令，而不检查路径内部的每个子图形。示例对矩形输出 true。

const slides = require("aspose.slides.via.java");

function isGeometryClosed(geometryShape) {
    let hasNonemptyPath = false;
    for (const geometryPath of geometryShape.getGeometryPaths()) {
        const segments = geometryPath.getPathData();
        if (segments.length === 0) {
            continue;
        }
        hasNonemptyPath = true;
        const lastSegment = segments[segments.length - 1];
        if (lastSegment.getPathCommand() !== slides.PathCommandType.Close) {
            return false;
        }
    }
    return hasNonemptyPath;
}

const presentation = new slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const shape = slide.getShapes().addAutoShape(slides.ShapeType.Rectangle, 100, 100, 200, 100);

    const closed = isGeometryClosed(shape);
    console.log(closed);
} finally {
    presentation.dispose();
}

提取并检查形状元素

使用GeometryShape.createShapeElements可将现有形状检查为包含路径点和点类型的元素。对每个返回的ShapeElement使用getPathPoints和getPathTypes方法获取点和类型数组。此表示法适用于轮廓分析或将几何传递给自定义绘图工具。

示例打开 input.pptx，在第一张幻灯片上直接查找第一个几何形状，并打印其路径段。请使用包含直线段和曲线段的形状的演示文稿，以观察两种输出。它不会在组内部搜索。

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation("input.pptx");
try {
    const slide = presentation.getSlides().get_Item(0);

    let shape = null;
    for (let index = 0; index < slide.getShapes().size(); index++) {
        const candidate = slide.getShapes().get_Item(index);
        if (java.instanceOf(candidate, "com.aspose.slides.GeometryShape")) {
            shape = candidate;
            break;
        }
    }

    if (shape == null) {
        console.log("No geometry shape found on the first slide.");
    } else {
        for (const shapeElement of shape.createShapeElements()) {
            const points = shapeElement.getPathPoints();
            const types = shapeElement.getPathTypes();
            console.log("Shape element:");

            for (let i = 0; i < points.length; i++) {
                const pointType = types[i] & 0x07; // 保留段类型，排除标志。
                switch (pointType) {
                    case 0:
                        console.log("Start figure at " + points[i]);
                        break;
                    case 1:
                        console.log("Line to " + points[i]);
                        break;
                    case 3:
                        console.log("Cubic Bezier: controls " + points[i] + ", " + points[i + 1] + "; end " + points[i + 2]);
                        i += 2; // 消耗两个控制点和终点。
                        break;
                }

                if ((types[i] & 0x80) != 0) {
                    console.log("Close subpath back to its starting point.");
                }
            }
        }
    }
} finally {
    presentation.dispose();
}

数组通过索引对应：points[i] 为点，types[i] 描述其角色。类型 0 开始一个图形，类型 1 从前一点绘制到当前点的直线。三次 Bézier 段从前一个终点开始，使用连续的三个类型 3 条目：两个控制点后跟新的终点。循环一次性消耗这三个条目，并检查终点是否闭合。

点类型还包含标志。使用 0x07 掩码可识别段类型，单独检测 0x80 可判断闭合子路径。例如，129 (0x81) 表示闭合子路径的直线终点，131 (0x83) 表示闭合的 Bézier 终点。Java 将这些标志存储在有符号字节中；掩码能够保留预期的位值。仅比较原始值为 1 或 3 会遗漏这些情况。其他标志如虚线 (0x10) 和标记 (0x20) 不会改变基本段类型。

坐标与变换。 点的单位是 point（1/72 英寸），X 向右增大，Y 向下增大。对于未分组的形状，提取的坐标已经包含了通过getX和getY返回的位置，并反映了当前宽高。例如，位于 (100, 200)、尺寸为 120 × 80 的未旋转矩形其轮廓边界为 (100, 200)–(220, 280)。不要再次加上形状的位置。减去其 X 和 Y 可得到相对于未旋转框架的坐标。

提取的点不考虑形状的旋转（由getRotation返回）以及水平和垂直翻转。若要复现显示的轮廓，需要围绕形状中心应用这些变换。对于分组形状，还需考虑组坐标映射和相应的变换；不要假设提取的点已经是最终渲染的幻灯片坐标，也不要对已在子框架中体现的平移或缩放再次应用。

检查 vs 编辑。 提取的数组仅描述轮廓，修改它们不会更新原始形状。若您的分析或绘图代码需要点/类型数组，请使用此方式。若需要在形状本地坐标系中获取几何命令或编辑几何，请使用getGeometryPaths。通过setGeometryPath或setGeometryPaths应用编辑后的路径。

将 Java AWT Shape 转换为 GeometryPath

本示例将矩形轮廓与转换后的文字结合。轮廓的setFillMode方法关闭填充。GlyphVector在java.awt.Shape中创建文字轮廓。其PathIterator提供移动、直线、二次、三次和闭合段，示例将其重放到GeometryPath上。

Java 桥接使用显式的 float 和 byte 值作为对应的 Java 参数。迭代器将坐标写入 Java float 数组；反射将更新后的值读回 JavaScript。文字使用 40 点 Arial 字体。轮廓在水平方向偏移 20 点，且其视觉顶部位于形状顶部下方 10 点。文字路径填充，而原始矩形保持为轮廓。通过GeometryShape.setGeometryPaths同时应用两条路径，可生成一个包含矩形和文字的单一形状。

const slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const shape = slide.getShapes().addAutoShape(slides.ShapeType.Rectangle, 100, 100, 300, 100);
    
    const originalPath = shape.getGeometryPaths()[0];
    originalPath.setFillMode(java.newByte(slides.PathFillModeType.None));

    const font = java.newInstanceSync("java.awt.Font", "Arial", java.getStaticFieldValue("java.awt.Font", "PLAIN"), 40);
    const image = java.newInstanceSync("java.awt.image.BufferedImage", 100, 100, java.getStaticFieldValue("java.awt.image.BufferedImage", "TYPE_INT_ARGB"));
    const graphics = image.createGraphics();
    let graphicsPath;
    try {
        const fontContext = graphics.getFontRenderContext();
        const glyphVector = font.createGlyphVector(fontContext, "Text in shape");
        const textBounds = glyphVector.getVisualBounds();
        const baseline = java.newFloat(-textBounds.getY() + 10);
        graphicsPath = glyphVector.getOutline(java.newFloat(20), baseline);
    } finally {
        graphics.dispose();
    }

    const textPath = new slides.GeometryPath();
    const pathIterator = graphicsPath.getPathIterator(null);
    const coordinates = java.newArray("float", [0, 0, 0, 0, 0, 0]);

    while (!pathIterator.isDone()) {
        const segmentType = pathIterator.currentSegment(coordinates);
        const points = [];
        for (let i = 0; i < 6; i++) {
            const coordinate = java.callStaticMethodSync("java.lang.reflect.Array", "getFloat", coordinates, i);
            points.push(java.newFloat(coordinate));
        }
        switch (segmentType) {
            case 0: // 移动到。
                textPath.moveTo(points[0], points[1]);
                break;
            case 1: // 直线到。
                textPath.lineTo(points[0], points[1]);
                break;
            case 2: // 二次贝塞尔曲线。
                textPath.quadraticBezierTo(points[0], points[1], points[2], points[3]);
                break;
            case 3: // 三次贝塞尔曲线。
                textPath.cubicBezierTo(points[0], points[1], points[2], points[3], points[4], points[5]);
                break;
            case 4: // 闭合图形。
                textPath.closeFigure();
                break;
        }
        pathIterator.next();
    }
    textPath.setFillMode(java.newByte(slides.PathFillModeType.Normal));
    const paths = java.newArray("com.aspose.slides.GeometryPath", [originalPath, textPath]);
    shape.setGeometryPaths(paths);
} finally {
    presentation.dispose();
}

常见问题解答

替换几何后，填充和轮廓会怎样？

样式仍然保留在形状上，仅轮廓发生变化。填充和轮廓会自动应用到新的几何上。

如何让自定义形状连同其几何一起正确旋转？

使用形状的setRotation方法；几何会随形状一起旋转，因为它绑定到形状自己的坐标系。

能否将自定义形状转换为图像以“锁定”结果？

可以。将所需的幻灯片区域或形状本身导出为栅格格式，这会简化对复杂几何的后续处理。