开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

形状

语法

slide.addShape(SHAPE, OPTIONS);

• 第一个参数SHAPE表示形状的类型；
• 第二个参数OPTIONS表示形状的配置；

官方文档中只列举了几种比较常见的形状，比如说矩形 rect，圆形 ellipse，线条 line 等等。比如说我们想要添加一个矩形在页面上可以这样写：

s.addShape(ppt.ShapeType.rect, { ...xywh(1, 1, 5, 5),fill:'ff0000' });

这样就会在页面上生成一个宽高都为5厘米的红色填充的矩形了。

同时，我们可以通过查看 ShapeType 属性来确定我们可以绘制多少种形状：

console.log(ppt.ShapeType) // 179种形状

通过 for...in... 循环，我们可以每一页都生成一个形状，查看每个属性所代表的形状是什么。

for(const key in ppt.ShapeType){
    const s = ppt.addSlide(key)
    s.addShape(ppt.ShapeType[key],{ ...xywh(1, 1, 5, 5),fill:'ff0000' })
}

最后可以看到一共输出了179页PPT，每一页都有一个不同的形状：

形状的属性

形状的属性比较简单

• align：水平对齐
• fill：填充
• flipH：水平翻转
• flipV：垂直翻转
• hyperlink：超链接
• line：边框线条
• reactRadius：圆角
• rotate：旋转
• shadow：阴影
• shapeName：可选的形状名称

可以看到很多属性在文本框，表格，图片中都已经出现过了，这里就不重新复述了。

带文字的形状

上面这种是单纯的一个形状的写法，有时候，我们希望在形状上面写上一些文字，这个时候我们可能会想着先绘制一个形状，然后再绘制一个文本框，其实还有一个更简便的方法，我们的 addText 方法的配置项中可以有一个 shape 属性，它的值就是 addShape 方法的第一个参数，表示要绘制的形状是什么。

比如说我想在一个矩形上写上“我是一个矩形”，就可以像下面这样书写：

s.addText('我是一个矩形', {
    shape: ppt.ShapeType.rect,
    ...xywh(1, 1, 5, 5),
    color: '000000',
    fill: 'ff0000',
})

这样就会生成一个红色填充的矩形，上面用黑色写着“我是一个矩形”六个字了。

关于对形状的封装

上面的代码中我们也可以看到，想要绘制一个矩形，我们需要 ppt.ShapeType.rect 这样来获取到矩形，略显麻烦，而且还有一点就是，不够直观，像 rect 这种我们勉强说还能猜出来是一个矩形，但是没有一点英文功底估计很难想象到 ellipse 会是圆（特殊的椭圆）吧。

因此我们可以考虑对这个东西做一层封装，这样下次我们不是写 ppt.ShapeType.rect 而是直接 getShape('矩形')。

为了简便，不额外引入文件而是随时随地想用就用，我们考虑把 getShape 这个方法绑定到构造函数的原型上：

import pptxgenjs from 'pptxgenjs'
pptxgenjs.prototype.getShape = function (shapeName) {
    const rawShapeType = this.ShapeType // 原始形状类型
    // 构建新的形状类型
    const newShapeType = {}
    newShapeType['矩形'] = rawShapeType.rect
    // ... 其他形状如此类推
    return newShapeType[shapeName]
}

然后当我们想要在页面绘制一个矩形的时候，我们就可以这样了：

s.addText('我是一个矩形', {
    shape: ppt.getShape('矩形'),
    ...xywh(1, 1, 5, 5),
    color: '000000',
    fill: 'ff0000',
})

这样可以让我们的代码看起来可读性就更好了。