问题描述
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方法模仿的。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）