Flutter-如何在画布上从相机/画廊绘制图像？

Question

我正在学习抖动，并使用CustomPainter在画布上从画廊/相机获得绘画图像。我的代码是绘制图像，但由于某种原因，它只是在屏幕上显示整个图像的一小部分（而不是完整的图片）。

在 initState（）函数中调用

_loadAssetAsImage ，其中key是图像的实际路径。

void _loadImage( String key ) async {
var data = await rootBundle.load( key );
var codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
codec.getNextFrame().then((info){
  setState(() {
    isImageloaded = true;
    image = info.image;
  });
});
  }

一旦调用 setState ，就会调用 _buildImage（）函数中的 _buildImage（）

Widget _buildImage() {
if (this.isImageloaded) {
  return new CustomPaint(
      painter: new ImageEditor(image: image),
  );
} else {
  return new Center(child: new Text('loading'));
}
  }

这里 ImageEditor 是扩展 CustomPainter

的自定义类

class ImageEditor extends CustomPainter {
  ui.Image image;
  ImageEditor({this.image});

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(image, new Offset(0.0, 0.0),new Paint());
  }

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

这里的所有内容对我来说都很合适，但无法理解为什么只有很小一部分的Image会显示在整个屏幕上，而不是整个图片。 如果有人对代码中缺少的内容有很好的建议，请帮助我。

这就是我的期望

这就是我要得到的

Answer 1

画布只显示图像的一小部分的原因是正在显示的图像没有按比例缩小以适合小部件。您可以在此处做的是在画布上绘制时缩放图像大小。

class ImageEditor extends CustomPainter {

  ...

  @override
  void paint(Canvas canvas, Size size) {
    paintImage(
        canvas: canvas,
        rect: Rect.fromLTWH(0.0, 0.0, scaledWidth, scaledHeight),
        image: image,
        fit: BoxFit.fitWidth);
  }
}