Giter VIP home page Giter VIP logo

canvas-excel's Introduction

canvas-excel

基于Canvas开发的Excle技术预研

在线预览

demo

运行

git clone https://github.com/bojue/canvas-excel.git

npm install 

npm run dev //本地运行
 
npm run build //构建生产包

浏览器打开

http://localhost:4000/

Excel单元格对象定义

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当前单元格

单元格

  • 单元格文字属性设置
  • 单元格文字左右边界处理
  • 单元格选取
  • 单元格输入
  • 单元格合并/取消合并

区域选择

  • 区域选择
  • 区域内容设置
  • 按行,列选择单元格
  • 合并单元格交互

优化方法

  • 局部渲染
  • 节流
  • 减少绘制
  • 拆分计算
  • 对象缓存

优化方案简单记录

TODO

  • 单元格文字上下边界处理
  • 局部渲染进一步优化
  • X,Y页面滚动
  • 单元格输入框光标位置(重构出来的bug)

Doing

  • 重构-excel组件化(Donging)
  • 重构-引入状态管理

目前组件化根据excel的功能布局拆分,多层级需要引入状态管理的内容

canvas-excel's People

Contributors

bojue avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.