https://lucky-chen.github.io/zh/docs/client_front_end/2d_rendering/Recent content in 2D 渲染 on Chen's NotesHugozh-CNSun, 15 Mar 2020 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/2d_rendering/flutter-render-pipline-1/Sun, 15 Mar 2020 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/2d_rendering/flutter-render-pipline-1/<h1 id="概览">概览<a class="anchor" href="#%e6%a6%82%e8%a7%88" aria-label="Link"></a></h1> <ul> <li>将上一节中UI线程生成了<code>laytertree</code>，交给GPU线程的<code>rasterizer</code></li> <li>调用<code>LayerTree</code>的<code>Preroll</code>、<code>Paint</code>2个方法，完成所有<code>Layer</code>的绘制前准备以及绘制操作</li> <li>将纹理化的结果，上屏</li> </ul>https://lucky-chen.github.io/zh/docs/client_front_end/2d_rendering/flutter-render-pipline/Sun, 08 Mar 2020 00:00:00 +0000https://lucky-chen.github.io/zh/docs/client_front_end/2d_rendering/flutter-render-pipline/<h1 id="概览">概览<a class="anchor" href="#%e6%a6%82%e8%a7%88" aria-label="Link"></a></h1> <p>这一部分的主要工作是<code>WidgetTree</code>转化成<code>LayerTree</code>，主要分为下面几个阶段</p> <p><img src="https://user-gold-cdn.xitu.io/2018/8/8/16517c804ab5e799?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" /></p> <ul> <li>Animate: 首先执行动画，这个过程可能会改变状态state</li> <li>Build: 重新build脏节点的widget（状态改变）</li> <li>Layout: 对脏节点进行重新的layout</li> <li>Paint: 脏节点重新绘制</li> <li>更新layertree，提交给gpu线程</li> </ul> <p>流程还是比较清晰、容易理解的</p>