开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
官方文档
位置属性和尺寸属性
像元素的 xy 属性叫做位置属性，它代表元素在页面中的位置，它的坐标意义就是元素左上角的点在页面上的位置。
像元素的 wh 属性叫做尺寸属性，它代表元素的宽高，即元素在页面上占据的空间。
这4个属性的值都有两种形式，一种是具体的数值（单位英寸），一种是百分比。xw 这两个属性的百分比是相对于页面的宽度来计算的，yh 这两个属性的百分比则是相对于页面的高度来计算的。
要注意的是，无论是文本框，形状，图像还是表格，这些所有元素都必须指明它们的位置属性和尺寸属性，这样才能正常渲染。
单位
在PptxGenJS中，像元素的xy坐标，wh宽高这些属性的单位都是英寸，我们如果想要把元素准确的放置在页面的某个地方，就需要知道它距离页面左上角原点的相对位置，比如像下面的这个代码：
slide.addText('我是文本框', {x:1,y:1,w:1,h:1});
它意味着在相对页面左上角水平距离1英寸，垂直距离1英寸处添加一个宽为1英寸，高为1英寸，文本内容为“我是文本框”的一个文本框。
但是在我们平时使用的WPS中，元素在页面中的位置使用的单位是厘米，因此，我们需要写一个转换函数，来将厘米转换成英寸，从而使的元素能在页面中正确显示。
通过百度我们可以知道 1 (cm) = 0.393700787402 (inch)
因此可以写出下面的代码：
/**
* 厘米转英寸
* @param {number} cm 厘米
*/
export function inch(cm) {
// 不是数值类型就返回0
return typeof cm === 'number' ? cm * 0.3937007 : 0
}
使用方法如下：
slide.addText('我是文本框', {
x: inch(1),
y: inch(1),
w: inch(1),
h: inch(1)
});
上面的代码表示，在页面相对于左上角水平位置1厘米，垂直位置1厘米处，放置一个宽为1厘米，高为1厘米，文本内容为“我是文本框”的文本框。
又因为，页面上的每个元素都会用到 x,y,w,h 这4个属性，我们重复的写inch也是有点冗余，因此我们对inch函数进行再进一步的封装，封装为 xywh() 函数，封装代码如下：
/**
* 位置属性和大小属性辅助函数
*/
export function xywh(x, y, w, h) {
return {
x: inch(x),
y: inch(y),
w: inch(w),
h: inch(h)
}
}
经过这一层封装后，利用对象解构，像上面添加文本框的代码我们就可以写成如下形式：
slide.addText('我是文本框', { ...xywh(1, 1, 1, 1) });
这样就可以使的代码更加整洁。
元素层级
在PptxGenJS中，后写的元素要比先写的元素层级要高，比如说下面的代码：
slide.addText('我是先书写的文本框1', { ...xywh(1, 1, 1, 1) });
slide.addText('我是后书写的文本框2', { ...xywh(1, 1, 1, 1) });
文本框1和2在页面上占据相同的位置，因为文本框2的代码要后于文本框1书写，因此，文本框1的内容会被文本框2遮挡。
颜色
这里面的颜色只支持16进制的颜色值，要注意的是，颜色值中不能带上#号，比如说我想给文本颜色设定为红色，代码要如下：
{color:'FF0000'}
