Flutter -canvas 使用画布和路径绘制自定义形状和线条曲线
原文:(排版更好)
Flutter - 使用画布和路径绘制自定义形状和线条
为了在Flutter中绘制自定义形状和线条，基本上涉及四件事：
- CustomPaint（参展商为您提供纸张，然后展示您绘制的内容）
- CustomPainter（这是你！画家！）
- Paint（这是你的刷子）
- Canvas（这是你的画纸）
是的，就这么简单！
所以让我们开始创建我们的主文件：
main.dart
import 'package:custom_shape/pages/drawing_page.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Drawing Shapes",
home: DrawingPage(),
);
}
}
绘图将在DrawingPage的类进行：
darwing_paper.dart
import 'package:custom_shape/curve_painter.dart';
import 'package:flutter/material.dart';
class DrawingPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Blade Runner"),
),
body: CustomPaint(
painter: CurvePainter(),
child: Center(
child: Text("Blade Runner"),
),
),
);
}
}
像往常一样，我们的页面首先Scaffold有一个appBar和一个body设置为CustomPaint小部件实例的页面。
画布由CustomPaint小部件创建并提供给您，该小部件具有三个重要属性：
painter：这是CustomPainter类的一个实例，它在画布上绘制绘画的第一层。child：您可以将其设置为您想要的任何小部件。在画家完成绘画之后，子画构将显示在绘画的顶部。foregroundPaint：最后，这个油漆绘制在前两个图层的顶部。
正如我所说，该CustomPaint对象创建的canvas，它给人以painter和foregroundPaint对象，使他们可以在其上绘制。
画布的大小
但画布的大小是多少？与整个屏幕尺寸相同？一半的屏幕？或者是什么？
该CustomPaint对象创建的画布大小与child参数的大小相同。如果child未提供参数（是，这是可选的），则画布大小由实例化时size可以提供给CustomPaint对象的参数确定。
在我们的示例中，child中心窗口小部件与屏幕一样大。因此，我们canvas也会像整个屏幕一样大！
如果您想知道为什么Center小部件与整个屏幕一样大，您可以阅读我最近写的关于Center小部件的文章：了解Flutter中的中心小部件
画布的左上角称为原点。这是(0, 0)坐标的重点。画布右下角的坐标是(size.width, size.height)：
画布坐标
Painter
的painter参数的类型的CustomPainter。
这只是意味着你的画家类（我们要创建的）必须扩展CustomPainter类。
您通常会根据要绘制的内容命名您的CustomPainter类。如果要绘制天空，请将其命名为SkyPainter。如果要绘制一张脸，请将其命名为FacePainter。如果你要画一把枪????请务必先阅读：
如果一个人必须从事枪支绘图，最好确保他们在正确的情况下这样做。在某些情况下，制作枪支是不合法的。继续阅读：http：//gunbelts.com/blog/when-is-drawing-your-gun-legal/
????
由于我主要打算在画布上画一条虚曲线，我想把我的画家命名为“CurvePainter”：
curve_painter.dart
import 'package:flutter/material.dart';
class CurvePainter extends CustomPainter{
@override
void paint(Canvas canvas, Size size) {
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
如你所见，我的画家已经扩展了CustomPainter课程。
该CustomPainter班有覆盖两个重要功能：
paint：实际的绘画发生在这里。您是否注意到为此功能提供的两个参数？在此功能中，您可以访问canvas确实是纸张的对象，以及要绘制的画布的大小。shouldRepaint：在这个函数中，你应该返回true或false。如果你的绘画依赖于一个变量并且该变量发生了变化，那么你在这里返回true，这样Flutter就知道它必须调用paint方法来重绘你的绘画。否则，在此处返回false表示您不需要重绘。
绘制线条和形状
现在一切都准备好开始绘画了。的canvas准备，我们知道它size。
canvas提供给您的对象有几个辅助函数可以帮助您绘制一些东西，仅举几例：
drawLine(Offset p1, Offset p2, Paint paint)
使用给定的颜料从第1点到第2点绘制一条线。
drawCircle(Offset c, double radius, Paint paint)
在给定的点上画一个圆心，这个圆心的半径由第二个参数给出，在第三个参数中绘制。
drawPath(Path path, Paint paint)
*使用给定的路径绘制。
moveTo(double x, double y)
在开始绘图之前，您的笔默认位于原点（即画布的左上角）。在开始绘图之前，您可以使用此功能移动笔。
在您绘制的所有形状中，无论它们是填充还是描边（或两者）都受到Paint.style控制。
好吧，让我们画一些真实的东西。我会为你画一条线，一条圆和一条路径，然后让你探索其余的功能！
curve_painter.dart
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.amber;
paint.strokeWidth = 5;
canvas.drawLine(
Offset(0, size.height / 2),
Offset(size.width, size.height / 2),
paint,
);
}
在上面的例子中，我首先创建了paint（就像我的笔）并设置了笔的颜色和宽度。然后我使用该drawLine方法从画布的左边缘中间到右边缘的中间画一条线：
???? 请注意完成后如何绘制“Blade Runner”文本小部件（其*child*参数*CustomPaint*）*painter*。如果您提供了第三个*foregroundPaint*参数，它将被绘制在子窗口小部件的顶部。
现在让我们在画布的中心绘制一个蓝色圆圈：
curve_painter.dart
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.amber;
paint.strokeWidth = 5;
canvas.drawLine(
Offset(0, size.height / 2),
Offset(size.width, size.height / 2),
paint,
);
paint.color = Colors.blue;
paint.style = PaintingStyle.stroke;
canvas.drawCircle(Offset(size.width/2, size.height/2), size.width/4, paint);
}
正如您所看到的，我使用相同的颜色，但首先将其颜色更改为蓝色，并将其样式设置为stroke（而不是fill），以便圆圈不会被填充。我已经指定了画布的中心点，Offset(size.width/2, size.height/2)并确定radius圆与画布宽度成正比：size.width/4。
提示：我可以简单地将半径设置为某个数字，如10或其他任何数字，但由于屏幕可以是任何大小，因此最好根据画布的大小调整对象的大小。
绘制路径
现在让我们使用圆形下方的路径对象绘制一个复选标记??。
curve_painter.dart
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.amber;
paint.strokeWidth = 5;
canvas.drawLine(
Offset(0, size.height / 2),
Offset(size.width, size.height / 2),
paint,
);
paint.color = Colors.blue;
paint.style = PaintingStyle.stroke;
canvas.drawCircle(
Offset(size.width / 2, size.height / 2), size.width / 4, paint);
paint.color = Colors.green;
var path = Path();
path.moveTo(size.width / 3, size.height * 3 / 4);
path.lineTo(size.width / 2, size.height * 5 / 6);
path.lineTo(size.width * 3 / 4, size.height * 4 / 6);
canvas.drawPath(path, paint);
}
为此，我首先将笔移动到圆圈下方的坐标（使用moveTo），然后在路径中添加两条线（使用lineTo）。您只需要想象适当的X和Y坐标，或者更准确，抓住一张纸并耐心地计算它们。上面代码的结果是：
可以通过调用来关闭路径path.close()：
curve_painter.dart
var path = Path();
path.moveTo(size.width / 3, size.height * 3 / 4);
path.lineTo(size.width / 2, size.height * 5 / 6);
path.lineTo(size.width * 3 / 4, size.height * 4 / 6);
path.close();
canvas.drawPath(path, paint);
结果：
你想要这条封闭的道路充满色彩吗？没问题！只需将笔的样式更改为fill：
curve_painter.dart
var path = Path();
path.moveTo(size.width / 3, size.height * 3 / 4);
path.lineTo(size.width / 2, size.height * 5 / 6);
path.lineTo(size.width * 3 / 4, size.height * 4 / 6);
path.close();
paint.style = PaintingStyle.fill;
canvas.drawPath(path, paint);
结果是：
GitHub上提供了本文的源代码。
在下一篇文章中，我将向您展示“如何绘制虚线曲线。
在此之前，请继续关注并感谢阅读！
绘制如下的弯曲虚线：
我想你已经熟悉了如何在Flutter中绘制自定义形状和线条。如果没有，你可以阅读我在这个主题上写的文章。
让我们开始创建我们的主文件：
main.dart
import 'package:custom_shape/pages/drawing_page.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Drawing Shapes",
home: DrawingPage(),
);
}
}
绘图将在DrawingPage课堂上进行：
drawing_page.dart
import 'package:curved_line/curve_painter.dart';
import 'package:flutter/material.dart';
class DrawingPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Curved Line"),
),
body: CustomPaint(
painter: CurvePainter(),
child: Container(),
),
);
}
}
像往常一样，我们的页面首先Scaffold有一个appBar和一个body设置为CustomPaint小部件实例的页面。
Container我使用的空（对于child属性）将扩展并填充整个屏幕，因此我们的大小canvas将与整个屏幕一样大（再次，如果你不明白为什么，请阅读我在这个主题上写的文章）。
这是CurvePainter类：
curve_painter.dart
import 'package:flutter/material.dart';
class CurvePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
我们将实现paint绘制曲线的方法。
要绘制贝塞尔线，我们需要四个点：起点，终点和两个控制点，如下图所示。移动控制点会改变曲线的斜率。您可以在此在线工具中使用控制点。
我们可以使用类Path的cubicTo方法绘制贝塞尔曲线：
void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
使用控制点（x1，y1）和（x2，y2）添加从当前点到给定点（x3，y3）的曲线的三次贝塞尔曲线段。
如您所见，该cubicTo方法接受三个参数。其中两个是控制点，最后一个参数是终点。起点是您的笔已经位于画布上的位置。
不要忘记在画布坐标中，左上角是（0,0）点，右下角是（size.width，size.height）。因此，请尝试相应地调整四点：
curve_painter.dart
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Colors.lightBlue;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 3;
var startPoint = Offset(0, size.height / 2);
var controlPoint1 = Offset(size.width / 4, size.height / 3);
var controlPoint2 = Offset(3 * size.width / 4, size.height / 3);
var endPoint = Offset(size.width, size.height / 2);
var path = Path();
path.moveTo(startPoint.dx, startPoint.dy);
path.cubicTo(controlPoint1.dx, controlPoint1.dy,
controlPoint2.dx, controlPoint2.dy,
endPoint.dx, endPoint.dy);
canvas.drawPath(path, paint);
}
请记住，paint对象就像我们的笔，我们将其颜色设置为蓝色，宽度设置为3。
我们用path对象描述了bezier路径。该moveTo方法已用于将笔移动到路径的起??点。然后我们调用cubicTo方法来定义控制点和终点。之后，我们使用该drawPath方法绘制了路径。尝试更改已定义点的x和y，并查看曲线形状如何变化：
虚线路径
为了将任何正常路径转换为虚线路径，幸运的是，可以在此处使用第三方包。它被称为路径绘图。
要使用此包，首先将其添加到pubspec.yml项目文件的依赖项部分（包版本当前为0.4.0）：
pubspec.yaml
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
path_drawing: ^0.4.0
然后运行“flutter packages get”命令获取新包。
现在导入文件中的以下curve_painter.dart文件：
import 'package:path_drawing/path_drawing.dart';
并在绘制之前将其包装path在dashPath方法中：curve_painter.dart
canvas.drawPath(
dashPath(
path,
dashArray: CircularIntervalList<double>(<double>[15.0, 10.5]),
),
paint,
);
该dashPath方法有两个参数。第一个是您想要被破折的路径，第二个参数定义每个破折号的长度（15.0）以及每两个破折号（10.0）之间的空间长度。使用这两个数字进行播放，看看虚线是如何变化的。结果是：
好的伙计们，这就是今天的一切！
如果您想知道绘制这种线的用途是什么，您很快就会发现！在下一篇文章中，我将向您展示AnimationFlutter中的工作原理。我们将为餐馆应用程序实现以下动画：
GitHub上提供了本文的源代码。
谢谢阅读！
更新时间:2024-12-18 20:26
