【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 阴影
相关推荐
用户938515635071 分钟前
从零构建 React Todo 应用:组件化设计与数据流深度解析
前端·javascript
IT_陈寒3 分钟前
Python线程池把我坑惨了,这些盲区你不踩?
前端·人工智能·后端
mONESY8 分钟前
从 DeepSeek WebGPU 输入框,吃透 React+TS 四大核心开发实践
javascript·后端
程序员爱钓鱼28 分钟前
第一个 Go 程序:Hello World
前端·后端·go
阳光是sunny32 分钟前
LangGraph 核心概念详解:从编译到可视化
前端·人工智能·后端
寒水馨1 小时前
macOS下载、安装electron-v43.2.0(附安装包electron-v43.2.0-darwin-arm64.zip)
javascript·macos·electron·node.js·跨平台·桌面应用开发·开源框架
不好听6131 小时前
React 父子组件通信:从 Todo 应用理解单向数据流
前端·react.js
光影少年1 小时前
RN 路由栈管理、页面销毁、返回拦截
javascript·react native·react.js
_lucas1 小时前
做了一个glsl在线调试工具
前端·javascript·three.js
To_OC9 小时前
LC 51 N 皇后:我以为难的是回溯,结果栽在了对角线下标
javascript·算法·leetcode