'Scaling image with paintImage only draws list of Offset in corner of image
In the Flutter app I am working on I am attempting to make it, so you can take an image and draw on it then upload it. However, I am running into an issue where the drawn lines are only in the top left corner of the image.
I am using dart:UI CustomPainter with the paintImage function to do this. I can't find where I'm making a scaling issue.
Here is my function:
final ui.Image image;
onPressed: () async {
var recorder = ui.PictureRecorder();
var imageCanvas = Canvas(recorder);
var painter = Sketcher(lines: lines, image: widget.image, context: context, showImage: false);
paintImage(
canvas: imageCanvas,
rect: Rect.fromLTWH(0, 0, image.width, image.height),
image: image,
fit: BoxFit.scaleDown,
repeat: ImageRepeat.noRepeat,
scale: 1.0,
alignment: Alignment.center,
flipHorizontally: false,
filterQuality: FilterQuality.high
);
painter.paint(imageCanvas, widget.size);
var picture = recorder.endRecording();
ui.Image im = await picture.toImage(widget.size.width.floor(), widget.size.height.floor());
Navigation.of(context).push(MaterialPageRoute(builder: (context) => UploadScreen(image: im)));
}
painter class:
class DrawnLine {
final List<Offset> path;
final Color color;
final double width;
DrawnLine(this.path, this.color, this.width);
}
class Sketcher extends CustomPainter {
final List<DrawnLine> lines;
final ui.Image image;
final BuildContext context;
final bool showImage;
Sketcher({required this.lines, required this.image, required this.context, required this.showImage,});
@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);
}
}
}
canvas.save();
canvas.restore();
}
@override
bool shouldRepaint(Sketcher oldDelegate) {
return true;
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
