Flutter编程SVG设计

hgqdbh6s  于 2023-06-07  发布在  Flutter
关注(0)|答案(1)|浏览(142)

bounty将在6天内到期。回答此问题可获得+150声望奖励。DolDurma正在寻找一个答案从一个有信誉的来源

我在这个website中设计了一个简单的svg,我将尝试在flutter中编程

我使用这种方法实现了代码:

class AppbarBackgroundPainter extends CustomPainter {
  final Color color;

  AppbarBackgroundPainter(this.color);

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    /*Path path = Path()
      ..moveTo(1, 50)
      ..moveTo(0, 33)
      ..lineTo(0, 41)
      ..quadraticBezierTo(0, 40, 1, 40)
      ..lineTo(24, 40)
      ..cubicTo(27, 40, 27, 40, 29, 36)
      ..quadraticBezierTo(30, 34, 32, 34)
      ..lineTo(54, 34)
      ..lineTo(54, 33)
      ..lineTo(0, 33);*/

    /* converted SVG to dart*/
    Path path_0 = Path();

    path_0.moveTo(0, size.height);
    path_0.lineTo(0, size.height);
    path_0.cubicTo(
        0,
        size.height * 0.9207522,
        size.width * 0.006172833,
        size.height * 0.8837156,
        size.width * 0.01851852,
        size.height * 0.8837156);
    path_0.lineTo(size.width * 0.4444444, size.height * 0.8837156);
    path_0.cubicTo(
        size.width * 0.5000000,
        size.height * 0.8837156,
        size.width * 0.5000000,
        size.height * 0.8837156,
        size.width * 0.5370370,
        size.height * 0.4392711);
    path_0.cubicTo(
        size.width * 0.5493833,
        size.height * 0.2911222,
        size.width * 0.5679019,
        size.height * 0.2170489,
        size.width * 0.5925926,
        size.height * 0.2170489);
    path_0.lineTo(size.width, size.height * 0.2170489);
    path_0.lineTo(size.width, 0);
    path_0.lineTo(0, 0);
    path_0.close();

    Paint paint_0_fill = Paint()..style = PaintingStyle.fill;
    paint_0_fill.color = color;
    canvas.drawPath(path_0, paint_0_fill);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

但是,我无法将图片中显示的内容应用到代码中。应该在appbar背景下使用

dfddblmv

dfddblmv1#

我会抛弃path_0,简单地重新缩放path

Paint paint_0_fill = Paint()
      ..style = PaintingStyle.fill
      ..color = color;

final scalingfactor_w = size.width/50; //original svg size seemed to be 50
final scalingfactor_h = size.height/50; //original svg size seemed to be 50

var scalingMatrix =
        Float64List.fromList([scalingfactor_w, 0, 0, 0, 0, scalingfactor_h, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);

path = path.transform(scalingMatrix);

canvas.drawPath(path, paint_0_fill);

如果appbar应该从顶部开始,这不是一个完美的适合,但它应该提示你在正确的方向,而不需要重新编码整个路径(转换矩阵也应该允许翻译)
否则,您可以直接跳过此操作并使用flutter_svg

相关问题