Flutter使用CustomPainter绘制可高亮SVG时缩放异常如何解决

核心问题定位 #

• 大部分适配失败的原因是未基于整个SVG的全局原始边界计算缩放规则，仅使用单个路径边界或手动估算缩放比例
• 变换矩阵应用时机错误：单独给每个路径应用变换，而非在绘制所有路径前统一对画布做变换
• 未正确处理applyBoxFit返回的偏移量与缩放比例的对应关系

修复步骤 #

1. 提前计算所有肌肉路径的全局原始边界 #

解析完全部SvgMuscle的Path后，合并所有路径的边界得到SVG原图的完整尺寸，代码示例：

// 解析完全部SVG路径后计算全局边界
Rect getGlobalSvgBound(List<SvgMuscle> muscles) {
  Rect globalBound = Rect.zero;
  for (final muscle in muscles) {
    final pathBound = muscle.path.getBounds();
    globalBound = globalBound.expandToInclude(pathBound);
  }
  return globalBound;
}

2. 基于applyBoxFit生成正确变换矩阵 #

不要手动拼接Matrix4，直接用applyBoxFit的返回值计算变换，示例：

@override
void paint(Canvas canvas, Size size) {
  // 拿到提前计算好的SVG全局原始边界
  final sourceRect = globalSvgBound;
  // 目标画布的可用绘制区域，可按需加内边距
  final destinationRect = Offset.zero & size;
  
  // 计算适配规则，BoxFit.contain会保持宽高比完整显示，可根据需求换fitWidth/fill等
  final fittedSizes = applyBoxFit(BoxFit.contain, sourceRect.size, destinationRect.size);
  final sourceSize = fittedSizes.source;
  final destinationSize = fittedSizes.destination;
  
  // 计算缩放比例
  final scaleX = destinationSize.width / sourceSize.width;
  final scaleY = destinationSize.height / sourceSize.height;
  
  // 计算偏移量，让绘制内容居中
  final offset = destinationRect.center - sourceRect.center.scale(scaleX, scaleY);

  // 保存画布状态，统一应用变换
  canvas.save();
  canvas.translate(offset.dx, offset.dy);
  canvas.scale(scaleX, scaleY);
  
  // 绘制所有肌肉路径
  for (final muscle in muscles) {
    final paint = Paint()
      ..style = PaintingStyle.fill
      ..color = muscle.isHighlight ? Colors.red : Colors.grey;
    canvas.drawPath(muscle.path, paint);
  }
  
  // 恢复画布状态
  canvas.restore();
}

3. 排查额外错位问题 #

如果适配后仍有错位，检查以下两点：

• 解析SVG路径时是否处理了路径自带的transform属性，部分SVG的单个路径会自带平移/缩放变换，未解析会导致坐标偏移
• 确认没有对单个Path单独调用transform方法，统一在画布层做变换即可

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