为了在Flutter中绘制自定义形状和线条，基本上涉及四件事：

1. CustomPaint（参展商为您提供纸张，然后展示您绘制的内容）🖼️
2. CustomPainter（这是你！画家！）👨🎨
3. Paint（这是你的刷子）🎨🖌️
4. 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小部件创建并提供给您，该小部件具有三个重要属性：

1. painter：这是CustomPainter类的一个实例，它在画布上绘制绘画的第一层。
2. child：您可以将其设置为您想要的任何小部件。在画家完成绘画之后，子画构将显示在绘画的顶部。
3. 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班有覆盖两个重要功能：

1. paint：实际的绘画发生在这里。您是否注意到为此功能提供的两个参数？在此功能中，您可以访问canvas确实是纸张的对象，以及要绘制的画布的大小。
2. 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上提供了本文的源代码。

在下一篇文章中，我将向您展示“如何绘制虚线曲线。

在此之前，请继续关注并感谢阅读！

转：https://medium.com/hackernoon/drawing-custom-shapes-and-lines-using-canvas-and-path-in-flutter-997dfb8fde5a