Flutter在iOS设备绘制平滑线条出现尖锐边缘问题求助

问题根源 #

当前路径生成逻辑存在两个核心问题，导致iOS端出现尖锐末端：

1. 路径未延伸至最后一个绘制点：原循环仅处理到points.length - 1，路径终点停留在倒数第二个点的中点，而非用户实际绘制的最后一个点，StrokeCap.round无法作用于截断的末端。
2. iOS渲染敏感性：iOS的Skia引擎对路径末端细节的处理比Android更严格，未闭合/未完整延伸的路径会直接暴露尖锐边缘。

修复方案 #

修改DrawingEngine的路径生成逻辑，确保路径完整覆盖所有绘制点，同时优化贝塞尔曲线的衔接逻辑：

class DrawingEngine {
  Path createPath(List<Offset> points) {
    if (points.length < 2) return Path();
    
    final path = Path();
    path.moveTo(points.first.dx, points.first.dy);

    // 处理中间点，用二次贝塞尔曲线平滑过渡
    for (int i = 1; i < points.length - 1; i++) {
      // 计算当前点与下一个点的中点作为贝塞尔终点
      final midPoint = Offset(
        (points[i].dx + points[i+1].dx) / 2,
        (points[i].dy + points[i+1].dy) / 2,
      );
      // 以当前点为控制点，绘制到中点
      path.quadraticBezierTo(
        points[i].dx, 
        points[i].dy, 
        midPoint.dx, 
        midPoint.dy
      );
    }

    // 连接到最后一个绘制点，确保路径终点完整
    path.lineTo(points.last.dx, points.last.dy);
    
    return path;
  }
}

额外优化建议 #

如果需要更极致的平滑度，可以改用优化后的二次贝塞尔算法，进一步提升线条连贯性：

class DrawingEngine {
  Path createPath(List<Offset> points) {
    if (points.length < 2) return Path();
    
    final path = Path();
    path.moveTo(points.first.dx, points.first.dy);

    for (int i = 0; i < points.length - 1; i++) {
      final current = points[i];
      final next = points[i+1];
      
      Offset controlPoint;
      if (i == 0) {
        // 第一个线段：用当前点与下一个点的中点作为控制点
        controlPoint = Offset(
          (current.dx + next.dx) / 2,
          (current.dy + next.dy) / 2,
        );
      } else if (i == points.length - 2) {
        // 最后一个线段：用当前点与下一个点的中点作为控制点
        controlPoint = Offset(
          (current.dx + next.dx) / 2,
          (current.dy + next.dy) / 2,
        );
      } else {
        // 中间线段：用上一个点与下一个点的中点作为控制点
        final prev = points[i-1];
        controlPoint = Offset(
          (prev.dx + next.dx) / 2,
          (prev.dy + next.dy) / 2,
        );
      }
      
      path.quadraticBezierTo(
        current.dx, 
        current.dy, 
        controlPoint.dx, 
        controlPoint.dy
      );
    }

    path.lineTo(points.last.dx, points.last.dy);
    return path;
  }
}

验证要点 #

修改后需重点测试：

• 左右来回绘制直线，确认末端呈现圆形帽
• 快速绘制曲线，检查线条平滑度是否符合预期
• 在iOS模拟器和实体iPad上验证效果一致性

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