【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 阴影
相关推荐
hj5914_前端新手2 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法2 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku2 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode2 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu2 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu2 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu2 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu2 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu2 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在2 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net