Flutter: draw over image with CustomPainter with DrawnLines

720 views Asked by At

A part of an application I am working on involves editing photos. I am attempting to include an option to draw on an image. I can not find any examples of how to do this on Github or with the documentation.

This is what I have so Far:

class Sketcher extends CustomPainter {
  final List<DrawnLine> lines;
  final ui.Image image;
  final BuildContext context;

  Sketcher({required this.lines, required this.image,});


  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.redAccent
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;




    for (int i = 0; i < lines.length; ++i) {
      if (lines[i] == null) continue;
      for (int j = 0; j < lines[i].path.length - 1; ++j) {
        if (lines[i].path[j] != null && lines[i].path[j + 1] != null) {
          paint.color = lines[i].color;
          paint.strokeWidth = lines[i].width;
          canvas.drawLine(lines[i].path[j], lines[i].path[j + 1], paint);
        }
      }
    }

// Add DrawnLine to image
  }

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

At the moment I am displaying the Drawn Lines over the Image in a Stack Widget.

Is there a way to combine the canvas with the Image by amending the lines to the Image?

I already know about canvas.drawImage() however I haven't found any code that works and no one is having a similar issue anywhere online.

0

There are 0 answers