详细介绍了颤振绘图组件的自定义油漆的使用_数据库

CustomPaint是Flutter中用于自由绘制的一个widget，它与android原生的绘制规则基本一致，以当前Canves(画布)的左上角为原点进行绘制。本文将详细讲解CustomPaint

简介

在某些场景下，我们会需要绘制一些高度定制的组件，比如UI设计师给我们出了一个问题；；得到一个奇形怪状的边框。看到UI设计师是个年轻漂亮的小姐，我都不好意思说我做不到(那样会很丢脸)。这时候我们就不能直接使用Flutter自带的组件了，需要手动绘制组件，然后需要使用CuntomPaint组件。CustomPaint组件类似于前端画布，允许我们在画布上绘制各种元素，包括点、线、矩形、弧、单词、图片等等。

CustomPaint 介绍

CustomPaint是一个具有三个重要参数的小部件:

CustomPaint( child: childWidget(), foregroundPainter: foregroundPainter(), painter: backgroundPainter(),)

child:custom paint的子组件；

Painter和foregroundPainter:都是CustomPainter类，用于定义画布绘制的内容。不同的是，第一步是执行painter的画图指令。然后在背景上呈现子组件。最后，foregroundPainter的内容将在child之上绘制一层。

CustomPainter为我们绘制图形提供了一种画图方法。这个方法携带canvas和size，其中canvas是canvas，size是canvas size。Canvas提供了很多绘制图形的方法，比如绘制路径、矩形、圆形、直线等等。

CustomPainter 示例

了解了上述基本概念后，让我们举一个简单的例子来演示这三个参数的层次关系。我们在backgroundPainter上画一个蓝色的正方形，然后传入一个原型图片组件作为子组件，最后在foregroundPainter上画一个半透明的红色圆圈来覆盖图片的一部分。最终的效果如下图，让我们可以很好的理解三个元素之间的关系。

完整的代码如下:

import 'dart:ui';import 'package:flutter/material.dart';class BasicPaintPage extends StatelessWidget { const BasicPaintPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return CustomPaint( child: Center( child: ClipOval( child: Image.asset( 'images/beauty.jpeg', width: 200, height: 200, fit: BoxFit.fitWidth, ), ), ), painter: BackgroundPainter(), foregroundPainter: ForegroundPainter(), ); }}class BackgroundPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color); var center = size / 2; var paint = Paint()..color = Color(0xFF2080E5); paint.strokeWidth = 2.0; canvas.drawRect( Rect.fromLTWH(center.width - 120, center.height - 120, 240, 240), paint, ); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; }}class ForegroundPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { var center = size / 2; var paint = Paint()..color = Color(0x80F53010); paint.strokeWidth = 2.0; canvas.drawCircle( Offset(center.width, center.height), 100, paint, ); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; }}

在背景图中，我们制作了画布的背景色，即下面一行代码:

canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);

其他代码相对容易理解。BackgroundPainter画一个蓝色正方形，child是中间的圆形图片，ForegroundPainter画一个半透明的红色圆圈，大小与中间的圆形图片相同。所以我们得到了想要的效果。

总结

本文介绍了CustomPaint的基本用法。由此可见，使用CustomPaint并不复杂，真正复杂的是如何绘制图形，这需要有良好的数学知识支撑(当然，如果实在不行也可以搜索相关资料)。下一篇文章，我们来画一些常见的图形。

关于颤振绘图组件的CustomPaint使用的详细说明，本文到此为止。更多关于Flutter CustomPaint的信

原文地址：