Flutter -canvas 使用画布和路径绘制自定义形状和线条曲线

更新时间:2023-05-25 21:55

为了在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上提供了本文的源代码。

谢谢阅读！

上一篇：Flutter 布局相关知识点下一篇：flutter canvas的方法总结

Flutter -canvas 使用画布和路径绘制自定义形状和线条曲线

画布的大小

Painter

绘制线条和形状

绘制路径

虚线路径

关于我们

导航

相关文章

Flutter 布局相关知识点

flutter Container详解

Material Design Icons 图标浏览

Dart Map类型的相关使用方法

flutter Scaffold context不正确的问题

Flutter 抽屉组件drawer 自定义宽度

联系方式

联系地址