使用CustomPainter绘图时线条总是以圆形结尾的问题求助

核心问题分析 #

你的代码中主动在每条线条的终点绘制了圆形（paint方法里的else if分支），这是导致每条线都有圆形结尾的直接原因。

修改步骤 #

1. 移除主动绘制圆形的逻辑

删除paint方法中额外绘制圆形的分支，改用更简洁的逻辑连接有效点位：

@override
void paint(Canvas canvas, Size size) {
  Offset? previousPoint;
  for (final point in points) {
    if (point.isInfinite) {
      previousPoint = null;
      continue;
    }
    if (previousPoint != null) {
      canvas.drawLine(previousPoint, point, _paint);
    }
    previousPoint = point;
  }
}

这个逻辑会自动跳过Offset.infinite分隔符，连续连接正常点位，不会额外生成圆形结尾。

2. 显式设置Paint的端点样式（可选）

如果需要线条两端完全平整，初始化Paint时显式指定strokeCap：

@override
void initState() {
  super.initState();
  _paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 8
    ..strokeCap = StrokeCap.butt; // 平端样式，默认即为该值，可按需改为square/round
}

3. 保留原有手势逻辑

GestureDetector中存储点位和添加分隔符的逻辑无需修改，可继续用于区分不同笔画。

修改后的关键代码片段 #

Paint初始化：

@override
void initState() {
  super.initState();
  _paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 8
    ..strokeCap = StrokeCap.butt;
}

DrawingPainter的paint方法：

@override
void paint(Canvas canvas, Size size) {
  Offset? previous;
  for (final point in points) {
    if (point.isInfinite) {
      previous = null;
      continue;
    }
    if (previous != null) {
      canvas.drawLine(previous, point, _paint);
    }
    previous = point;
  }
}

修改后绘制的线条将不再出现多余的圆形结尾，呈现正常的连续线条效果。

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