【PptxGenJS】形状的基本使用教程
形状
语法
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',
})
这样可以让我们的代码看起来可读性就更好了。
转载自:https://juejin.cn/post/7171449204290945037