<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Custompainter on Website of SauceWu</title><link>https://saucewu.github.io/tags/custompainter/</link><description>Recent content in Custompainter on Website of SauceWu</description><generator>Hugo -- gohugo.io</generator><language>zh</language><lastBuildDate>Tue, 01 Apr 2025 13:00:00 +0900</lastBuildDate><atom:link href="https://saucewu.github.io/tags/custompainter/index.xml" rel="self" type="application/rss+xml"/><item><title>Flutter K线系统拆解（三）：渲染管线与绘制分层</title><link>https://saucewu.github.io/posts/flutter-k%E7%BA%BF%E7%B3%BB%E7%BB%9F%E6%8B%86%E8%A7%A3%E4%B8%89%E6%B8%B2%E6%9F%93%E7%AE%A1%E7%BA%BF%E4%B8%8E%E7%BB%98%E5%88%B6%E5%88%86%E5%B1%82/</link><pubDate>Tue, 01 Apr 2025 13:00:00 +0900</pubDate><guid>https://saucewu.github.io/posts/flutter-k%E7%BA%BF%E7%B3%BB%E7%BB%9F%E6%8B%86%E8%A7%A3%E4%B8%89%E6%B8%B2%E6%9F%93%E7%AE%A1%E7%BA%BF%E4%B8%8E%E7%BB%98%E5%88%B6%E5%88%86%E5%B1%82/</guid><description>&lt;h1 id="flutter-k线系统拆解三渲染管线与绘制分层"&gt;Flutter K线系统拆解（三）：渲染管线与绘制分层&lt;/h1&gt;
&lt;p&gt;这一篇聚焦渲染层最关键的问题：&lt;br&gt;
如何把复杂 K 线绘制从“巨型 paint 方法”重构成可维护、可扩展、可定位问题的阶段化系统。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="一渲染底座先算清楚再开始画"&gt;一、渲染底座：先算清楚，再开始画&lt;/h2&gt;
&lt;p&gt;一帧绘制开始前，建议先完成 5 件事：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;计算绘制区域（主图、成交量、副图）&lt;/li&gt;
&lt;li&gt;根据缩放和滚动计算可视区索引范围&lt;/li&gt;
&lt;li&gt;在可视区内扫描 max/min（主图、vol、副图）&lt;/li&gt;
&lt;li&gt;初始化渲染器&lt;/li&gt;
&lt;li&gt;构建并执行渲染管线&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;其中最影响性能的是两点：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;像素坐标反推数据索引&lt;/li&gt;
&lt;li&gt;只绘制可见区，不遍历全量数据&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;滚动和缩放能否稳定流畅，基本就看这一步是否扎实。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="二渲染器组装把画什么与怎么调度分开"&gt;二、渲染器组装：把“画什么”与“怎么调度”分开&lt;/h2&gt;
&lt;p&gt;渲染层建议把主图、成交量、副图拆成独立渲染器，由装配层按当前模式组合：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;主图：&lt;code&gt;CandleRenderer&lt;/code&gt; 或 &lt;code&gt;TimeLineRenderer&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;成交量：&lt;code&gt;VolRenderer&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;副图：&lt;code&gt;SecondaryRenderer&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;再通过策略层控制是否启用某些区域（比如成交量、副图）。&lt;/p&gt;</description></item></channel></rss>