1. 绘制直线
绘制直线需要调用Canvas的drawLine方法,传入起点和终点坐标即可。
canvas.drawLine(Offset(20.0, 20.0), Offset(400.0, 20.0), _paint);
完整代码示例:
import 'package:flutter/material.dart';
class CustomView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 绘制直线示例',
home: new Scaffold(
appBar: AppBar(
title:
Text('CustomView 绘制直线', style: TextStyle(color: Colors.white)),
),
body: Center(
child: SizedBox(
width: 500.0,
height: 500.0,
child: CustomPaint(
painter: LinePainter(),
child: Center(
child: Text(
'绘制直线',
style: const TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w500,
color: Colors.blue),
),
),
),
),
),
));
}
}
class LinePainter extends CustomPainter {
Paint _paint = new Paint()
..color = Colors.green
..strokeCap = StrokeCap.square
..isAntiAlias = true
.. strokeWidth = 3.0
..style = PaintingStyle.fill;//填充绘制
@override
void paint(Canvas canvas, Size size) {
// 绘制图形,可替换部分
canvas.drawLine(Offset(20.0, 20.0), Offset(400.0, 20.0), _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
2. 绘制圆
绘制圆需要调用Canvas的drawCircle方法,传入中心点坐标、半径、画笔即可。
canvas.drawCircle(Offset(200.0, 20.0), 120.0, _paint);
将示例1中的绘制图形部分替换成上面的代码即可预览效果。
3. 绘制椭圆
绘制椭圆需要调用Canvas的drawOval方法,同时需要使用一个矩形来确定绘制的范围,椭圆是在这个矩形之中内切的,其中第一个参数为左上角坐标,第二个参数为右下角坐标。
Rect rect = Rect.fromPoints(Offset(80.0, 200.0), Offset(300.0, 300.0));
canvas.drawOval(rect,_paint);
将示例1中的绘制图形部分替换成上面的代码即可预览效果。
4. 绘制圆角矩形
绘制圆角矩形需要调用Canvas的drawRRect方法。
//创建一个中心的坐标为(200.0, 250.0),边长为100.0的矩形
Rect rect2 = Rect.fromCircle(center: Offset(200.0, 250.0), radius: 100.0);
//把矩形转换成圆角矩形,圆角角度为20.0
RRect rRect = RRect.fromRectAndRadius(rect2, Radius.circular(20.0));
//绘制圆角矩形
canvas.drawRRect(rRect,_paint);
将示例1中的绘制图形部分替换成上面的代码即可预览效果。
5. 绘制嵌套矩形
绘制嵌套矩形需要调用Canvas的drawDRRect方法。
Rect rect2 = Rect.fromCircle(center: Offset(200.0, 250.0), radius: 100.0);
Rect rect3 = Rect.fromCircle(center: Offset(200.0, 250.0), radius: 50.0);
//把矩形转换成圆角矩形,圆角角度为20.0
RRect rRect = RRect.fromRectAndRadius(rect2, Radius.circular(20.0));
RRect rRect2 = RRect.fromRectAndRadius(rect3, Radius.circular(20.0));
//绘制嵌套矩形
canvas.drawDRRect(rRect,rRect2,_paint);
将示例1中的绘制图形部分替换成上面的代码即可预览效果。
6. 绘制多个点
绘制多个点需要调用Canvas的drawPoints方法,传入的PointMode的枚举类型有三个值,points(点)、lines(隔点连接线)、polygon(相邻连接线)。
_paint.color = Colors.cyan;
_paint.strokeWidth = 20.0;
canvas.drawPoints(
PointMode.points,
[
Offset(100.0, 50.0),
Offset(120.0, 120.0),
Offset(150.0, 50.0),
Offset(200.0, 100.0),
Offset(250.0, 250.0),
Offset(300.0, 300.0),
],
_paint);
将示例1中的绘制图形部分替换成上面的代码即可预览效果。
7. 绘制圆弧
绘制圆弧需要调用Canvas的drawArc方法。
const PI = 3.1415926;
_paint.color = Colors.yellow;
_paint.strokeWidth = 2.0;
Rect rect = Rect.fromCircle(center: Offset(200.0, 250.0), radius: 100.0);
canvas.drawArc(rect, 0.0, PI/2, true, _paint);
将示例1中的绘制图形部分替换成上面的代码即可预览效果。
8. 绘制路径
绘制路径需要调用Canvas的drawPath方法。
_paint.color = Colors.deepOrange;
Path path = new Path()..moveTo(20.0, 100.0)
..lineTo(30.0, 180.0)
..lineTo(150.0, 250.0)
..lineTo(40.0, 300.0)
..lineTo(350.0, 500.0);
// 连接路径的起始点
// path.close();
canvas.drawPath(path, _paint);
将示例1中的绘制图形部分替换成上面的代码即可预览效果。