1

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

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

我认为我注意到的/遇到的麻烦/当前的尝试：

canvas.drawPath, canvas.drawPoints,canvas.drawPolygon等canvas.drawLines都只采用一个 Paint 对象，而该对象又可以有一个strokeWidth（与采用 Paint 对象或strokeWidths 的列表相反，这样除了位置之外的路径参数可以点对点更改并在其间插值）。

strokeWidth通过迭代位置和压力​​数据列表并使用相应的 Canvas 方法来绘制具有不同 s 或半径的线、多边形或点，从而导致没有插值/路径看起来不是连续描边。

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

反映来自 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%,100%,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%,100%,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 "/>

该方法似乎是“画一条很短的线，改变笔画宽度，从前一个位置开始画下一条很短的线”，我试图用上面的绘画方法来模拟。

4

0 回答 0