使用CustomPainter在Flutter中绘图

介绍 ：

在Flutter中，所有内容都围绕Widget。Flutter让你灵活创建一些漂亮的UI小部件，并且该应用程序可以在iOS和Android上使用。因此，将您创建的这些小部件绘制到移动屏幕上，或者我们可以将其称为绘制在画布上（Canvas）。那么我们也可以将其用作绘图板来绘图。

我们将使用custom painter在画布上绘画，我们将提供更改画笔的大小，不透明度和颜色的选项。

该代码位于https://github.com/sharansingh00002/draw

现在让我们来看看这是如何完成的:)

Code Time

我们需要具备的第一个信息是用户与之交互的画布上的点的坐标，我们可以使用Gesture Detector轻松获得该信息。我们将使用手势检测器的onPanUpdate，onPanStart和onPanEnd属性。当用户单击屏幕时使用onPanStart，这样我们可以绘制一个点，但是如果用户拖动，则使用onPanUpdate可以获取连续点，并且OnPanEnd通知用户已停止绘制。

我们将这些点存储在列表中，其中每个元素将具有坐标以及与该点关联的绘制属性。

class DrawingPoints {
  Paint paint;
  Offset points;
  DrawingPoints({this.points, this.paint});
}

在手势检测器中，onPanUpdate函数看起来像

onPanUpdate: (details) {
  setState(() {
    RenderBox renderBox = context.findRenderObject();
    points.add(DrawingPoints(
        points: renderBox.globalToLocal(details.globalPosition),
        paint: Paint()
          ..strokeCap = strokeCap
          ..isAntiAlias = true
          ..color = selectedColor.withOpacity(opacity)
          ..strokeWidth = strokeWidth));
  });
},
onPanStart: (details) {
  setState(() {
    RenderBox renderBox = context.findRenderObject();
    points.add(DrawingPoints(
        points: renderBox.globalToLocal(details.globalPosition),
        paint: Paint()
          ..strokeCap = strokeCap
          ..isAntiAlias = true
          ..color = selectedColor.withOpacity(opacity)
          ..strokeWidth = strokeWidth));
  });
},
onPanEnd: (details) {
  setState(() {
    points.add(null);
  });
},

因此，我们使用渲染框获取要在其上进行绘制的渲染对象，并将该框的全局坐标系点转换为局部坐标系。我们将在末尾添加null以标记绘图的结束。

现在让我们看一下自定义的CustomPainter类，该类负责在屏幕上绘制。

class DrawingPainter extends CustomPainter {
  DrawingPainter({this.pointsList});
  List pointsList;
  List offsetPoints = List();
  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < pointsList.length - 1; i++) {
      if (pointsList[i] != null && pointsList[i + 1] != null) {
        canvas.drawLine(pointsList[i].points, pointsList[i +1].points ,
            pointsList[i].paint);
      } else if (pointsList[i] != null && pointsList[i + 1] == null) {
        offsetPoints.clear();
        offsetPoints.add(pointsList[i].points);
        offsetPoints.add(Offset(
            pointsList[i].points.dx + 0.1, pointsList[i].points.dy + 0.1));
        canvas.drawPoints(PointMode.points, offsetPoints, pointsList[i].paint);
      }
    }
  }
  @override
  bool shouldRepaint(DrawingPainter oldDelegate) => oldDelegate.pointsList!=pointsList;
}

我们使用Canvas.drawLine函数绘制线条，但是如果用户刚刚在屏幕上轻击，则使用Canvas.drawPoint绘制该点。

我们正在检查是否为null，因为在用户停止绘图时我们将添加null，以便如果他再次开始绘图，则最后一个绘图的最后一点和新绘图的起点不应该连接。

要清除屏幕，只需清除pointsList。

定制：

因此，我们可以添加许多自定义项，到目前为止，我已经添加了更改笔触宽度，笔刷的不透明度和颜色的选项。

因此，对于strokeWidth和不透明度Opacity，我们可以简单地使用Slider来更改值，对于Color，我们提供一些预定义的最常用的颜色，以及使用颜色选择器选择其选择的颜色的选项。

这些更改的值存储在与每个绘图点关联的Paint对象中，以便每个点可以具有自己的特征。

Slider(
    value: (selectedMode == SelectedMode.StrokeWidth)
        ? strokeWidth
        : opacity,
    max: (selectedMode == SelectedMode.StrokeWidth)
        ? 50.0
        : 1.0,
    min: 0.0,
    onChanged: (val) {
      setState(() {
        if (selectedMode == SelectedMode.StrokeWidth)
          strokeWidth = val;
        else
          opacity = val;
      });
    }),

对于颜色选择器，我们使用fuyumi的flutter_colorpicker库https://pub.dartlang.org/packages/flutter_colorpicker

这个项目的代码可以在github上找到：

https://github.com/sharansingh00002/draw

翻译自：https://medium.com/flutter-community/drawing-in-flutter-using-custompainter-307a9f1c21f8