CustomPaint中的颤振绘图SVG (画布)
CustomPaint中的颤振绘图SVG (画布)
提问于 2019-09-10 15:54:34
我有这样的事情：
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);
}
}有人知道如何在油漆方法中画一个SVG吗？我找到了这个图书馆svg#-readme-选项卡。用我的代码，我得到了错误:未处理的异常:坏状态: viewBox元素必须有4个元素长
如果我能在画布中缩放和旋转svg，我会很好。但这是可选的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-09-10 16:17:04
来自自述文件
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。
披露:我是颤振SVG的作者/主要维护者。
Stack Overflow用户
发布于 2020-04-06 19:18:20
最后，我发现在画布中直接绘制SVG很麻烦。相反，我使用path_drawing复制SVG路径并转换为Dart代码，并使用Canvas.drawPath将它们呈现为Path。这甚至根本不是一个资产的优点；SVG数据在这一点上就是字面上的代码。您可以轻松地将其转换回SVG。这个过程有点像这样：
- 将
path_drawing: 0.4.1添加到pubspec.yaml，flutter pub get，在您要从import 'package:path_drawing/path_drawing.dart';呈现的文件中。 - 复制粘贴SVG中的所有路径，方法
parseSvgPathData作为路径常量。(路径字符串看起来类似于M 86.102000,447.45700 L 86.102000,442.75300 .....)- 如果SVG：中有多条路径，则可以组合多条路径。
static final Path complexPathToDraw = parseSvgPathData("path_1").addPath(parseSvgPathData("path_2"));。
- 如果SVG：中有多条路径，则可以组合多条路径。
- 通常，SVG将被包装在一些翻译(
<g transform='translate()>)中。而drawPath只能从左上角位置呈现路径.所以你必须翻译到合适的位置。在呈现时，在绘制之前翻译画布(1)首先校正SVG中的翻译，(2)缩放到您想要的大小，(3)到画布上您真正想要的位置。然后绘制，并将画布还原到其未转换状态。但请记住，这些矩阵是以相反的顺序添加到我们如何逻辑地分解它，因为线性代数是愚蠢的。- canvas.scale(sxFromSvgSizeToDesiredRenderSize)；canvas.translate(dxFromSvg，dyFromSvg)；canvas.drawPath(complexPathToDraw，Paint())；canvas.restore()；
Stack Overflow用户
发布于 2021-06-09 12:34:33
我遇到了一个类似的问题，我想在canvas的一小部分上绘制一个Svg。
为了使它正常工作，我必须使用以下代码：
Size desiredSize = Size(60, 40);
// get the svg from a preloaded array of DrawableRoot corresponding to all the Svg I might use
final DrawableRoot svgRoot = drawables[i];
canvas.save();
// [center] below is the Offset of the center of the area where I want the Svg to be drawn
canvas.translate(center.dx - desiredSize.width / 2, center.dy - desiredSize.height / 2);
Size svgSize = svgRoot.viewport.size;
var matrix = Matrix4.identity();
matrix.scale(desiredSize.width / svgSize.width, desiredSize.height / svgSize.height);
canvas.transform(matrix.storage);
svgRoot.draw(canvas, Rect.zero); // the second argument is not used in DrawableRoot.draw() method
canvas.restore();这样，您就可以在画布上呈现复杂的Svg，并在上面做一些工作。
你可以在同一个画布上画多个Svg，然后在上面画。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57874374
复制相关文章
相似问题
腾讯云开发者
