Flutter Canvas绘制票据模型：path.arcToPoint无法绘制半圆

我正在尝试使用Dart Canvas绘制如图所示的票据模型，但无法绘制出这些半圆，path.arcToPoint 方法似乎无法正常工作。

解决办法 #

• 优先用arc方法绘制半圆更直观，它可以直接指定圆心、半径、起始角度和结束角度：

  import 'dart:math' as math;
  import 'dart:ui';
  
  // 示例：绘制票据左上角的半圆（左上角顶点坐标为(left, top)，半圆半径为radius）
  void drawTopLeftArc(Path path, double left, double top, double radius) {
    path.moveTo(left + radius, top);
    // 从180度（π弧度）画到270度（1.5π弧度），逆时针绘制
    path.arc(Offset(left + radius, top + radius), radius, math.pi, math.pi * 1.5, false);
  }
  

• 若坚持使用arcToPoint，需保证路径起始点与目标点的距离等于2倍半径，且参数设置正确，以绘制右侧中间的半圆为例：

  // 假设当前路径已移动到右侧边缘上方点(right, topEdge)，半圆半径为radius
  path.arcToPoint(
    Offset(right, topEdge + 2 * radius),
    radius: Radius.circular(radius),
    clockwise: false, // 控制圆弧方向，按需调整
  );
  

• 绘制完整票据时，要确保直线段和圆弧段的路径连续，避免断点，最后通过canvas.drawPath(path, paint)完成绘制。

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