Luckysheet源码分析之5-Draw.js分析

返回目录

LuckySheet主界面的Draw方法

1. 实现逻辑说明

今天，我在ProcessOn上用思维导图方法把LuckSheet核心的主界面绘制Draw方法分析了一圈。
Draw.js的代码量约 2100行，外部是通过 refresh.js调用，

参考学习：w3school 的html5 canvas手册
下图是 draw.luckysheetDrawgrid() 的实现逻辑说明

2. 调用依赖关系图

下面这幅图是 draw.js的调用依赖关系图，可以看到四个主要的方法都是通过refresh.js 访问，其中luckysheetDrawgrid()=luckysheetDrawMain()+luckysheetDrawgridRowTitle()+luckysheetDrawgridColumnTitle()，后面三个绘制的零部件只是在单元格存在冻结的情况下，才会由 refresh.js 调用到。而 luckysheetDrawgrid() 的消费端就非常多了，只要是涉及到界面变化，都会被调用到，值得一提的是在页面初始化阶段，core.js通过调用 sheetmanage.initialjfFile() 完成最初的界面绘制工作。

3.用到的核心技能html5 cavas

路径:

beginPath() - 起始一条路径，或重置当前路径 https://www.w3school.com.cn/tags/canvas_beginpath.asp
moveTo() - 把路径移动到画布中的指定点，不创建线条 https://www.w3school.com.cn/tags/canvas_moveto.asp
lineTo() - 添加一个新点，然后在画布中创建从该点到最后指定点的线条 https://www.w3school.com.cn/tags/canvas_lineto.asp
closePath() - 创建从当前点回到起始点的路径 https://www.w3school.com.cn/tags/canvas_closepath.asp
stroke() - 绘制已定义的路径 https://www.w3school.com.cn/tags/canvas_stroke.asp
clip() - 从原始画布剪切任意形状和尺寸的区域 https://www.w3school.com.cn/tags/canvas_clip.asp

矩形:

fillRect() - 绘制“被填充”的矩形 https://www.w3school.com.cn/tags/canvas_fillrect.asp
rect() - 创建矩形 https://www.w3school.com.cn/tags/canvas_rect.asp
clearRect() - 在给定的矩形内清除指定的像素 https://www.w3school.com.cn/tags/canvas_clearrect.asp

图片:

drawImage() - 向画布上绘制图像、画布或视频 https://www.w3school.com.cn/tags/canvas_drawimage.asp

文本:

fillText() - 在画布上绘制“被填充的”文本 https://www.w3school.com.cn/tags/canvas_filltext.asp

旋转:

translate() - 重新映射画布上的 (0,0) 位置 https://www.w3school.com.cn/tags/canvas_translate.asp
rotate() - 旋转当前绘图 https://www.w3school.com.cn/tags/canvas_rotate.asp

颜色:

fillStyle - 设置或返回用于填充绘画的颜色、渐变或模式 https://www.w3school.com.cn/tags/canvas_fillstyle.asp
strokeStyle - 设置或返回用于笔触的颜色、渐变或模式 https://www.w3school.com.cn/tags/canvas_strokeStyle.asp

字体:

font - 设置或返回文本内容的当前字体属性 https://www.w3school.com.cn/tags/canvas_font.asp
textBaseline - 设置或返回在绘制文本时使用的当前文本基线 https://www.w3school.com.cn/tags/canvas_textbaseline.asp

渐变:

createLinearGradient - 创建线性渐变（用在画布内容上）https://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_filltext

其他:

save() - 保存当前环境的状态
restore() - 返回之前保存过的路径状态和属性