Flutter CustomPaint 使用介绍

CustomPaint class提供了让用户自定义widget的能力，它暴露了一个canvas，可以通过这个canvas来绘制widget，CustomPaint会先调用painter绘制背景，然后再绘制child，最后调用foregroundPainter来绘制前景，CustomPaint的定义如下

创新互联致力于成都网站设计、成都网站建设,成都网站设计,集团网站建设等服务标准化，推过标准化降低中小企业的建站的成本，并持续提升建站的定制化服务水平进行质量交付，让企业网站从市场竞争中脱颖而出。 选择创新互联，就选择了安全、稳定、美观的网站建设服务！

CustomPaint的绘制过程都将会交给CustomPainter来完成，CustomPainter是个抽象接口，在子类化CustomPainter的时候必须要重写它的 paint 跟 shouldRepaint 接口，可以根据自己的场景来选择性的重写 hitTest 跟 shouldRebuildSemantics 方法。

canvas--画布，真正的绘制是由canvas跟paint来完成的，画布提供了各种绘制的接口来绘制图形，除此以外画布还提供了平移、缩放、旋转等矩阵变换接口，画布都有固定大小跟形状，还可以使用画布提供的裁剪接口来裁剪画布的大小形状等等。

常用的绘制接口有 更多请查看官方文档

Paint---笔画，是用来设置在画布上面绘制图形时的一些笔画属性，如：颜色、线宽、绘制模式、抗锯齿等等。常用属性有 更多请查看官方文档

color ： 设置画笔颜色

isAntiAlias ： 设置画笔是否扛锯齿

shader : 着色器，填充形状或者画线时用到，如果没设置将会使用color

strokeWidth ： 设置画笔画线宽度

style ：绘制模式，画线或充满

下面这个例子来自于官方，通过 CustomPaint 画出了一个蓝天跟太阳出来

效果如下：

flutter贝塞尔曲线

1.要绘制贝塞尔线，我们需要四个点： 起点 ， 终点 和 两个控制点 ，如下图所示。移动控制点会改变曲线的斜率。您可以在此 在线工具中 使用控制点。

我们可以使用类Path的cubicTo方法绘制贝塞尔曲线：

使用控制点（x1，y1）和（x2，y2）添加从当前点到给定点（x3，y3）的曲线的三次贝塞尔曲线段。

如您所见，该cubicTo方法接受三个参数。其中两个是控制点，最后一个参数是终点。起点是您的笔已经位于画布上的位置。

不要忘记在画布坐标中，左上角是（0,0）点，右下角是（size.width，size.height）。因此，请尝试相应地调整四点：

请记住，paint对象就像我们的笔，我们将其颜色设置为蓝色，宽度设置为3。

我们用path对象描述了bezier路径。该moveTo方法已用于将笔移动到路径的起点。然后我们调用cubicTo方法来定义控制点和终点。之后，我们使用该drawPath方法绘制了路径。

贝塞尔曲线参考:

///推荐一些曲线图/折线图/柱状图参考:

all first_rank_v2~rank_v25-2-95632571.nonecaseutm_term=flutter%20%E5%8A%A8%E6%80%81%E7%BB%98%E5%88%B6%E6%9B%B2%E7%BA%BF

Flutter自定义绘制组件

Flutter中自定义组件一般有两种方式：

CustomPaint继承自SingleChildRenderObjectWidget，即它可以在通过嵌套引入到widget树中，并且可以有一个child子widget。它的构造方法如下：

painter和foregroundPainter需要接收CustomPainter对象，是CustomPaint核心。CustomPainter是进行UI绘制的核心类，绘制时, CustomPaint 首先在画布上调用 painter绘制 , 然后再绘制它的 child Widget, child 绘制完成后再调用 foregroundPainter 进行绘制。

size属性标识绘制区域大小，但当CustomPaint有child，该属性将会忽略，而使用child的大小为绘制区域大小。

isComplex和willChange用于控制绘制层缓存处理的，这里暂不讨论。

可实现CustomPainter子类进行UI绘制

实现paint方法进行真正的绘制，canvas是画布对象，size是绘制区域，是从CustomPaint中size属性传递得到的。绘制过程与Android原生开发十分类似，连API都十分相像，这点对熟悉Android原生开发者真是太友好了。

Paint对象是画笔对象，就是绘图工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格等，通过这些属性我们可以很方便的来定制自己的UI效果，在绘制的过程中可以定义多个画笔，以便实现多种风格图形的集合。

根据需求选择合适的画笔属性，完成你的绘制。

Canvas是绘制的画布，它包含了很多绘制方法，可以绘制出各种形状的图形。需要注意的是，画布是应用所有控件都在使用的, 所以通过这个画布其实是可以绘制充满屏幕的内容的，每次绘制都应该限制在本控件的区域(Size)内, 以免绘制覆盖到其他组件。

下面介绍下Canvas的绘制方法：

PointMode是个枚举

p1、p2为线段两个端点

Rect定义矩形的大小位置，有多种构造方式:

RRect描述圆角矩形，他通过Rect和Radius来构造

画圆比较简单，c表示圆心位置，radius是半径。

椭圆使用外接矩形确定大小位置，rect就是外接矩形。

绘制弧形，先确定弧形对应的椭圆，同样地用外接矩形rect确定椭圆，然后根据起始点和结束点角度来确定那一段弧度，startAngle，sweepAngle分别代表起始和结束点角度，角度用弧度表示法。

useCenter表示是否连接闭合形状，userCenter = false表示不闭合，即画一段弧线，userCenter = true表示闭合，即绘制一个扇形。

绘制路径，关键在于构建路径Path，可以直接new Path对象，然后通过path方法可以连接出图形，path关键方法如下：

还有其他方法，有兴趣可以查看API。

网页题目：flutter画线,flutter 裁剪
转载注明：http://azwzsj.com/article/hoocss.html