Flutter内置的Canvas绘制方法可以直接用于渲染可变宽度的笔划吗？

如何解决Flutter内置的Canvas绘制方法可以直接用于渲染可变宽度的笔划吗？

Flutter的内置Canvas绘制方法是否可以直接用于渲染可变宽度的笔划，例如反映手写应用程序中每个笔划施加的压力？

理想情况下，以与保存为SVG的XML样式格式兼容的方式（底部示例）。

---

我想我已经注意到的/正在遇到的麻烦/当前的尝试：

canvas.drawPath，canvas.drawPoints，canvas.drawPolygon，canvas.drawLines等都仅包含一个Paint对象，而后者又可以具有一个strokeWidth（相对以获取Paint对象或strokeWidth的列表，以便路径的参数除位置外可以点对点更改，并在它们之间进行插值。）

通过在位置和压力​​数据列表上进行迭代并使用相应的Canvas方法来绘制变化的strokeWidth或半径的线，多边形或点，不会导致插值/路径看起来不连续。

OneNote的屏幕截图显示了我想要的行为：

该应用的屏幕截图显示了以下最小工作示例：

（未优化）最小工作示例：

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(Container(
    color: Colors.white,child: Writeable(),));
}

class Writeable extends StatefulWidget {
  @override
  _WriteableState createState() => _WriteableState();
}

class _WriteableState extends State<Writeable> {
  List<List<double>> pressures = List<List<double>>();
  List<Offset> currentLine = List<Offset>();
  List<List<Offset>> lines = List<List<Offset>>();
  List<double> currentLinePressures = List<double>();
  double pressure;
  Offset position;
  Color color = Colors.black;
  Painter painter;
  CustomPaint paintCanvas;

  @override
  Widget build(BuildContext context) {
    painter = Painter(
        lines: lines,currentLine: currentLine,pressures: pressures,currentLinePressures: currentLinePressures,color: color);

    paintCanvas = CustomPaint(
      painter: painter,);

    return Listener(
      onPointerMove: (details) {
        setState(() {
          currentLinePressures.add(details.pressure);
          currentLine.add(details.localPosition);
        });
      },onPointerUp: (details) {
        setState(() {
          lines.add(currentLine.toList());
          pressures.add(currentLinePressures.toList());
          currentLine.clear();
          currentLinePressures.clear();
        });
      },child: paintCanvas,);
  }
}

class Painter extends CustomPainter {
  Painter(
      {@required this.lines,@required this.currentLine,@required this.color,@required this.pressures,@required this.currentLinePressures});

  final List<List<Offset>> lines;
  final List<Offset> currentLine;
  final Color color;
  final List<List<double>> pressures;
  final List<double> currentLinePressures;

  double scalePressures = 10;
  Paint paintStyle = Paint();

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }

  // Paints here using drawPoints and PointMode.lines,but have also tried
  // PointMode.points,PointMode.polygon and drawPath with a path variable and
  // moveTo,lineTo methods.
  @override
  void paint(Canvas canvas,Size size) {
    // Paint line currently being drawn (points added since pointer was
    // last lifted)
    for (int i = 0; i < currentLine.length - 1; i++) {
      paintStyle.strokeWidth = currentLinePressures[i] * scalePressures;
      canvas.drawPoints(
          PointMode.lines,[currentLine[i],currentLine[i + 1]],paintStyle);
    }
    // Paint all completed lines drawn since app start
    for (int i = 0; i < lines.length; i++) {
      for (int j = 0; j < lines[i].length - 1; j++) {
        paintStyle.strokeWidth = pressures[i][j] * scalePressures;
        canvas.drawPoints(
            PointMode.lines,[lines[i][j],lines[i][j + 1]],paintStyle);
      }
    }
  }
}

我将尝试编写自己的实现以从PointerEvents呈现美观的SVG友好数据，但是很多现有类都感觉SVG /漂亮矢量兼容（例如，所有lineTos，moveTos，笔触类型和结尾）和其他参数），我认为值得检查是否遗漏了一些东西，这些方法已经可以做到这一点？

---

由Xournal ++保存的SVG文件中的几行示例，每行线段的笔触宽度参数都发生了变化，列出的所有其他参数也可能会发生变化。每行包含一个moveTo命令（M）和一个lineTo命令（L），后者从当前位置（最后一个moveTo-ed或lineTo-ed）绘制一条线，让人想起Flutter的线段/子路径和当前点，到指定的偏移量：

<path style="fill:none;stroke-width:0.288794;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,100%,0%);stroke-opacity:1;comp-op:src;clip-to-self:true;stroke-miterlimit:10;" d="M 242.683594 45.519531 L 242.980469 45.476562 "/>
<path style="fill:none;stroke-width:0.295785;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%);stroke-opacity:1;comp-op:src;clip-to-self:true;stroke-miterlimit:10;" d="M 242.980469 45.476562 L 243.28125 45.308594 "/>
<path style="fill:none;stroke-width:0.309105;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%);stroke-opacity:1;comp-op:src;clip-to-self:true;stroke-miterlimit:10;" d="M 243.28125 45.308594 L 243.601562 45.15625 "/>

该方法似乎是“绘制一条非常短的线，更改笔划宽度，从上一个位置开始绘制下一条非常短的线”，这是我尝试使用上面的paint方法模仿的。