{"id":13672864,"url":"https://github.com/bojue/canvas-excel","last_synced_at":"2025-04-28T04:30:32.741Z","repository":{"id":124203630,"uuid":"284032210","full_name":"bojue/canvas-excel","owner":"bojue","description":"基于Canvas开发Excel的技术预研项目(React)","archived":false,"fork":false,"pushed_at":"2022-03-06T04:20:14.000Z","size":998,"stargazers_count":70,"open_issues_count":6,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-03T09:13:11.835Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bojue.github.io/canvas-excel","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bojue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-07-31T12:30:53.000Z","updated_at":"2024-07-08T08:53:53.000Z","dependencies_parsed_at":"2024-01-17T04:18:46.313Z","dependency_job_id":null,"html_url":"https://github.com/bojue/canvas-excel","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bojue%2Fcanvas-excel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bojue%2Fcanvas-excel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bojue%2Fcanvas-excel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bojue%2Fcanvas-excel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bojue","download_url":"https://codeload.github.com/bojue/canvas-excel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224095113,"owners_count":17254824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:53.068Z","updated_at":"2024-11-11T11:30:25.651Z","avatar_url":"https://github.com/bojue.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# canvas-excel\n\n基于Canvas开发的Excle技术预研\n\n[在线预览](https://bojue.github.io/canvas-excel)\n\n\n![demo](https://user-images.githubusercontent.com/14350577/156909030-4816fa59-b44d-48e4-9bc2-b0f5cacbded9.PNG)\n\n\n## 运行\n\n```javaScript\ngit clone https://github.com/bojue/canvas-excel.git\n\nnpm install \n\nnpm run dev //本地运行\n \nnpm run build //构建生产包\n\n```\n\n### 浏览器打开\n\n```javaScript\nhttp://localhost:4000/\n```\n### Excel单元格对象定义\n\n```javaScript\nExcelDataItem = [\n    [\n        'colums',    // 列数\n        'rows',      // 行数,\n    ],     \n    'txt', // 内容类型 txt|img|...\n    'value', // 内容\n    {\n        'text':{\n            'color':'#000',\n            'fontStyle': 'normal' || 'italic',\n            'fontFamily':'微软雅黑',\n            'fontSize':10,\n            'fontWeight': 'normal' || 'bold',\n            'lineHeight':10,\n            'textAlign': 'center' || 'right' || 'center',\n        },\n        'line':{\n            'textLine':'underline' || 'normal'\n        },\n        'rect': {\n            'fillStyle':\"#fff\"\n        }\n    }\n]\n```\n\n\u003e 待优化方案\n\n1. 工具栏文字输入节流优化/局部映射渲染\n2. 二分法判断单元格区域选择坐标\n3. 双缓存处理区域选择交互\n\n\n### 实现功能\n\n#### 工具栏\n\n- 设置属性工具栏\n- 当前选中单元格属性映射到属性单元格（字体大小，样式，颜色，背景）\n- Excel下标工具栏拖拽改变大小\n- 工具栏输入内容映射Exacel当前单元格\n\n#### 单元格\n\n- 单元格文字属性设置\n- 单元格文字左右边界处理\n- 单元格选取\n- 单元格输入\n- 单元格合并/取消合并\n\n#### 区域选择\n\n- 区域选择\n- 区域内容设置\n- 按行,列选择单元格\n- 合并单元格交互\n\n### 优化方法\n\n- 局部渲染\n- 节流\n- 减少绘制\n- 拆分计算\n- 对象缓存\n\n[优化方案简单记录](https://github.com/bojue/canvas-excel/issues/5)\n\n## TODO\n\n- 单元格文字上下边界处理\n- 局部渲染进一步优化\n- X,Y页面滚动\n- 单元格输入框光标位置（重构出来的bug）\n\n## Doing\n\n- 重构-excel组件化（Donging）\n- 重构-引入状态管理 \n\n\n目前组件化根据excel的功能布局拆分，多层级需要引入状态管理的内容\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbojue%2Fcanvas-excel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbojue%2Fcanvas-excel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbojue%2Fcanvas-excel/lists"}