Flutter: Canvas 与Paint【画布与画笔】

画笔和画布是android中自定义的难点。Flutter中也是如此。通过这2个东西，构建出想要的view.

利用Path还可以实现贝塞尔曲线。

Canvas相关方法：

方法	功能
drawLine()	画直线
drawCricle()	画圆
drawOval()	画椭圆
drawRect()	画矩形
drawPoints()	画点
drawArc()	画圆弧

Paint类参数：

属性名	类型	参考值	功能
color	Colors	Colors.blueAccent	画笔颜色
strokeCap	StrokeCap	StrokeCap.round	画笔笔触类型
isAntiAlias	bool	true	是否启动抗锯齿
blendMode	BlendMode	BlendMode.exclusion	颜色混合模式【官网可查】
style	PaintingStyle	PaintingStyle.fill	绘画样式，默认为填充
colorFilter	ColorFilter	ColorFilter.mode(Colors.blueAccent,BlendMode.exclusion)	颜色渲染模式，一般是矩阵效果来改变的，Flutter只能使用颜色混合模式
maskFilter	MaskFilter	MaskFilter.blur(BlurStyle.inner,3.0)	模糊遮罩效果，Flutter只有这个
filterQuality	FilterQuality	FilterQuality.high	颜色渲染模式的质量
stokeWidth	double	16.0	画笔的粗细

---

绘制直线：

---

绘制圆：

同理，只需要这一句：

改变stroke/fill可以实现空⚪和实心圆。

---

绘制椭圆：

调用canvas的drawOval()，并使用一个矩形来确定绘制的范围。因为在数学上，矩形的内切就是椭圆，正方形的内切就是⚪。

参数a：矩形的左上角坐标（用Offser(x,y)）

参数b：矩形的右下角坐标（用Offser(x,y)）

这里涉及了Rect的创建的方式：

Rect的创建方式是多样的。包括：

• fromPoints(Offset a ,offset b): 左上和右下角坐标来确定内切矩形的大小和位置。
• fromCircle({Offset center,double radius}):圆形的中心点坐标和半径确定外切矩形的大小和位置
• fromLTRB(left,top,right,bottom): 使用矩形的上下左右的X、Y边界值来确定矩形的大小和位置
• fromLTWH(left,top,width,height): 使用矩形的左上角的x、y坐标及矩形的宽高来确定矩形的大小和位置

---

绘制圆角矩形：

先创建矩形，再将其转换为圆形矩形，最后绘制。

---

绘制嵌套矩形：

canvas.drawDRRect()。

D是指的Double，可以绘制2个矩形。

嵌套矩形如果是填充样式，不会全部填充，中心位置留空。

---

绘制多个点：【python可视化的那种效果】

canvas.drawPoints()

PointMode的枚举类型有：

• points(点)
• lines(隔点连接线)
• polygon(相邻连接线)

---

绘制圆弧：

canvas.drawArc()

参数为绘制区域，弧度、画笔参数

//定义矩形：

Rect rect = Rect.fromCircle(center: Offser(100.0,0.0),radius: 100.0)

canvas.drawArc(rect,........)

---

重点：绘制路径Path

canvas.drawpath()绘制任意矢量图形。

主要方法	功能
moveTo	将路径起始点移动到指定的位置
lineTo	从当前位置连接到指定点
arcTo	曲线
conicTo	贝济埃曲线
close	关闭路径，连接路径的起始点

这个方法的示例在这篇博文：Flutter裁剪的最后一段