Flutter中如果想要自定义绘制，那么你需要用到 CustomPaint 和 CustomPainter ; CustomPaint是Widget的子类。
const CustomPaint({
Key key,
this.painter,
this.foregroundPainter,
this.size = Size.zero,
this.isComplex = false,
this.willChange = false,
Widget child,
}) :super(key: key, child: child);
示例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Painter绘制直线'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: CustomPaint(
size: Size(300, 300),
painter:MyPainter() ,
),
)
);
}
}
class MyPainter extends CustomPainter {
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.fill //绘画风格，默认为填充
..strokeWidth = 5.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
canvas.drawLine(Offset(20, 20), Offset(100,100), _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return null;
}
}
定义画笔
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.fill //绘画风格，默认为填充
..strokeWidth = 5.0; //画笔的宽度
绘制直线（drawLine）
使用给定的涂料在给定点之间绘制一条线。 该行被描边，此调用忽略[Paint.style]的值。p1和p2参数为两个点的坐标 , 在这两点之间绘制一条直线。
class MyPainter extends CustomPainter {
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.fill //绘画风格，默认为填充
..strokeWidth = 5.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
canvas.drawLine(Offset(20, 20), Offset(100,100), _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return null;
}
}
image.png
绘制点（drawPoints)
绘制点也是非常的简单，3个参数分别为: PointMode枚举，坐标 list 和 paint。PointMode的枚举类型有三个，points（点），lines（线，隔点连接），polygon（线，相邻连接）
void drawPoints(PointMode pointMode, List points, Paint paint)
class MyPainter extends CustomPainter {
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.fill //绘画风格，默认为填充
..strokeWidth = 5.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
///PointMode的枚举类型有三个，points（点），lines（线，隔点连接），polygon（线，相邻连接）
canvas.drawPoints(
PointMode.points,
[
Offset(20.0, 40.0),
Offset(100.0, 120.0),
Offset(100.0, 220.0),
Offset(200.0, 220.0),
Offset(200.0, 120.0),
Offset(280.0, 40.0),
Offset(20, 40.0),
],
_paint
);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return null;
}
}
PointMode改为points
image.png
PointMode改为polygon, PointMode改为polygon，相邻点互相连接
image.png
PointMode改为lines。 PointMode为lines时，两个点相互连接，也就是说第一个和第二个点连接，第三个跟第四个连接，如果最后只有一个点就舍弃不连接了，在我们的例子中有7个点，所以图中只有三条连线。
image.png
绘制圆drawCircle
参数分别为:圆心的坐标、半径和paint即可。圆形是否填充或描边(或两者)由Paint.style控制。
void drawCircle(Offset c, double radius, Paint paint)
class MyPainter extends CustomPainter {
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.stroke //绘画风格，默认为不填充
..strokeWidth = 5.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
//绘制圆 参数(圆心，半径，画笔)
canvas.drawCircle(Offset(140,80), 80,_paint..color = Colors.green);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return null;
}
}
image.png
PaintStyle.fill 填充
image.png
绘制椭圆drawOval
制一个轴对称的椭圆形，参数为一个矩形和画笔paint.
void drawOval(Rect rect, Paint paint)
class MyPainter extends CustomPainter {
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.fill //绘画风格，默认为填充
..strokeWidth = 5.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
//使用左上和右下角坐标来确定矩形的大小和位置,椭圆是在这个矩形之中内切的
Rect rect = Rect.fromPoints(Offset(100.0, 40.0), Offset(220.0, 100.0));
canvas.drawOval(rect, _paint..color=Colors.green);
}
}
Rect也有多种构建方式: fromLTWH(double left, double top, double width, double height) 使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置
@override
void paint(Canvas canvas, Size size) {
//使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置
Rect rect = Rect.fromLTWH(100, 20, 100, 60);
canvas.drawOval(rect, _paint..color=Colors.green);
}
image.png
fromLTRB(double left, double top, double right, double bottom) 使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置
@override
void paint(Canvas canvas, Size size) {
//使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置
Rect rect = Rect.fromLTRB(30, 30, 160, 140);
canvas.drawOval(rect, _paint..color=Colors.green);
}
image.png
fromCircle({ Offset center, double radius }) 使用圆的圆心点坐标和半径和确定外切矩形的大小和位置
@override
void paint(Canvas canvas, Size size) {
//使用圆的圆心点坐标和半径和确定外切矩形的大小和位置
Rect rect = Rect.fromCircle(center: Offset(100, 40),radius: 60);
canvas.drawOval(rect, _paint..color=Colors.green);
}
image.png
绘制圆弧drawArc
首先还是需要Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制(圆弧是否向中心闭合)、以及paint.
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)
class MyPainter extends CustomPainter {
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.fill //绘画风格，默认为填充
..strokeWidth = 5.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
// Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度
Rect rect = Rect.fromCircle(center: Offset(100, 40),radius:80);
canvas.drawArc(rect,0.0,0.8,false,_paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return null;
}
}
圆弧向中心点闭合 将useCenter改成true，圆弧向中心点闭合了
@override
void paint(Canvas canvas, Size size) {
// Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度
const PI = 3.1415926;
Rect rect2 = Rect.fromCircle(center: Offset(100.0, 50.0), radius: 80.0);
canvas.drawArc(rect2, 0.0, PI / 2, true, _paint);
}
image.png
绘制圆角矩形drawDRRect
class MyPainter extends CustomPainter {
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.stroke //绘画风格，默认为填充
..strokeWidth = 5.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
//用Rect构建一个边长50,中心点坐标为100,100的矩形
Rect rect = Rect.fromCircle(center: Offset(140.0, 50.0), radius: 50.0);
//根据上面的矩形,构建一个圆角矩形
RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));
canvas.drawRRect(rrect, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return null;
}
}
image.png
绘制路径drawPath
绘制路径，首先需要一个要绘制的路径path，然后就是这个paint了。
方法名 作用
moveTo 将路径起始点移动到指定的位置
relativeMoveTo 相对于当前位置移动到
lineTo 从当前位置连接指定点
relativeLineTo 相对当前位置连接到
arcTo 曲线
conicTo 贝塞尔曲线
add** 添加其他图形，如addArc，在路径是添加圆弧
contains 路径上是否包括某点
transfor 给路径做matrix4变换
combine 结合两个路径
close 关闭路径，连接路径的起始点
reset 重置路径，恢复到默认状态
class MyPainter extends CustomPainter {
///[定义画笔]
Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round//画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..style = PaintingStyle.stroke //绘画风格，默认为填充
..strokeWidth = 5.0; //画笔的宽度
@override
void paint(Canvas canvas, Size size) {
//新建了一个path,然后将路径起始点移动到坐标(100,100)的位置
Path path = new Path()..moveTo(100.0, 100.0);
path.lineTo(200.0, 200.0);
canvas.drawPath(path, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return null;
}
}
绘制多个路径
@override
void paint(Canvas canvas, Size size) {
Path path = new Path()..moveTo(100.0, 100.0);
path.lineTo(200.0, 200.0);
path.lineTo(100.0, 300.0);
path.lineTo(150.0, 350.0);
path.lineTo(150.0, 500.0);
canvas.drawPath(path, _paint);
}
image.png