Flutter - 在照片上绘制

Question

我正在开发一个应用程序，允许用户拍照并使用不同大小的笔触和颜色在图像上绘制线条。

我已经使用该插件image_picker允许用户使用camera.

我目前陷入困境，因为我似乎无法找到一个解决方案，让我实现该功能以允许用户在图像上绘图。

请提出任何建议。

我试图从不同的应用程序实现的示例：

Answer 1

也许这段代码可以帮助你。

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
import 'dart:typed_data';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  ui.Image image;
  bool isImageloaded = false;
  GlobalKey _myCanvasKey = new GlobalKey();

  void initState() {
    super.initState();
    init();
  }

  Future <Null> init() async {
    final ByteData data = await rootBundle.load('img/guide1.png');
    image = await loadImage( Uint8List.view(data.buffer));
  }

  Future<ui.Image> loadImage(List<int> img) async {
    final Completer<ui.Image> completer =  Completer();
    ui.decodeImageFromList(img, (ui.Image img) {
      setState(() {
        isImageloaded = true;
      });
      return completer.complete(img);
    });
    return completer.future;
  }

  Widget _buildImage() {
    ImageEditor editor= ImageEditor(image: image);
    if (this.isImageloaded) {
      return  GestureDetector(
        onPanDown: (detailData){
          editor.update(detailData.localPosition);
          _myCanvasKey.currentContext.findRenderObject().markNeedsPaint();

        },
        onPanUpdate: (detailData){
          editor.update(detailData.localPosition);
          _myCanvasKey.currentContext.findRenderObject().markNeedsPaint();

        },
        child: CustomPaint(
          key: _myCanvasKey,
          painter:  editor,
        ),
      );
    } else {
      return  Center(child:  Text('loading'));
    }
  }
  @override
  Widget build(BuildContext context) {

    return  _buildImage();
  }
}

class ImageEditor extends CustomPainter {

  ImageEditor({
    this.image,
  });

  ui.Image image;

  List<Offset> points=List();

  final Paint painter = new Paint()
    ..color = Colors.blue[400]
    ..style = PaintingStyle.fill;

  void update(Offset offset){
    points.add(offset);
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(image,  Offset(0.0, 0.0),  Paint());
    for(Offset offset in points){
      canvas.drawCircle(offset, 10, painter);
    }
  }

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

}