将Base64编码的图像绘制为抖动的画布背景

Question

我的代码面临两个问题：

1）我无法在Canvas中添加Base64Encoded字符串图像作为背景。

2）我使用徒手在画布上绘制的任何内容都不会在画布的底部边缘被剪切

请在实现上述两项任务方面有所帮助。我还附加了我现有的代码。

Answer 1

您无法在paint方法中执行异步操作，因此您需要提前准备ui.Image-可能在有状态的小部件中。例如：

class SomeWidget extends StatefulWidget {
  final String b64;

  SomeWidget(this.b64);

  @override
  _SomeWidgetState createState() => _SomeWidgetState();
}

class _SomeWidgetState extends State<SomeWidget> {
  ui.Image image;

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: SomePainter(points, image),
    );
  }

  @override
  void initState() {
    super.initState();
    loadImage();
  }

  Future<void> loadImage() async {
    var codec = await ui.instantiateImageCodec(base64.decode(widget.b64));
    var fi = await codec.getNextFrame();
    setState(() {
      image = fi.image;
    });
  }
}

class SomePainter extends CustomPainter {
  List<Offset> points;
  ui.Image image;

  SomePainter(this.points, this.image);

  @override
  void paint(Canvas canvas, Size size) {
    if (image != null) {
      canvas.drawImage(image, p, paint);
    }
  }

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