Flutter中Canvas.drawArc绘制整圆而非目标弧的问题求助

嘿，我一眼就揪出问题所在啦！你碰到的核心问题是**drawArc的角度参数需要用弧度，但你传入的是度数**，另外矩形的位置设置也可能让显示效果和预期不符。

问题根源拆解 #

Flutter里Canvas.drawArc的startAngle和sweepAngle参数，接收的是弧度值，不是我们日常用的度数。你传入的10.0和20.0会被当作弧度解析——10弧度差不多是573度，20弧度更是1146度，这么大的扫过角度，自然会画出完整的椭圆啦！

另外，你用Rect.fromLTWH(0.0, 0.0, size.width/2, size.height/2)创建的矩形是从CustomPaint左上角开始的，这会让椭圆位置偏在左上角，和你预期的中心对齐效果不符。

修改后的完整代码 #

我帮你调整了代码，解决这两个问题：

import 'dart:math'; // 别忘了引入math库来调用pi常量

@override
void paint(Canvas canvas, Size size) {
  final Paint paint = Paint()
    ..isAntiAlias = true
    ..strokeWidth = 1.0
    ..color = Colors.blue[500]!
    ..style = PaintingStyle.stroke;

  // 把度数转换成弧度（公式：弧度 = 度数 × π ÷ 180）
  final startAngle = 10 * pi / 180; // 对应10度的起始角度
  final sweepAngle = 20 * pi / 180; // 对应20度的扫过角度

  // 让椭圆中心对齐CustomPaint的中心，显示更符合预期
  final rect = Rect.fromCenter(
    center: Offset(size.width / 2, size.height / 2),
    width: size.width / 2,
    height: size.height / 2,
  );

  canvas.drawArc(rect, startAngle, sweepAngle, false, paint);
}

如何绘制1/4圆 #

如果想画1/4圆（90度），只需要把sweepAngle改成pi/2就行（因为π弧度等于180度，π/2就是90度），示例代码如下：

// 从0弧度（水平向右方向）开始，扫过90度的弧
final startAngle = 0.0;
final sweepAngle = pi / 2;

额外小提示 #

如果还是显示异常，记得给CustomPaint设置明确的尺寸，比如用SizedBox包裹：

SizedBox(
  width: 300,
  height: 300,
  child: CustomPaint(
    painter: CircleGraphWidget(),
    child: Center(child: Text('Here\'s text')),
  ),
)

这样能避免父布局尺寸不确定导致的椭圆变形问题。

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