Flutter 绘制探索

前言： 这篇文章来通过一个有趣的案例，介绍一下 绘制中的动画变换 ，以及如何在当前的变换基础上，叠加变换。如下所示，小车在界面上呈现的任何变动，都是变换矩阵作用的效果： 注: gif 图片为 15fp

前言 光阴似箭，《Flutter 绘制指南 - 妙笔生花》 转眼间已经发布两年半了，不知道各位练习得怎么样。有不少朋友问过如何将 Canvas 绘制的内容保存为图片，最近在做的东西刚好涉及了这块，通过

欢迎来到 Flutter 绘制实践系列，今天来的话题是： 数字显示管 ， 如下所示，展示 0~9 十个数字。通过观察不难发现，这十个数字是由 7 个管 的不同点亮状态决定的，管的编号如下所示。比如

本文，我们探索了 Flutter 绘制中，如何用 Canvas 绘制复杂的阴影样式。期间通过 BoxDecoration 在源码中的绘制逻辑，发现其本质是通过模糊遮罩来实现阴影效果。并借此思路，对 P

前言 在视频 【Flutter 绘制指南 | 第二集 · 坐标系】 中，实现了画板区域内的单位坐标系。今天来拓展一下，让坐标系支持变换，比如坐标系的平移和缩放，从而让坐标系的功能更加完备。 本文要实现

0. 前言展示 最近源码看得比较多，本文来画点东西调节下心情，本绘制已收录于 FlutterUnit 的绘制集录，本文源码可参见【windmill.dart】绘制内容非常简单，如下所示，两个样式的小

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 11 天，点击查看活动详情 前言 上一篇 《Flutter 绘制探索 | 扇形区域与点击校验》 中，我们已经实现了 扇形区域路

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 10 天，点击查看活动详情 0. 前言 今天来探索一个问题，如何绘制一块扇形的区域路径，并且如何校验触点是否落在 扇形区域 之

1. 进度填充:progress 2. 星星的角数:num 3. 星星的胖瘦:fat 4. 星星的颜色:fillColor和emptyColor 2. 创建好画板准备开画 四. 发布到pub

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 1 天，点击查看活动详情 0. 前言 在上传文件时，为了缓解等待的焦虑，一般希望显示上传的 进度，来给用户任务进度的 反馈。在

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 5 天，点击查看活动详情 前言 本文的目的在于绘制练习，将被收录在 FlutterUnit 的绘制集录当中。另外在 《Flutt

上一篇 《Flutter 绘制探索 | 来一起画箭头吧》 ，实现了一个可以自由拓展的箭头绘制小体系。线和箭头的旋转已经封装好了，只需要在矩形端点矩形域中提供路径即可。本文我们就来对端点的箭头路径进行拓

可能有人会觉得，画箭头有什么好说的，不就一根线加两个头吗？其实箭头的绘制还是比较复杂的，其中也蕴含着很多绘制的小技巧。箭头本身有着很强的 示意功能 ,通常用于指示、标注、连接。各种不同的箭

本文来探讨一下路径的变换，我们知道 Canvas 本身也支持变换，那 Path 的变换有什么必要性吗？和 Canvas 变换又有什么区别呢？如何在一次变换中叠加多种变换效果，任何人修改变换中心？这些都

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。 前情回顾： 在上一篇 《Flutter 绘制番外篇 - 数学中的角度知识》 中，我们研究了两点连线的角度问

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 前情回顾 上两篇我们通过对 svg 路径 M/H/V/L/C/Q/Z 几个指令的解析。把 掘金 logo

前言 上一篇《【Flutter 绘制番外】svg 文件与绘制 (上)》中，我们对 H、V、L 三个 svg 指令做了介绍，并通过正则表达式进行解析，生成 Flutter 绘制中的 Path 路径。 本

前言 对一些有趣的绘制 技能和知识， 我会通过 [番外篇] 的形式加入《Flutter 绘制指南 - 妙笔生花》小册中，一方面保证小册的“与时俱进” 和 “活力”。另一方面，是为了让一些重要的知识有个

前言： 对一些有趣的绘制 技能和知识， 我会通过 [番外篇] 的形式加入《Flutter 绘制指南 - 妙笔生花》小册中，一方面保证小册的“与时俱进” 和 “活力”。另一方面，是为了让一些重要的知识有

前言 对一些有趣的绘制技能和知识， 我会通过 [番外篇] 的形式加入《Flutter 绘制指南 - 妙笔生花》小册中，一方面保证小册的“与时俱进” 和 “活力”。另一方面，是为了让一些重要的知识有个