如何在 Flutter 上的 boxfit 后在屏幕上获得真实的图像大小答案

【问题标题】：How to get real image size on screen after boxfit on Flutter如何在 Flutter 上的 boxfit 后在屏幕上获得真实的图像大小
【发布时间】：2019-11-06 10:09:32
【问题描述】：

我使用以下代码在屏幕上绘制图像。我想在这张图片上画一个叠加层。但是，当图像高度较大时，boxfit 会减小图像宽度。发生这种情况时，我无法计算图像顶部和左侧绘制的位置。图片的宽高还是和屏幕大小相等，但是图片宽度是在中间画的，两边有间隙，明显小于屏幕大小。

有没有办法计算出精确的尺寸和顶部，图像被bixfited后的位置。

return Image.memory(
     imageBytes,
     width: reqWidth,
     height: reqHeight,
     filterQuality: FilterQuality.high,
     fit: BoxFit.fitHeight,
);

【问题讨论】：

如果你必须使用Canvas api 来绘制你的叠加层，为什么不使用Canvas.drawImage 并摆脱Image.memory？
我可以，但它不仅仅是绘制图像。该图像被分割并从中创建拼图。因此，为了绘制拼图，需要图像的精确尺寸。有关示例，请参见此处。 dragosholban.com/2019/02/16/….
所以用ImageShader和Camvas.drawPath()代替Canvas.drawImage - 不需要ClipPath - 在PuzzlePiecePainter内完成你的绘图
谢谢，但找不到 ImageShader 的任何示例。如何将其合并到示例中？
stackoverflow.com/a/52831036/2252830

标签： flutter flutter-layout

【解决方案1】：

使用applyBoxFit(BoxFit.fitHeight, widgetSize, imageSize)

地点：

widgetSize - 渲染图像小部件的大小。在你的情况下，它是Size(reqWidth, reqHeight)
imageSize - 图像资源的大小（以像素为单位）。 How to get image size

参考资料： applyBoxFit

【讨论】：