一个基于Vue3.x + Typescript + canvas实现的在线演示文稿。
在线体验地址二:http://ppt.money-into.com
npm install
npm run dev
- 历史记录(撤销、重做)
- 右键菜单
- 页面列表
- 页面新增
- 页面模版
- 页面删除
- 页面复制粘贴
- 页面排序
- 画布缩放、移动
- 页面背景设置
- 导出
- 导入
- 快捷键
- 元素添加
- 元素删除
- 元素复制粘贴
- 元素拖拽移动
- 元素旋转
- 元素缩放
- 元素多选(点选)
- 元素多选(框选)
- 元素全选
- 多元素组合
- 多元素批量编辑
- 元素锁定
- 元素吸附对齐
- 元素锁定缩放比例
- 元素层级调整
- 元素对齐到画布
- 元素对齐到其他元素
- 粘贴外部图片
- 元素动画
- 研究canvas文本编辑器
- 纵向文本
- 字体设置
- 字体大小设置
- 字体颜色设置
- 字体粗体设置
- 字体斜体设置
- 字体下划线设置
- 字体删除线设置
- 文本选中
- 光标移动
- 文本输入
- 回车换行
- 文本单个删除
- 删除选中文本
- 复制、剪切、粘贴文本
- 粘贴外来文本(不带格式)
- 粘贴外来文本(带格式)
- 文本设置行高
- 文本左对齐、居中、右对齐
- 填充色
- 透明度
- 边框
- 文字阴影
- 粘贴外来图片
- 裁剪
- 边框
- 阴影
- 填充色
- 透明度
- 填充色
- 边框
- 阴影
- 透明度
- 翻转
- 文本
- 条形图
- 柱状图
- 折线图
- 饼状图
- 漏斗图
- 编辑图表
- 图例显示及位置
- 图表标题
- 填充色
- 透明度
- 柱状图堆叠显示
- 边框
- 插入表格
- 边框
- 阴影
- 填充色
- 单元格填充色
- 文本
- 表格宽高调整
- 合并和拆分单元格
- 主题色设置
- 插入行
- 插入列
- 删除行
- 删除列
- 研究canvas播放视频
- 插入视频
- 视频渲染
- 视频播放暂停
- 视频进度点击调整
- 简单的视频全屏播放(直接使用video自带的全屏)
- 插入音频
- 研究公式
- 插入公式
- 编辑公式
- 填充色
- 透明度
- 边框
- 研究canvas实现元素动画
- 预览放映
- 预览元素动画
- 画笔功能
- 页面切换动画
- 网页唤醒或下载客户端
- 对应文件格式打开
- 编辑保存
- 另存为
npm install
npm run dev
npm run electron:build
- electron使用node 16 往上版本
- 由于目前一直在更新迭代,数据结构也在调整中,如果demo查看不了,可能是因为数据引起的,可以删除indexdb后刷新试试。
参考石墨文档
样式,使用canvas学习实现ppt功能