PptxGenJS 项目中的形状操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00661/article/details/148575441

PptxGenJS 项目中的形状操作详解

PptxGenJS Create PowerPoint presentations with a powerful, concise JavaScript API. 项目地址: https://gitcode.com/gh_mirrors/pp/PptxGenJS

概述

PptxGenJS 是一个强大的 JavaScript 库，用于生成 PowerPoint 演示文稿。其中，形状(Shape)功能是创建精美幻灯片的重要组成部分。本文将深入解析 PptxGenJS 中形状操作的核心功能和使用方法。

基础形状类型

PptxGenJS 提供了多种内置的基础形状类型：

矩形(RECTANGLE)：最基本的形状，可通过设置填充色、边框等属性进行自定义
椭圆形(OVAL)：圆形或椭圆形，支持透明度设置
圆角矩形(ROUNDED_RECTANGLE)：带有圆角的矩形，可调整圆角半径
三角形(RIGHT_TRIANGLE)：直角三角形，支持水平翻转
弧线(ARC)：可自定义角度范围的弧线
直线(LINE)：支持多种箭头类型和虚线样式

自定义几何形状

PptxGenJS 支持通过 CUSTOM_GEOMETRY 类型创建自定义形状，这是其最强大的功能之一。

自定义形状的创建方法

自定义形状通过定义一系列点(point)来构建，每个点可以有以下属性：

x/y：点的坐标位置
curve：定义曲线类型，支持二次贝塞尔曲线(quadratic)等
close：闭合路径的标志

示例代码解析

slide.addShape(pptx.shapes.CUSTOM_GEOMETRY, {
  x: 2.5, y: 2.6, w: 2.0, h: 1.0,
  fill: { color: pptx.colors.ACCENT3 },
  line: { color: "151515", width: 1 },
  points: [
    { x: 0.0, y: 0.0 },
    { x: 0.5, y: 1.0 },
    { x: 1.0, y: 0.8 },
    { x: 1.5, y: 1.0 },
    { x: 2.0, y: 0.0 },
    { x: 0.0, y: 0.0, curve: { type: "quadratic", x1: 1.0, y1: 0.5 } },
    { close: true },
  ],
});

这段代码创建了一个自定义多边形，最后通过二次贝塞尔曲线闭合路径。

形状的高级特性

1. 旋转与翻转

形状支持旋转和翻转操作：

rotate：设置旋转角度(如45度)
flipH：水平翻转

2. 线条样式

线条支持多种自定义选项：

dashType：虚线类型(lgDash, dashDot等)
width：线条宽度
beginArrowType/endArrowType：起始/结束箭头类型(triangle, diamond, oval等)

3. 填充效果

填充支持多种配置：

type：填充类型(solid为纯色)
color：填充颜色
transparency：透明度(0-100)

形状与文本结合

PptxGenJS 允许在形状中添加文本，只需在 addText 方法中指定 shape 参数即可：

slide.addText("RECTANGLE", {
  shape: pptx.shapes.RECTANGLE,
  x: 0.5, y: 0.8, w: 1.5, h: 3.0,
  fill: { color: pptx.colors.ACCENT1 },
  align: "center",
  fontSize: 14,
});