0

I use the following code to draw an image on the screen. I want to draw an overlay on top of this image. However, when the image height is larger, the boxfit reduces the image width. I cannot calculate the image top and left drawn position when this happens. The image width and height are still equal to screen size, but image width is drawn centered with gaps on both sides, which is clearly less than the screen size.

Is there a way to calculate the accurate size and top, left the position after the image has been bixfited. 

return Image.memory(
     imageBytes,
     width: reqWidth,
     height: reqHeight,
     filterQuality: FilterQuality.high,
     fit: BoxFit.fitHeight,
);
aminography
  • 21,986
  • 13
  • 70
  • 74
Patola
  • 515
  • 8
  • 30
  • if you have to use `Canvas` api for drawing your overlay why not use `Canvas.drawImage` and get rid of `Image.memory`? – pskink Nov 06 '19 at 12:08
  • I can but it's not just drawing an image. This image is segmented and puzzle pieces are created out of it. So the precise size of the image is needed in order to draw puzzle pieces. See here for the example. https://dragosholban.com/2019/02/16/building-a-puzzle-game-using-flutter/. – Patola Nov 06 '19 at 23:42
  • so instead of `Canvas.drawImage` use `ImageShader` and `Camvas.drawPath()` - no need for `ClipPath` - do your complete drawing inside `PuzzlePiecePainter` – pskink Nov 07 '19 at 06:49
  • thanks, but can't find any example of ImageShader. How do I incorporate that into the sample? – Patola Nov 07 '19 at 09:24
  • https://stackoverflow.com/a/52831036/2252830 – pskink Nov 07 '19 at 09:46
  • Don't see how imageshader helps here. Can you elaborate it bit more please. it should include clippath so user click events impact on the puzzle piece area. – Patola Nov 08 '19 at 02:55
  • something like that: https://pastebin.com/raw/RgMBjBSQ – pskink Nov 08 '19 at 05:45
  • yup, thanks. I ll try it out. Does it take into account of clip path? Also Noticed applyBoxFit method u have used. So trying to use that and improve the existing implementation. – Patola Nov 08 '19 at 08:42
  • `"So trying to use that and improve the existing implementation"` - it will not work - that implementation is a workaround - sooner or later you will get into another problem – pskink Nov 09 '19 at 05:22

1 Answers1

0

Use applyBoxFit(BoxFit.fitHeight, widgetSize, imageSize)

Where:

  • widgetSize - size of rendered Image widget. In your case, it is Size(reqWidth, reqHeight)
  • imageSize - size of your image asset in pixels. How to get image size

References: applyBoxFit

Mihail Ya
  • 361
  • 3
  • 6