CustomPaint
使用实例和代码：
1.canvas.drawColor 绘制背景颜色
class MyPainter1 extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
//绘制背景颜色，整个UI 现在就是红色的
canvas.drawColor(Colors.red, BlendMode.srcATop);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
2.canvas.drawCircle 绘制圆
final whitePaint = Paint()..color = Colors.red;
//offset 位置，半径
canvas.drawCircle(const Offset(100, 100), 100, whitePaint);
3.canvas.drawRect绘四边形
//绘制四边形
final redPaint = Paint()..color = Colors.red;
// left:距离左边的距离, top：距离右边的距离, width, height
canvas.drawRect(Rect.fromLTWH(100, 100, 100, 100), redPaint);
//center 中心点的位置， 宽高，
canvas.drawRect(
Rect.fromCenter(center: Offset(50, 50), width: 100, height: 100),
redPaint);
//radius 半径
canvas.drawRect(
Rect.fromCircle(center: const Offset(50, 50), radius: 50), redPaint);
canvas.drawRect(
Rect.fromPoints(const Offset(50, 50), Offset(100, 100)), redPaint);
4.canvas.drawRRect 绘制圆角矩形
其他的方法可以自行尝试，参数大同小异
// left, top, right, bottom, radius
canvas.drawRRect(
RRect.fromLTRBR(100, 100, 200, 200, Radius.circular(20)), redPaint);
//可以设定不同边角弧度的
canvas.drawRRect(
RRect.fromLTRBAndCorners(100, 100, 200, 200,
topLeft: const Radius.circular(20)),
redPaint);
5.canvas.drawRRect 嵌套绘制
canvas.drawDRRect(
RRect.fromLTRBR(100, 100, 300, 300, const Radius.circular(20)),
RRect.fromLTRBR(150, 150, 200, 200, const Radius.circular(20)),
redPaint);
6.canvas.drawOval 绘制椭圆形
//椭圆形
canvas.drawOval(Rect.fromLTRB(100, 80, 400, 300), redPaint);
7.canvas.drawPath 绘制路径
final redPaint = Paint()
..color = Colors.red
..strokeWidth = 2.0
..style = PaintingStyle.stroke;
// final path = Path()
// ..moveTo(100, 100) //起始点
// ..lineTo(200, 200) //链接到点
// ..lineTo(400, 400) //链接到点
// ..close(); //关闭
// canvas.drawPath(path, redPaint);
final path1 = Path()
..moveTo(400, 400) //起始点
..lineTo(400, 500) //链接到点
..lineTo(400, 400) //链接到点
..addRect(Rect.fromLTRB(500, 500, 100, 100)) //新增一个矩形，或者其他的也可以
..close(); //关闭
//或者在这边添加也可以
// path1.addRect(Rect.fromLTRB(500, 500, 100, 100));
// path1.close();
canvas.drawPath(path1, redPaint);
8.canvas.drawArc 绘制弧形
// 绘制圆弧的形状
// rect:绘制一个矩形, startAngle：圆弧开始的角度, sweepAngle：开始到结束的角度大小, useCenter：是否闭合向着中心位置
canvas.drawArc(
Rect.fromPoints(Offset(0, 0), Offset(200, 200)), 0, 3.14, true, painit);
9.canvas.drawShadow绘制阴影
final painit = Paint()
..color = Colors.red
..strokeWidth = 10;
Path path = Path();
path
..moveTo(8, 200)
..lineTo(320, 400)
..lineTo(200, 340)
..lineTo(100, 460)
..close();
// path, color, elevation, transparentOccluder表示如果遮挡对象是透明的，应该为true，否则为false
canvas.drawShadow(path, Colors.green, 8.0, false);
canvas.drawPath(path, painit);
10.canvas.drawPoints 绘制点
List
Offset(100, 100),
Offset(200, 200),
Offset(300, 300),
Offset(100, 400),
Offset(500, 500),
Offset(441, 231),
];
//两个两个点绘制为一条线
// canvas.drawPoints(PointMode.lines, points, painit);
// 绘制点
// canvas.drawPoints(PointMode.points, points, painit);
// 点按照顺序连接起来
canvas.drawPoints(PointMode.polygon, points, painit);
11.绘制五角星
绘制完成之后close,起始点和close 点会链接起来
debugPrint("size.width ${size.width}");
Path path = Path()..moveTo(size.width / 2, 200);
path.lineTo(size.width / 4, 500);
path.lineTo(size.width / 7 * 6, 320);
path.lineTo(size.width / 7, 320);
path.lineTo(size.width / 4 * 3, 500);
path.close(); //闭合，没有这个就不会闭合
debugPrint(
"point ${size.width / 2},200=${size.width / 4} 500=${size.width / 7 * 6} 320=${size.width / 7} 320==${size.width / 4 * 3} 500");
参考链接
发表评论