如何仅通过Canvas变换操作实现任意位置矩形的视图居中与缩放

你的代码无法实现预期效果的核心原因是Canvas变换的调用顺序错误：
Flutter中Canvas的变换操作是矩阵右乘逻辑，先调用的变换会后作用于绘制内容。你将居中平移操作放在了缩放之后，导致平移的距离被缩放倍率放大，无法实现正确居中。

同时你希望描边不随缩放变化的需求，使用Path.transform的方案更贴合，因为变换仅作用于路径坐标，不会影响Canvas的绘制参数。

仅需要调整变换调用顺序即可实现缩放+居中效果：

@override
void paint(Canvas canvas, Size size) {
  var rect = Rect.fromLTRB(-14, -20 , 200.0, 80.0);
  var centerX = size.width / 2;
  var centerY = size.height / 2;
  var scale = 2.0;

  canvas.save();
  // 正确变换顺序：先移到视图中心 → 再缩放 → 再对齐矩形中心
  canvas.translate(centerX, centerY);
  canvas.scale(scale);
  canvas.translate(-rect.center.dx, -rect.center.dy);

  // 原有绘制逻辑不变
  canvas.drawRect(rect, Paint()..color = Colors.red);
  var innerRect = rect.deflate(3);
  canvas.drawRect(innerRect, Paint()..color = Colors.white.withOpacity(0.8));
  canvas.drawCircle(Offset(rect.center.dx,rect.center.dy) , 3.0 , Paint()..color = Colors.red);

  canvas.restore();
  canvas.drawCircle(Offset(centerX , centerY) , 4.0 , Paint()..color = Colors.black.withOpacity(0.32));
}

所有变换仅作用于路径坐标，Canvas本身无变换，描边宽度会保持固定值：

@override
void paint(Canvas canvas, Size size) {
  var rect = Rect.fromLTRB(-14, -20 , 200.0, 80.0);
  var centerX = size.width / 2;
  var centerY = size.height / 2;
  var scale = 2.0;

  // 构建变换矩阵
  final transformMatrix = Matrix4.identity()
    ..translate(centerX, centerY)
    ..scale(scale)
    ..translate(-rect.center.dx, -rect.center.dy);

  // 生成变换后的路径
  final rectPath = Path()..addRect(rect);
  final transformedRect = rectPath.transform(transformMatrix.storage);
  final innerRectPath = Path()..addRect(rect.deflate(3));
  final transformedInnerRect = innerRectPath.transform(transformMatrix.storage);

  // 绘制内容，描边宽度不会被缩放
  canvas.drawPath(transformedRect, Paint()..color = Colors.red);
  canvas.drawPath(transformedInnerRect, Paint()..color = Colors.white.withOpacity(0.8));
  // 绘制变换后的矩形中心点
  final transformedCenter = rect.center.translate(0,0).transform(transformMatrix.storage);
  canvas.drawCircle(transformedCenter, 3.0, Paint()..color = Colors.red);

  // 绘制视图原始中心点
  canvas.drawCircle(Offset(centerX , centerY) , 4.0 , Paint()..color = Colors.black.withOpacity(0.32));
}

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