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

文本框

语法

slide.addText(TEXT,OPTIONS);

参数TEXT有多种形式：

字符串：slide.addText('我是一串文本',OPTIONS);
对象数组：slide.addText([{text:'我是一串文本'}],OPTIONS);
- 对象数组中的每一个元素有两个属性，一个是必填的text属性，代表字符串的文本，一个是选填的属性options，代表对同一元素的text的差异化配置，如果options不填，则会使用OPTIONS中的属性进行渲染。

配置属性

常用的文本框属性有以下几种：

内容
位置
大小
填充
线条
对齐方式
阴影
轮廓
发光
上下标
超链接
字体

以上属性在PptxGenJS中均可实现，接下来让我们一个一个尝试：

内容

内容就是文本框中的文本内容，与内容相关常用的属性有以下几个：

字体大小：fontSize
- 数值类型的值，取值范围：1~256，单位是px，比如：fontSize:16；
字族：fontFace
- 字符串类型，值是字族的名称，比如说：fontFace:'微软雅黑'；
字体颜色：color
- 字符串类型，值是16进制颜色值，不带#号，比如说：color:'FF0000'；
斜体：italic
- 布尔类型，值为true代表开启斜体，默认为false；
粗体：bold
- 布尔类型，值为true代表开启粗体，默认为false；
水平对齐方式：align；
- 字符串类型，三个可选值：left,center,right，默认左对齐left；
垂直对齐方式：valign
- 字符串类型，三个可选值：top(t),middle(m),bottom(b)，括号中是缩写，比如 valign:'m'

我们使用上面的属性写下如下代码：

s.addText('一串文本', {
    ...xywh(1, 2, 8, 4),
    fontSize: 32, // 字体大小
    fontFace: '楷体', // 楷体字族
    color: '00FF00', // 绿色字体
    italic: true, // 开启斜体
    bold: true, // 开启粗体
    align: 'center', // 水平居中
    valign: 'b', // 垂直置底
})

可以得到如下图的结果

文本框样式

除了文本内容，我们还可以给文本框设置样式，比如下面几个常用的属性：

填充：fill
- 字符串类型，值为16进制颜色值，不带#号，表示用什么颜色填充文本框；
线条：line
- 对象类型，表示给文本框添加边框；
圆角：rectRadius
- 数值类型，单位是英寸，表示给文本框添加圆角；
阴影：shadow
- 对象类型，表示给文本框添加阴影效果；

线条对象：{width:'2',color:'FF0000'}，width表示边框宽度，color表示边框颜色；

阴影对象: 该配置项有5个属性，如下

type：阴影类型
- 阴影可以分为 inner 内阴影和 outer 外阴影两种，默认是外部阴影。
angle：阴影角度
- 数值类型，单位是deg，取值范围在0~360之间；
blur：模糊尺寸
- 数值类型，单位是px，取值范围在1~256之间；
color：阴影颜色
offset：阴影偏移量
- 数值类型，单位是px，取值范围在1~256之间；
opacity：阴影透明度
- 数值类型，单位是百分比，取值范围是0~1；

通过上面的这些属性，我们可以写出如下的代码：

    s.addText('一串文本', {
        // ... 文本属性省略
        fill:'FF0000', // 填充红色,
        line:{
            width:5,
            color:'0000FF', // 蓝色边框
        },
        rectRadius:10, // 圆角
        shadow:{
            color:'FF00FF', // 紫色阴影
        }
    })

可以得到如下图的结果

文本的特殊效果

文本发光 - glow

通过 glow 属性可以实现文字发光效果，该属性的值是一个对象，有 size,opacity,color 3个属性，分别代表发光尺寸，透明度和发光颜色。

s.addText('一串文本', {
    // ... 省略
    glow: { size: 10, opacity: 0.75, color: '0088CC' }
})

文本轮廓 - outline

通过 outline 属性可以实现文字轮廓效果，该属性是一个对象，有 size,color 2个属性，分别代表轮廓尺寸和轮廓颜色。与文本发光相比，它少了一个透明度的选项。

s.addText('一串文本', {
    // ... 省略
    outline:{ size:1.5, color:'FF0000' }
})

文本超链接 - hyperlink

通过 hyperlink 属性可以实现文字超链接的功能，该属性是一个对象，有 url,slide 两个属性之一，url代表跳转去一个网址，slide则代表跳转到ppt中的某个页面。

s.addText('一串文本', {
    // ...
    hyperlink: {url:'https://github.com'}
})

一行文本多种样式

有时候，我们一行文本中会存在多种样式，比如说“衬衫的价格是九磅十五便士”这一句话中，衬衫两个字的颜色是红色的，九磅十五便士这几个字的大小要大个10px，要实现这种效果，就要使用TEXT参数的第二种形式：对象数组 了，比如说上面的需求我们可以这样实现：

s.addText([
    { text: '衬衫', options: { color: 'FF0000' } }, // 衬衫两个字的颜色是红色
    { text: '的价格是' }, // 这句话正常样式
    { text: '九磅十五便士', options: { fontSize: 24 } }
], { ...xywh(1, 2, 10, 4), fontSize: 14 })

文本高亮 - highlight

可以使用 highlight 属性实现文本高亮，这个属性的值是一个颜色值，代表高亮的颜色

s.addText([
    { text: '衬衫', options: { color: 'FF0000' } }, // 衬衫两个字的颜色是红色
    { text: '的价格是' }, // 这句话正常样式
    { text: '九磅十五便士', options: { fontSize: 24,highlight:'FF0000' } }
], { ...xywh(1, 2, 10, 4), fontSize: 14 })

文本上下标 - superscript/subscript

通过 superscript/subscript 两个属性可以指定文字的是否作为上下标，属性值是一个布尔值；

s.addText([
    { text: '衬衫', options: { superscript: true } }, // 衬衫两个字的颜色是红色
    { text: '的价格是' }, // 这句话正常样式
    { text: '九磅十五便士', options: { subscript: true } }
], { ...xywh(1, 2, 10, 4), fontSize: 14 })

文本下划线 - underline

通过 underline 属性可以实现文本下划线效果，该属性是一个对象，具体属性见下面介绍：

color：下划线颜色
style：下划线样式
- 字符串类型，可选值有：dash, dashHeavy, dashLong, dashLongHeavy, dbl, dotDash, dotDashHeave, dotDotDash, dotDotDashHeavy, dotted, dottedHeavy, heavy, none, sng, wavy , wavyDbl, wavyHeavy

s.addText('下划线文本', {
    ...xywh(1, 2, 10, 4), fontSize: 40, underline: {
        color: 'FF0000', style: 'dash'
    }
})

除了上面这些效果，还有文本旋转，文本换行，文本层级，文本内外边距，文本方向等效果，具体可以参考官方文档：PptxGenJS-Text文档

【PptxGenJS】文本框的基础教程

文本框

语法