运维开发网

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

运维开发网 https://www.qedev.com 2022-07-14 21:36 出处:网络
CustomPaint是Flutter中用于自由绘制的一个widget,它与android原生的绘制规则基本一致,以当前Canves(画布)的左上角为原点进行绘制。本文将详细讲解CustomPaint

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的信

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号