Flutter自定义绘制Widget初探

RRect.fromRectAndCorners(
Rect rect,
{
Radius topLeft: Radius.zero,
Radius topRight: Radius.zero,
Radius bottomRight: Radius.zero,
Radius bottomLeft: Radius.zero
}
)

// 顶点X轴Y轴的圆角设置相同
const Radius.circular(double radius)
// 顶点X轴Y轴的圆角设置可以不相同
const Radius.elliptical(this.x, this.y)

绘制圆角矩形的方法

void drawRRect(RRect rrect, Paint paint)

image-5.png

// 利用矩形的左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标
// 以及一个Radius来确定圆角矩形
RRect.fromLTRBR(double left, double top, double right, double bottom, Radius radius)

// 需要先定义一个Rect，使用方式和fromLTRBR类似
RRect.fromRectAndRadius(Rect rect, Radius radius)

image-6.png

// 利用矩形的左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标
// 以及设置四个顶点的X轴相同圆角，设置四个顶点的Y轴相同圆角来确定圆角矩形
RRect.fromLTRBXY(double left, double top, double right, double bottom, double radiusX, double radiusY)

// 需要先定义一个Rect，使用方式和fromLTRBXY类似
RRect.fromRectXY(Rect rect, double radiusX, double radiusY)

image-7.png

圆角矩形绘制有一个需要注意的地方，如果设置矩形的半径和圆角的半径相等，则绘制出来的是一个圆

// 设置矩形的半径和圆角的半径不相等，效果如下面左图
Rect rect = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 50.0);
RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(10.0));
// 设置矩形的半径和圆角的半径相等，效果如下面右图
Rect rect = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 50.0);
RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(50.0));

image-8.png

2.5 绘制双圆角矩形

Flutter中提供了绘制双圆角矩形的方法

void drawDRRect(RRect outer, RRect inner, Paint paint)

这里需要注意的是，内圆角矩形的半径不能大于外圆角矩形的半径，否则无法绘制。

// 第一种：外圆角矩形的半径大于内圆角矩形半径,如下面左图
Rect rectOut = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 80.0);
Rect rectInner = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 40.0);
// 第二种：外圆角矩形的半径等于内圆角矩形半径,如下面中图
Rect rectOut = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 80.0);
Rect rectInner = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 80.0);
// 第三种：外圆角矩形的半径小于内圆角矩形半径,无法绘制,如下面右图
Rect rectOut = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 80.0);
Rect rectInner = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 81.0);

接下来绘制上面三种情况下的双圆角矩形

RRect rRectOut = RRect.fromRectAndRadius(rectOut, Radius.circular(10.0));
RRect rRectInner = RRect.fromRectAndRadius(rectInner, Radius.circular(30.0));

canvas.drawDRRect(rRectOut, rRectInner, _paint);

image-9.png

2.6 绘制圆

// 根据圆心坐标和圆的半径确定圆的位置和大小void drawCircle(Offset c, double radius, Paint paint)

画一个圆

// 绘制圆，Paint默认填充PaintingStyle.fill，如下面左图canvas.drawCircle(Offset(100.0, 100.0), 50.0, _paint);// 绘制圆，Paint设置为不填充，如下面右图_paint.style = PaintingStyle.stroke;canvas.drawCircle(Offset(100.0, 100.0), 50.0, _paint);

image-10.png

2.7 绘制椭圆

// Rect矩形区域的确定参见前文
void drawOval(Rect rect, Paint paint)
// 椭圆的宽度大于高度，如下面左图
Rect rect= Rect.fromPoints(Offset(50.0, 50.0), Offset(130.0, 100.0));

// 椭圆的宽度小于高度，如下面中图
Rect rect= Rect.fromPoints(Offset(40.0, 80.0), Offset(80.0, 170.0));

// 椭圆的宽度等于高度，绘制出的是圆，如下面右图
Rect rect= Rect.fromPoints(Offset(80.0, 70.0), Offset(180.0, 170.0));

绘制一个椭圆

canvas.drawOval(rect, _paint);

image-11.png

2.8 绘制圆弧

// rect：矩形区域// startAngle：开始的弧度// sweepAngle：扫过的弧度，正数顺时针，负数逆时针// useCenter：是否使用中心点绘制void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

弧度

一周的弧度数为2πr/r=2π，360°角=2π弧度。

因此，1弧度约为57.3°，即57°17’44.806’’，1°为π/180弧度，近似值为0.01745弧度。
周角为2π弧度，平角（即180°角）为π弧度，直角为π/2弧度。

下表是一些特殊的角度和弧度之间的换算

角度	弧度
0°	0
30°	π/6
45°	π/4
60°	π/3
90°	π/2
120°	2π/3
180°	π
270°	3π/2
360°	2π

使用π需要引入：

import ‘dart:math’;

下面我们尝试绘制一些圆弧

var rect = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 50.0);
// 开始度数为90度，顺时针扫度数90度，如下方左图
canvas.drawArc(rect, -pi / 2, pi / 2, false, _paint);

// 开始度数为0度，顺时针扫度数60度，如下方中图
canvas.drawArc(rect, 0, pi / 3, false, _paint);

// 开始度数为0度，逆时针扫度数180度，使用中心点绘制，如下方右图
canvas.drawArc(rect, 0, -pi, true, _paint);

image-12.png

2.9 绘制路径

void drawPath(Path path, Paint paint)

Path方法介绍

// 将路径的起始点移动到指定的坐标点上
void moveTo(double x, double y)

// 将起始点和终点连成线段，如果没有显式的指明起始点坐标，默认为(0,0)
void lineTo(double x, double y)
// 起始点(30，30)，终点(100，100)，如下面左图
Path path = new Path();
path.moveTo(30, 30);
path.lineTo(100, 100);
canvas.drawPath(path, _paint);

// 起始点默认(0，0)，终点(100，100)，如下面右图
Path path = new Path();
path.lineTo(100, 100);
canvas.drawPath(path, _paint);

image-13.png

// 相对于当前位置坐标在X轴上偏移dx，在Y轴上偏移dy
void relativeMoveTo(double dx, double dy)
// 起始点(0，0)，和(20，20)之间连线，后移动到(30，30)，和(70，70)之间连线
Path path = new Path();
path.lineTo(20, 20);
path.moveTo(30, 30);
path.lineTo(70, 70);
canvas.drawPath(path, _paint);

// 起始点(0，0)，和(20，20)之间连线，
// 后以当前(20，20)坐标为起始点X轴偏移30，Y轴偏移30，
// 即偏移后的新坐标(50，50)和(70，70)之间连线
Path path = new Path();
path.lineTo(20, 20);
path.relativeMoveTo(30, 30);
path.lineTo(70, 70);
canvas.drawPath(path, _paint);

image-14.png

// 确定相对于当前位置坐标，在X轴上偏移dx，在Y轴上偏移dy后的新坐标，
// 确定好之后当前位置坐标和新坐标之间连线
void relativeLineTo(double dx, double dy)
// (0，0)和(10，10)连线，(10，10)和(20，20)连线，如下面左图
Path path = new Path();
path.lineTo(10, 10);
path.lineTo(20, 20);
canvas.drawPath(path, _paint);

// (0，0)和(10，10)连线，(10，10)和当前位置偏移后的新坐标(30，30)连线
Path path = new Path();
path.lineTo(10, 10);
path.relativeLineTo(20, 20);
canvas.drawPath(path, _paint);

image-15.png

// 绘制二阶贝塞尔曲线
// 绘制需要一个起始点、一个终点和一个控制点
// 此方法的前两个参数是控制点的坐标，后两个参数是终点的坐标
void quadraticBezierTo(double x1, double y1, double x2, double y2)

// 绘制二阶贝塞尔曲线
// 绘制需要一个起始点、一个终点和一个控制点
// 此方法的前两个参数是控制点的坐标，后两个参数是终点的坐标
// 和quadraticBezierTo不同在于终点坐标的位置是当前起点位置坐标X轴偏移x2,Y轴偏移y2后的坐标
// 举例（略）
void relativeQuadraticBezierTo(double x1, double y1, double x2, double y2)
// 绘制曲线，如下面左图
Path path = new Path();
path.moveTo(150, 100);
path.quadraticBezierTo(250, 40, 250, 200);
canvas.drawPath(path, _paint);
// 绘制控制点
_paint.strokeWidth = 8;
_paint.color = Colors.blue;
canvas.drawPoints(PointMode.points, [Offset(250, 40)], _paint);
// 绘制曲线，如下面中图
Path path = new Path();
path.moveTo(150, 100);
path.quadraticBezierTo(200, 200, 250, 200);
canvas.drawPath(path, _paint);
// 绘制控制点
_paint.strokeWidth = 8;
_paint.color = Colors.blue;
canvas.drawPoints(PointMode.points, [Offset(200, 200)], _paint);
// 绘制曲线，如下面右图
Path path = new Path();
path.moveTo(150, 100);
path.quadraticBezierTo(60, 130, 150, 200);
canvas.drawPath(path, _paint);
// 绘制控制点
_paint.strokeWidth = 8;
_paint.color = Colors.blue;
canvas.drawPoints(PointMode.points, [Offset(60, 130)], _paint);

image-16.png

// 绘制三阶贝塞尔曲线
// 绘制需要一个起始点、一个终点和两个控制点
// 此方法的前四个参数分别是两个控制点的XY坐标，后两个参数是终点的坐标
void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)

// 绘制三阶贝塞尔曲线
// 绘制需要一个起始点、一个终点和两个控制点
// 此方法的前四个参数分别是两个控制点的XY坐标，后两个参数是终点的坐标
// 和cubicTo不同在于终点坐标的位置是当前起点位置坐标X轴偏移x2,Y轴偏移y2后的坐标
// 举例（略）
void relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3)

下面使用cubicTo绘制心形效果

var width = 300;
var height = 300;

Path leftPath = new Path();
// 画笔移动到左边曲线起点
leftPath.moveTo(width / 2, height / 4 + 20);
leftPath.cubicTo(
width / 8, height / 10,
width / 13, (height * 2) / 5,
width / 2, height - height / 4);
// 绘制心形左边曲线
canvas.drawPath(leftPath, _paint);

Path rightPath = new Path();
// 画笔移动到右边曲线起点
rightPath.moveTo(width / 2, height / 4 + 20);
rightPath.cubicTo(
width - width / 8, height / 10,
(width * 12) / 13, (height * 2) / 5,
width / 2, height - height / 4);
// 绘制心形右边曲线
canvas.drawPath(rightPath, _paint);
// 绘制两个控制点
_paint.strokeWidth = 8;
_paint.color = Colors.blue;
canvas.drawPoints(
PointMode.points,
[
Offset(width / 8, height / 10),
Offset(width / 13, (height * 2) / 5),
Offset(width - width / 8, height / 10),
Offset((width * 12) / 13, (height * 2) / 5)
],
_paint);

image-17.png

// 画弧线
// rect：矩形区域
// startAngle：开始的弧度
// sweepAngle：扫过的弧度，正数顺时针，负数逆时针
// forceMoveTo：true-画笔从当前位置抬起来，移动到弧线起点
// false-画笔从当前位置不抬起来直接连线到弧线起点
void arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo)
// 效果如下面左图,画笔从(80, 100)抬起来，移动到弧线起点
boo forceMoveTo = true;

// 效果如下面右图,画笔从(80, 100)不抬起来直接连线到弧线起点
boo forceMoveTo = false;

Path path = new Path();
path.moveTo(20, 40);
path.lineTo(80, 100);
path.arcTo(new Rect.fromLTWH(60, 60, 100, 100), 0, pi / 2, forceMoveTo);
canvas.drawPath(path, _paint);

image-18.png

// 封闭当前路径，以上面代码为例，如下图
void close();

image-19.png

其他方法

// 为path添加矩形
void addRect(Rect rect);

// 为path添加圆角矩形
void addRRect(RRect rrect);

// 为path添加椭圆
void addOval(Rect oval)

// 为path添加圆弧
void addArc(Rect oval, double startAngle, double sweepAngle);

// 为path添加多边形，points-坐标数组，close-是否首位封闭
void addPolygon(List points, bool close);

// 为path添加一个path，偏移offset坐标
void addPath(Path path, Offset offset, {Float64List matrix4})

// path路径是否包含point坐标点
bool contains(Offset point)

// 重置路径
void reset();

// 给路径做matrix4变换
Path transform(Float64List matrix4)

下面举一个addPath的例子

Path path = new Path();
path.lineTo(20, 20);

Path path1 = new Path();
path1.lineTo(40, 40);

// 如下图，addPath方法就是在(30，30)坐标位置偏移(40，40)并连线
path.addPath(path1, Offset(30, 30));

canvas.drawPath(path, _paint);

image-20.png

由于篇幅原因，不可能将Canvas和Path的所有方法一一列举，想要进一步了解可查看相关源码方法。

总结

本文列举了Flutter开发中，Canvas绘制流程常用的方法并提供了简单的示例，可以看出，和Android的Canvas还是很相似的，上手也非常的快。要做出酷炫的Widget，最好还是需要配合动画效果，当然，用canvas做些简单的icon也是可以的。

作者简介
风少，铜板街客户端开发工程师，2013年5月加入团队，目前主要负责APP端项目开发。

本文主要通过具体的案例重点介绍了自定义绘制Widget的机制，如需获取更多 Flutter 相关的知识，可以扫码关注 “ 铜板街科技 ”公众号 ，并在后台回复 “Flutter” 关键词获取更多精彩内容。

小结

有了这么多优秀的开发工具，可以做出更高质量的Android应用。

当然了，“打铁还需自身硬”，想要写出优秀的代码，最重要的一点还是自身的技术水平，不然用再好的工具也不能发挥出它的全部实力。

在这里我也分享一份大佬自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅的精品资料。在脑图中，每个知识点专题都配有相对应的实战项目，可以有效的帮助大家掌握知识点。

总之也是在这里帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
铜板街科技 ”公众号 ，并在后台回复 “Flutter” 关键词获取更多精彩内容。

小结

有了这么多优秀的开发工具，可以做出更高质量的Android应用。

当然了，“打铁还需自身硬”，想要写出优秀的代码，最重要的一点还是自身的技术水平，不然用再好的工具也不能发挥出它的全部实力。

在这里我也分享一份大佬自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅的精品资料。在脑图中，每个知识点专题都配有相对应的实战项目，可以有效的帮助大家掌握知识点。

总之也是在这里帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！