Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bojue/canvas-excel
基于Canvas开发Excel的技术预研项目(React)
https://github.com/bojue/canvas-excel
Last synced: 2 months ago
JSON representation
基于Canvas开发Excel的技术预研项目(React)
- Host: GitHub
- URL: https://github.com/bojue/canvas-excel
- Owner: bojue
- Created: 2020-07-31T12:30:53.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-06T04:20:14.000Z (almost 3 years ago)
- Last Synced: 2024-08-03T09:13:11.835Z (6 months ago)
- Language: TypeScript
- Homepage: https://bojue.github.io/canvas-excel
- Size: 975 KB
- Stars: 70
- Watchers: 2
- Forks: 11
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-star - canvas-excel
README
# canvas-excel
基于Canvas开发的Excle技术预研
[在线预览](https://bojue.github.io/canvas-excel)
## 运行
```javaScript
git clone https://github.com/bojue/canvas-excel.git
npm install
npm run dev //本地运行
npm run build //构建生产包
```
### 浏览器打开
```javaScript
http://localhost:4000/
```
### Excel单元格对象定义
```javaScript
ExcelDataItem = [
[
'colums', // 列数
'rows', // 行数,
],
'txt', // 内容类型 txt|img|...
'value', // 内容
{
'text':{
'color':'#000',
'fontStyle': 'normal' || 'italic',
'fontFamily':'微软雅黑',
'fontSize':10,
'fontWeight': 'normal' || 'bold',
'lineHeight':10,
'textAlign': 'center' || 'right' || 'center',
},
'line':{
'textLine':'underline' || 'normal'
},
'rect': {
'fillStyle':"#fff"
}
}
]
```
> 待优化方案
1. 工具栏文字输入节流优化/局部映射渲染
2. 二分法判断单元格区域选择坐标
3. 双缓存处理区域选择交互
### 实现功能
#### 工具栏
- 设置属性工具栏
- 当前选中单元格属性映射到属性单元格（字体大小，样式，颜色，背景）
- Excel下标工具栏拖拽改变大小
- 工具栏输入内容映射Exacel当前单元格
#### 单元格
- 单元格文字属性设置
- 单元格文字左右边界处理
- 单元格选取
- 单元格输入
- 单元格合并/取消合并
#### 区域选择
- 区域选择
- 区域内容设置
- 按行,列选择单元格
- 合并单元格交互
### 优化方法
- 局部渲染
- 节流
- 减少绘制
- 拆分计算
- 对象缓存
[优化方案简单记录](https://github.com/bojue/canvas-excel/issues/5)
## TODO
- 单元格文字上下边界处理
- 局部渲染进一步优化
- X,Y页面滚动
- 单元格输入框光标位置（重构出来的bug）
## Doing
- 重构-excel组件化（Donging）
- 重构-引入状态管理
目前组件化根据excel的功能布局拆分，多层级需要引入状态管理的内容