Flutter Canvas中如何按比例填充图像并显示中心60%区域？

1. 核心参数计算逻辑 #

因为图像是固定4:3比例，要实现显示图像中心60%区域并适配屏幕，需先计算缩放因子和平移偏移：

• 先拿到图像原始尺寸(imgWidth, imgHeight)和画布尺寸(canvasWidth, canvasHeight)
• 确定要显示的图像区域：取中心60%，所以显示区域宽为imgWidth * 0.6，高为imgHeight * 0.6（比例保持4:3）
• 计算缩放因子：分别用画布宽/显示区域宽、画布高/显示区域高，取两者中较小值，确保显示区域能完整适配画布且不拉伸
• 计算平移偏移：让缩放后的显示区域与画布中心对齐，同时调整图像绘制的起始坐标，确保只取中心60%的部分

参数计算代码片段：

double displayRatio = 0.6;
// 图像要显示的中心区域尺寸
double displayImgW = imgWidth * displayRatio;
double displayImgH = imgHeight * displayRatio;
// 计算适配画布的缩放因子
double scaleX = canvasWidth / displayImgW;
double scaleY = canvasHeight / displayImgH;
double scale = min(scaleX, scaleY);
// 画布平移量：让缩放后的显示区域居中
double canvasOffsetX = (canvasWidth - displayImgW * scale) / 2;
double canvasOffsetY = (canvasHeight - displayImgH * scale) / 2;
// 图像截取偏移：取中心60%区域的左上角坐标
double imgCropOffsetX = imgWidth * (1 - displayRatio) / 2;
double imgCropOffsetY = imgHeight * (1 - displayRatio) / 2;

2. 画布变换与绘制实现 #

在paint方法中，通过画布的平移、缩放变换，让图像和后续绘制的点线同步适配屏幕：

@override
void paint(Canvas canvas, Size size) {
  // 假设已加载图像并获取尺寸
  Image image = ...;
  Size imgSize = image.size;
  double imgWidth = imgSize.width;
  double imgHeight = imgSize.height;
  double canvasWidth = size.width;
  double canvasHeight = size.height;

  // 计算上述参数
  double displayRatio = 0.6;
  double displayImgW = imgWidth * displayRatio;
  double displayImgH = imgHeight * displayRatio;
  double scaleX = canvasWidth / displayImgW;
  double scaleY = canvasHeight / displayImgH;
  double scale = min(scaleX, scaleY);
  double canvasOffsetX = (canvasWidth - displayImgW * scale) / 2;
  double canvasOffsetY = (canvasHeight - displayImgH * scale) / 2;
  double imgCropOffsetX = imgWidth * (1 - displayRatio) / 2;
  double imgCropOffsetY = imgHeight * (1 - displayRatio) / 2;

  // 保存画布状态，避免影响其他绘制操作
  canvas.save();
  // 先平移到画布中心偏移位，再执行缩放
  canvas.translate(canvasOffsetX, canvasOffsetY);
  canvas.scale(scale);

  // 绘制图像的中心60%区域
  canvas.drawImageRect(
    image,
    Rect.fromLTWH(imgCropOffsetX, imgCropOffsetY, displayImgW, displayImgH),
    Rect.fromLTWH(0, 0, displayImgW, displayImgH),
    Paint(),
  );

  // 绘制点线：直接使用原始图像坐标系的坐标，变换会自动映射到屏幕
  // 示例：绘制一条红色线段
  canvas.drawLine(
    Offset(100, 100),
    Offset(300, 300),
    Paint()..color = Colors.red..strokeWidth = 2,
  );

  // 恢复画布原始状态
  canvas.restore();
}

3. 关键注意事项 #

• 用canvas.save()和canvas.restore()包裹变换逻辑，防止污染画布后续操作
• 绘制点线时直接用原始图像的坐标即可，画布变换会自动完成坐标映射
• 如果是异步加载的图像（如网络图），需确保图像加载完成后再执行参数计算和绘制，避免空指针或错误缩放

内容的提问来源于stack exchange，提问作者yshean