你真的了解Canvas吗--解密四【ZRender篇】

书接上文你真的了解Canvas吗--解密三【ZRender篇】

目录
        _doPaintList
         _doPaintEl
                ① flushPathDrawn
                ② setContextTransform 
                ③ getStyle 
                ④ bindPathAndTextCommonStyle
                ⑤ 主流程
        buildPath
        总结：

---

我们继续走主流程☕️☕️

• _doPaintList

1.第一个for循环用于填充数组layerList（通过之前提到的_zlevelList和_layers）

2.第二个for循环用于操作每个layer

先进行clear

layer.clear(false, clearColor, repaintRects);

Layer.js-clear()

再执行repaint函数

Painter.js

•  _doPaintEl

现实中函数并不止于此，这是简化了的结果

讲讲这个函数中涉及的5个函数

① flushPathDrawn

给scope对象增加数据

② setContextTransform 

设置初始setTransform

③ getStyle 

此处为el.style

④ bindPathAndTextCommonStyle

看得出是对一些初始的绘画属性做了处理

⑤ 主流程

设置scale部分也是一些基础操作，我们着重看createPathProxy-创建一个新的class PathProxy以及firstDraw中的主流程

Displayable.js

PathProxy.js-一些方法

接下来三张截图是图形绘制完成后的操作，我这边先列出来

_dirty更新

绘制边框

• buildPath

再来看buildPath函数（快结束了，坚持就是胜利） 

看到moveTo和bezierCurveTo是不是超熟悉了，没错，还差一步就好了

PathProxy.js

PathProxy.js

第一步都调用了addData函数

 好了，我们一遍流程算是走完了。大家做个眼保健操休息一下☕️

总结：

这是我们千辛万苦得到的结果，是不是很有成就感。虽然结果看着简单，但是里面的复杂程度只有我们经历过才知道，class之间的引用关系，class中的属性，一个个继承关系等等都凸显出复杂程度！！后续的Zrender文章我还是会更新，主要针对一些其他的图形或者是一些不是很热门的方法引入，下期见。。

注：文中涉及一些ctx-canvas的基础属性的设置我就不讲了（因为不涉及主流程），感兴趣的朋友可以于我评论或者私信我，我会把对应的方法给到大家

如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。