【PPTist】基础元素介绍

一、基础元素类型

PPTist 中所有的元素都继承自 PPTElement 基础类型,包含以下几种:

  • 文本元素 (PPTTextElement)
  • 图片元素 (PPTImageElement)
  • 形状元素 (PPTShapeElement)
  • 线条元素 (PPTLineElement)
  • 图表元素 (PPTChartElement)
  • 表格元素 (PPTTableElement)
  • LaTeX元素 (PPTLatexElement)
  • 视频元素 (PPTVideoElement)
  • 音频元素 (PPTAudioElement)

二、元素通用属性 (PPTBaseElement)

属性 类型 说明
id string 元素ID
left number 元素水平方向位置(距离画布左侧)
top number 元素垂直方向位置(距离画布顶部)
width number 元素宽度
height number 元素高度
rotate number 旋转角度
lock? boolean 锁定元素
groupId? string 组合ID
link? PPTElementLink 超链接
name? string 元素名

超链接 (PPTElementLink)

属性 类型 说明
type 'web' | 'slide' 链接类型(网页、幻灯片页面)
target string 目标地址(网页链接、幻灯片页面ID)

三、通用样式定义

元素阴影 (PPTElementShadow)

属性 类型 说明
h number 水平偏移量
v number 垂直偏移量
blur number 模糊程度
color string 阴影颜色

元素边框 (PPTElementOutline)

属性 类型 说明
style? 'dashed' | 'solid' 边框样式(实线或虚线)
width? number 边框宽度
color? string 边框颜色

四、具体元素定义

1. 文本元素 (PPTTextElement)

属性 类型 说明
type 'text' 元素类型
content string 文本内容(HTML字符串)
defaultFontName string 默认字体
defaultColor string 默认颜色
outline? PPTElementOutline 边框
fill? string 填充色
lineHeight? number 行高(倍)
wordSpace? number 字间距
opacity? number 不透明度
shadow? PPTElementShadow 阴影
paragraphSpace? number 段间距
vertical? boolean 竖向文本

2. 图片元素 (PPTImageElement)

属性 类型 说明
type 'image' 元素类型
src string 图片地址
fixedRatio boolean 固定图片宽高比例
outline? PPTElementOutline 边框
filters? ImageElementFilters 图片滤镜
clip? ImageElementClip 裁剪信息
flipH? boolean 水平翻转
flipV? boolean 垂直翻转
shadow? PPTElementShadow 阴影
colorMask? string 颜色蒙版

3. 形状元素 (PPTShapeElement)

属性 类型 说明
type 'shape' 元素类型
viewBox [number, number] SVG的viewBox属性
path string 形状路径
fixedRatio boolean 固定形状宽高比例
fill string 填充色
gradient? ShapeGradient 渐变
outline? PPTElementOutline 边框
opacity? number 不透明度
flipH? boolean 水平翻转
flipV? boolean 垂直翻转
shadow? PPTElementShadow 阴影
special? boolean 特殊形状标记
text? ShapeText 形状内文本
pathFormula? ShapePathFormulasKeys 形状路径计算公式
keypoints? number[] 关键点位置百分比

4. 线条元素 (PPTLineElement)

属性 类型 说明
type 'line' 元素类型
start [number, number] 起点位置
end [number, number] 终点位置
style string 线条样式
color string 线条颜色
points [LinePoint, LinePoint] 端点样式
shadow? PPTElementShadow 阴影
broken? [number, number] 折线控制点位置
broken2? [number, number] 双折线控制点位置
curve? [number, number] 二次曲线控制点位置
cubic? [[number, number], [number, number]] 三次曲线控制点位置

5. 图表元素 (PPTChartElement)

属性 类型 说明
type 'chart' 元素类型
fill? string 填充色
chartType ChartType 图表基础类型
data ChartData 图表数据
options? ChartOptions 图表配置项
outline? PPTElementOutline 边框
themeColor string[] 主题色
gridColor? string 网格&坐标颜色
legend? '' | 'top' | 'bottom' 图例/位置

6. 表格元素 (PPTTableElement)

属性 类型 说明
type 'table' 元素类型
outline PPTElementOutline 边框
theme? TableTheme 主题
colWidths number[] 列宽数组
cellMinHeight number 单元格最小高度
data TableCell[][] 表格数据

7. LaTeX元素 (PPTLatexElement)

属性 类型 说明
type 'latex' 元素类型
latex string latex代码
path string svg path
color string 颜色
strokeWidth number 路径宽度
viewBox [number, number] SVG的viewBox属性
fixedRatio boolean 固定形状宽高比例

8. 视频元素 (PPTVideoElement)

属性 类型 说明
type 'video' 元素类型
src string 视频地址
autoplay boolean 自动播放
poster? string 预览封面
ext? string 视频后缀

9. 音频元素 (PPTAudioElement)

属性 类型 说明
type 'audio' 元素类型
fixedRatio boolean 固定图标宽高比例
color string 图标颜色
loop boolean 循环播放
autoplay boolean 自动播放
src string 音频地址
ext? string 音频后缀

五、动画定义

元素动画 (PPTAnimation)

属性 类型 说明
id string 动画id
elId string 元素ID
effect string 动画效果
type AnimationType 动画类型(入场、退场、强调)
duration number 动画持续时间
trigger AnimationTrigger 动画触发方式

六、幻灯片页面定义

幻灯片页面 (Slide)

属性 类型 说明
id string 页面ID
elements PPTElement[] 元素集合
notes? Note[] 批注
remark? string 备注
background? SlideBackground 页面背景
animations? PPTAnimation[] 元素动画集合
turningMode? TurningMode 翻页方式
sectionTag? SectionTag 章节标记

幻灯片主题 (SlideTheme)

属性 类型 说明
backgroundColor string 页面背景颜色
themeColor string 主题色
fontColor string 字体颜色
fontName string 字体
outline PPTElementOutline 边框
shadow PPTElementShadow 阴影
相关推荐
RadiumAg1 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele1 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子3 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情3 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz3 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
天天扭码3 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html