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

时间:2020-11-09 21:07
相关:flutter canvas的方法总结

原文:(排版更好)

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

Flutter - 绘制弯曲的虚线


为了在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,它给人以painterforegroundPaint对象,使他们可以在其上绘制。

画布的大小

但画布的大小是多少?与整个屏幕尺寸相同?一半的屏幕?或者是什么?

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:在这个函数中,你应该返回truefalse。如果你的绘画依赖于一个变量并且该变量发生了变化,那么你在这里返回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绘制曲线的方法。

要绘制贝塞尔线,我们需要四个点:起点终点两个控制点,如下图所示。移动控制点会改变曲线的斜率。您可以在此在线工具中使用控制点。

我们可以使用类PathcubicTo方法绘制贝塞尔曲线:

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方法绘制了路径。尝试更改已定义点的xy,并查看曲线形状如何变化:

虚线路径

为了将任何正常路径转换为虚线路径,幸运的是,可以在此处使用第三方包。它被称为路径绘图

要使用此包,首先将其添加到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';

并在绘制之前将其包装pathdashPath方法中:
curve_painter.dart

canvas.drawPath(
  dashPath(
    path,
    dashArray: CircularIntervalList<double>(<double>[15.0, 10.5]),
  ),
  paint,
);

dashPath方法有两个参数。第一个是您想要被破折的路径,第二个参数定义每个破折号的长度(15.0)以及每两个破折号(10.0)之间的空间长度。使用这两个数字进行播放,看看虚线是如何变化的。结果是:

好的伙计们,这就是今天的一切!

如果您想知道绘制这种线的用途是什么,您很快就会发现!在下一篇文章中,我将向您展示AnimationFlutter中的工作原理。我们将为餐馆应用程序实现以下动画:

GitHub上提供了本文的源代码。

谢谢阅读!