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.