在 CustomPaint (Canvas) 中 Flutter 绘制 SVG

Question

我有这样的事情：

CustomPaint(
       painter: CurvePainter(),
)

在这堂课上，我正在做我的画：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import './myState.dart';
import './models/mode.dart';
final String rawSvg = '''<svg viewBox="...">...</svg>''';

class CurvePainter extends CustomPainter {
  MyState _myState;
  DrawableRoot svgRoot;
  CurvePainter(MyState myState) {
    this._myState = myState;
    this.loadAsset();
  }

  void loadAsset() async {
    this.svgRoot = await svg.fromSvgString(rawSvg, rawSvg);// The canvas that is your board.
  }

  @override
  void paint (Canvas canvas, Size size) {
    canvas.translate(_myState.translateX, _myState.translateY);
    if(this.svgRoot != null){
        svgRoot.scaleCanvasToViewBox(canvas, size);
        svgRoot.clipCanvasToViewBox(canvas);
        // svgRoot.draw(canvas, size);
    }
}

有人知道如何在paint方法中绘制SVG吗？我找到了这个库https://pub.dev/packages/flutter_svg#-readme-tab-。我的代码出现错误：未处理的异常：错误状态：viewBox 元素必须为 4 个元素长

如果我可以在画布内缩放和旋转 svg，我会很好。但这是可选的。

Answer 1

从自述文件：

import 'package:flutter_svg/flutter_svg.dart';
final String rawSvg = '''<svg viewBox="...">...</svg>''';
final DrawableRoot svgRoot = await svg.fromSvgString(rawSvg, rawSvg);

// If you only want the final Picture output, just use
final Picture picture = svgRoot.toPicture();

// Otherwise, if you want to draw it to a canvas:
// Optional, but probably normally desirable: scale the canvas dimensions to
// the SVG's viewbox
svgRoot.scaleCanvasToViewBox(canvas);

// Optional, but probably normally desireable: ensure the SVG isn't rendered
// outside of the viewbox bounds
svgRoot.clipCanvasToViewBox(canvas);
svgRoot.draw(canvas, size);

您可以将其改编为：

class CurvePainter extends CustomPainter {
  CurvePainter(this.svg);

  final DrawableRoot svg;
  @override
  void paint(Canvas canvas, Size size) {
       canvas.drawLine(...);
       svg.scaleCanvasToViewBox(canvas);
       svg.clipCanvasToViewBox(canvas);
       svg.draw(canvas, size);
  }
}

我建议找到一些方法在您的应用程序中更早地获取异步部分，也许使用 FutureBuilder 或 ValueListenableBuilder。

披露：我是 Flutter SVG 的作者/主要维护者。

Answer 2

最终我发现直接在 Canvas 中绘制 SVG 很麻烦。相反，我复制了 SVG 路径并使用 转换为 Dart 代码path_drawing，并将它们渲染为Paths Canvas.drawPath。这样做的好处是，它甚至根本不是资产；此时，SVG 数据实际上就是代码。您还可以轻松转换回 SVG。这个过程有点像这样：

1. 添加path_drawing: 0.4.1到您要渲染的文件中的pubspec.yaml, , 。flutter pub getimport 'package:path_drawing/path_drawing.dart';
2. 使用该方法将 SVG 中的所有路径复制粘贴parseSvgPathData为路径常量。（路径字符串看起来像这样M 86.102000,447.45700 L 86.102000,442.75300 .....）
   • 如果 SVG 中有多个路径，则可以组合多个路径：
     • static final Path complexPathToDraw = parseSvgPathData("path_1").addPath(parseSvgPathData("path_2"));。
3. 通常 SVG 会被包裹在一些翻译中 ( <g transform='translate()>)。并且drawPath只能从左上角位置渲染 Path。所以你必须翻译到适当的位置。渲染时，在绘制之前平移画布 (1) 首先纠正 SVG 中的平移，(2) 接下来缩放到您想要的大小，(3) 转到您在画布上真正想要的位置。然后绘制，并将画布恢复到未变形的状态。但请记住，这些矩阵的添加顺序与我们逻辑分解矩阵的顺序相反，因为线性代数很愚蠢 。

   • canvas.save();
     canvas.translate(dxToRenderPosition, dyToRenderPosition);
     canvas.scale(sxFromSvgSizeToDesiredRenderSize);
     canvas.translate(dxFromSvg, dyFromSvg);
     canvas.drawPath(complexPathToDraw, Paint());
     canvas.restore();