在Flutter中如何绘制矢量形状？

Question

我们正在尝试在Flutter中构建一个自定义形状向量，可以在运行时进行更改。

例如，我们需要一个比萨形状的向量小部件，我们可以根据变量值更改切片颜色。

我们尝试使用Flutter中的画布和绘图器，但它们没有清晰且良好的文档。

我们也尝试过SVG，但不幸的是Flutter不支持SVG标签和SVG视图。

- javad bat

Answer 1

你可以创建一个扩展CustomPainter的小部件。

class Sky extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var rect = Offset.zero & size;
    var gradient = new RadialGradient(
      center: const Alignment(0.7, -0.6),
      radius: 0.2,
      colors: [const Color(0xFFFFFF00), const Color(0xFF0099FF)],
      stops: [0.4, 1.0],
    );
    canvas.drawRect(
      rect,
      new Paint()..shader = gradient.createShader(rect),
    );
  }

  @override
  SemanticsBuilderCallback get semanticsBuilder {
    return (Size size) {
      // Annotate a rectangle containing the picture of the sun
      // with the label "Sun". When text to speech feature is enabled on the
      // device, a user will be able to locate the sun on this picture by
      // touch.
      var rect = Offset.zero & size;
      var width = size.shortestSide * 0.4;
      rect = const Alignment(0.8, -0.9).inscribe(new Size(width, width), rect);
      return [
        new CustomPainterSemantics(
          rect: rect,
          properties: new SemanticsProperties(
            label: 'Sun',
            textDirection: TextDirection.ltr,
          ),
        ),
      ];
    };
  }

  // Since this Sky painter has no fields, it always paints
  // the same thing and semantics information is the same.
  // Therefore we return false here. If we had fields (set
  // from the constructor) then we would return true if any
  // of them differed from the same fields on the oldDelegate.
  @override
  bool shouldRepaint(Sky oldDelegate) => false;
  @override
  bool shouldRebuildSemantics(Sky oldDelegate) => false;
}

另请参阅：

• https://pub.dartlang.org/packages/flutter_svg（Flutter的有限SVG支持）
• https://github.com/flutter/flutter/tree/master/dev/tools/vitool
• https://github.com/simolus3/fluttie（不确定是否已经可用）

- Günter Zöchbauer