Flutter手写绘图应用：如何消除线条的颗粒感？

你的代码用折线直接连接采样点，这是线条出现颗粒感的核心原因，结合高光笔的渲染需求，可通过以下几点调整解决：

• 改用平滑贝塞尔曲线构建路径
  替换path.addPolygon(l, false)的直线连接方式，用二次贝塞尔曲线拟合连续采样点，让线条过渡更自然：

  var path = Path();
  if (l.isEmpty) continue;
  // 移动到第一个点
  path.moveTo(l[0].dx, l[0].dy);
  // 遍历点，用二次贝塞尔曲线绘制平滑段
  for (int i = 1; i < l.length - 1; i++) {
    final midPoint = Offset(
      (l[i].dx + l[i+1].dx) / 2,
      (l[i].dy + l[i+1].dy) / 2,
    );
    path.quadraticBezierTo(l[i].dx, l[i].dy, midPoint.dx, midPoint.dy);
  }
  // 连接到最后一个点
  if (l.length > 1) {
    path.lineTo(l.last.dx, l.last.dy);
  }
  

• 调整Paint的线条连接属性
  新增strokeJoin = StrokeJoin.round，让线条转角处平滑过渡，避免硬棱角带来的颗粒感，同时保留高光笔的方形端点：

  Paint()
    ..color = color!.withOpacity(opacity)
    ..strokeWidth = size!
    ..strokeCap = StrokeCap.square
    ..strokeJoin = StrokeJoin.round // 平滑线条连接处
    ..style = PaintingStyle.stroke
    ..isAntiAlias = true;
  

• 优化采样点密度（可选）
  如果触控笔采样点稀疏，可在收集DotInfo时对相邻点插值补点，比如当两点距离超过设定阈值时，插入若干中间点，提升路径细腻度。

• 极端情况：调整CustomPaint渲染参数
  若硬件加速导致渲染异常，可给CustomPaint添加参数强制软件渲染优化：

  CustomPaint(
    painter: HighlighterDrawingPainter(lines),
    isComplex: true,
    willChange: true,
  )
  

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