写在前面
绘制，无论对前端还是客户端，都是一个老生常谈的话题。作为一个开发，我们很多时候并不能完全的依赖美工切图，给图。我们需要自己的工具和方法——绘制（Paint）🖼。不知道有没有很多同学和我一样，刚开始接触绘制相关的代码部分时会有一些抵触或者说是恐惧，总觉得这一块非常的复杂、难写。不要急，今天我来带各位入门Flutter中的魔法🧙♂️——CustomPainter。
准备阶段
- 今天的代码我不再使用编辑器编写，因为不涉及业务逻辑的处理🤓，我用DartPad给各位演示。当然各位也可以使用编辑器来展现自己的代码，但是我还是很推荐大家使用Flutter官方提供的这个DartPad的，它充分展示了Flutter强大的适配能力，而且方便、简洁👍🏻。
- 学习Flutter中的绘制，对Android出生的同学来说是比较友好的，😀因为实现方式基本上与Android是一模一样。但是各位！不要担心，我会站在萌新的角度给大家介绍，毕竟是一个基础教程。
魔法开始
咒语 1：打开+新建
好家伙，开局就是一波小高潮，直接打开DartPad,左上角新建一个Flutter Pad,创建一个简单的Container嵌套，赋值Container的颜色属性✅。
咒语 2：魔法初现👀
我们的定制魔法来了，我们给它起一个个性化的名字，各位随意，我就叫VanGoghPaint，梵高的画。这幅画，就要继承我们今天的主角了——CustomPainter。
大家可以看到，继承了
CustomPainter之后，我们实现了父类的两个方法——paint、shouldRepaint。
paint: 顾名思义，就是我们创作的地方，我们在paint函数中尽情的创作，挥洒我们的笔墨🎉。shouldRepaint：控制绘制的重绘，主要用于动画、刷新等功能，作为一节基础课，这里我们直接返回false，不进行重绘了。
咒语的滑铁卢
此时，一大波兄弟眼疾手快，直接新建child！加入VanGoghPaint()!再接一个Run!🚫民工三连，发现结果，是这样的...
蛤？图呢？怎么就剩一小块了？额...，兄弟们，事情是这样的～
CustomPainter的祖先节点会默认的限制绘制区域的大小，如果你不设置的话，默认就是...0💡。所以嘛！给个大小就阔以了。其实这里，各位简单设置绘制上层Container的大小就行了，一个简单的数值，就可以恢复显示效果。但是，DartPad的显示区域的大小随着 代码 UI的分栏线拖动，比例可以一直变化，所以这里我做了一个优化，获取父控件大小！🔧引入一个小控件——LayoutBuilder,大家有兴趣可以去研究一下这个控件，对各位的适配很有帮助。
这是最终的效果，各位可以尝试拖动中间的分栏，体验一下适配效果👻。
咒语 3: 重整旗鼓
前面的步骤，算是我们几乎完成了所有前置工作吧，我们创建了一个很不错的画板，一副很不错的空白画，接下来就要开始发挥了！既然要画画，当然少不了一支画笔呀🤠！在Flutter中，我们用Paint定义画笔。
style: 画笔的样式，只有两种fill,stroke。填充和描边，比如说我们用笔画了一个正方形，这个正方形是空心还是实心呢？用style,一切都在你的掌握！🏄🏻strokeWidth: 画笔🖌️粗细。color：画笔🖌️颜色。
咒语 4: 下笔如有神
有笔有画布，简单画点？直接调用canvas的函数就可以画出你想要的图形，长方形、圆形、各种基础图形。先来个简单的，给大家整俩长方形🟦。
直接调用
canvas.drawRRect()方法，即可绘制圆角矩形。参数如上图代码中所示，我们定义了矩形的位置、长宽、圆角，再选择刚才创建的画笔。其他的教给我们的魔法画笔🧙♂️就可以了～。
你觉得矩形太简单？你太小看canvas了。来看看他有多少绘制方法吧，每一种都等着你去体验。
再给大伙整一个圆形🟡呗？原理和上面类似，选择绘制圆形的方法，定义圆心、半径，选择画笔。圆形就出现了。
除了基本图形，我们也可以通过连通多个点位，画出一个图形🌟。这也需要我们告诉我们画笔我们要画的路径，Flutter中我们用
Path定义。在下面我们定义了一条路径，是通过两个点位连接的，同时我们不想简单的连接两个点，我们给我们的路径加上了一个radius参数，让绘制附有曲线感🐳。
看看效果？
总感觉少了点什么？嗯～要张开嘴笑啊😆，简单，在定义一个点，和我们的起点重合，画笔再画回去就行了，但是弧度不能一样，不然重合了～
clockwise：顺时针绘制还是逆时针绘制。
尾声
今天简单给各位介绍了一些Flutter绘制的基础知识，希望各位能有所收获，后续我也会深入研究一些Flutter的绘制操作，欢迎各位关注我的博客。
- 参考文章
- 项目源码（DartPad）
- 这副笑脸送给大家，希望大家在生活、工作中遇到困难，挫折，都保持乐观，没有一帆风顺的人生。总在跌倒、困境、迷茫中徘徊的你终会露出美好的笑容🎆😛。