Flutter实现图片沿路径移动时转弯处自动左转90度

要实现海龟在路径转弯时自动转向，核心是利用PathMetric返回的Tangent对象中的方向向量，计算当前路径点的朝向角度，替换固定的旋转角度。具体实现步骤如下：

1. 清理路径冗余代码 #

你的getPath()方法里存在重复的lineTo调用，先删除冗余行，让路径逻辑更清晰：

Path getPath() {
  return Path()
    ..moveTo(_width, _height)
    ..lineTo(_width + _ratio, _height) // 向右移动
    ..lineTo(_width + _ratio, _height - _ratio) // 向上移动
    ..lineTo(_width - _ratio, _height - _ratio) // 向左移动
    ..lineTo(_width - _ratio, _height + _ratio); // 向下移动
}

2. 基于路径切线计算旋转角度 #

Tangent的direction属性是单位向量，代表当前路径点的前进方向。我们可以通过这个向量计算出海龟需要旋转的角度，替换原来固定的90度值：

修改paint方法中的旋转逻辑 #

if (image == null) {
  canvas.drawCircle(pos!.position, linePaint.strokeWidth / 2, linePaint);
} else {
  // 修正图片定位，让图片中心对齐路径点
  Offset location = Offset(
    pos!.position.dx - image!.width / 2, 
    pos.position.dy - image!.height / 2
  );
  canvas.save();
  double cx = pos.position.dx;
  double cy = pos.position.dy;
  
  // 根据切线方向计算弧度角度
  double angle = math.atan2(pos.direction.dy, pos.direction.dx);
  // 根据海龟图片初始朝向调整偏移：比如图片默认朝上，需要转90度朝右匹配第一段路径
  // 请根据你的图片实际朝向调整此值（0、π/2、-π/2等）
  angle -= math.pi / 2; 
  
  // 转成角度传入旋转方法
  rotateTurtle(canvas: canvas, cx: cx, cy: cy, angle: angle * 180 / math.pi);
  
  canvas.drawImage(image!, location, Paint()); // 用默认Paint绘制图片即可
  canvas.restore();
}

角度计算逻辑说明 #

• math.atan2(dy, dx)：通过方向向量的x、y分量计算弧度角度，结果范围为-π到π；
• 偏移调整：如果海龟图片默认朝向与路径初始方向不一致，需要添加角度偏移。比如图片默认朝上，而第一段路径是向右，就需要减去π/2（90度）让海龟朝右。

3. 完整修改后的MyPainter代码 #

import 'dart:math' as math;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class MyPainter extends CustomPainter {
  ui.Image? image;
  final double _width;
  final double _height;
  final int _ratio;
  final double _progress;

  MyPainter(this._width, this._height, int ratio, this._progress, [this.image]) 
      : _ratio = ratio * 10;

  @override
  void paint(Canvas canvas, Size size) {
    Paint linePaint = Paint()
      ..strokeWidth = 6
      ..strokeCap = StrokeCap.butt
      ..style = PaintingStyle.stroke;

    final path = getPath();
    final pathMetrics = path.computeMetrics();
    final pathMetric = pathMetrics.elementAt(0);
    final pos = pathMetric.getTangentForOffset(pathMetric.length * _progress);
    final extracted = pathMetric.extractPath(0.0, pathMetric.length * _progress);

    canvas.drawPath(extracted, linePaint);
    
    if (pos == null) return; // 处理progress为0或1的边界情况

    if (image == null) {
      canvas.drawCircle(pos.position, linePaint.strokeWidth / 2, linePaint);
    } else {
      final location = Offset(
        pos.position.dx - image!.width / 2, 
        pos.position.dy - image!.height / 2
      );
      canvas.save();

      final cx = pos.position.dx;
      final cy = pos.position.dy;

      double angle = math.atan2(pos.direction.dy, pos.direction.dx);
      // 根据图片初始朝向调整偏移，示例为默认朝上转朝右
      angle -= math.pi / 2; 

      rotateTurtle(canvas: canvas, cx: cx, cy: cy, angle: angle * 180 / math.pi);

      canvas.drawImage(image!, location, Paint());
      canvas.restore();
    }
  }

  void rotateTurtle({
    required Canvas canvas,
    required double cx,
    required double cy,
    required double angle,
  }) {
    canvas.translate(cx, cy);
    canvas.rotate(angle * math.pi / 180);
    canvas.translate(-cx, -cy);
  }

  Path getPath() {
    return Path()
      ..moveTo(_width, _height)
      ..lineTo(_width + _ratio, _height)
      ..lineTo(_width + _ratio, _height - _ratio)
      ..lineTo(_width - _ratio, _height - _ratio)
      ..lineTo(_width - _ratio, _height + _ratio);
  }

  @override
  bool shouldRepaint(covariant MyPainter oldDelegate) {
    return oldDelegate._progress != _progress || oldDelegate.image != image;
  }
}

关键注意事项 #

• 角度偏移需根据海龟图片的实际初始朝向调整，确保海龟前进方向与路径方向一致；
• 增加了if (pos == null) return，避免progress为0或1时出现空指针异常；
• 更新了shouldRepaint方法，当图片变化时也会触发重绘，保证视觉一致性。

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