如何在Flutter中用drawLine()和drawCircle()绘制带4条均分直径的圆形

你当前的问题在于：绘制的线条是从屏幕边缘延伸到边缘，而非贴合圆形边界；同时未通过角度计算实现线条的均匀分布。以下是修正方案：

核心改进要点 #

• 统一圆心与半径参数：避免硬编码，确保线条与圆形的边界匹配，防止线条超出或未覆盖圆形。
• 用三角函数计算精确端点：通过角度转弧度，结合余弦、正弦函数计算圆上的坐标，保证线条恰好连接圆形边缘。
• 循环批量绘制线条：通过循环生成均匀分布的线条，减少重复代码，也便于调整线条数量。

修正后的完整代码 #

import 'dart:math';
import 'package:flutter/material.dart';

class CurvePainter extends CustomPainter {
  // 角度转弧度工具方法
  double degToRad(num deg) {
    return deg * (pi / 180.0).toDouble();
  }

  @override
  void paint(Canvas canvas, Size size) {
    // 定义线条画笔
    final linePaint = Paint()
      ..color = Colors.white
      ..strokeWidth = 5;

    // 定义圆形填充画笔
    final circlePaint = Paint()
      ..color = const Color(0xff63aa65)
      ..style = PaintingStyle.fill;

    // 统一圆心和圆形半径
    final center = Offset(size.width / 2, size.height / 2);
    const circleRadius = 150.0;

    // 绘制圆形
    canvas.drawCircle(center, circleRadius, circlePaint);

    // 绘制4条均分的直径线（将圆分成8等份）
    const diameterCount = 4;
    // 每条线的角度间隔：360度 / 总份数（4条线对应8个扇形）
    final angleStep = 360 / (diameterCount * 2);

    for (int i = 0; i < diameterCount; i++) {
      final currentAngle = i * angleStep;
      // 直径两端的弧度（相差180度）
      final startRad = degToRad(currentAngle);
      final endRad = degToRad(currentAngle + 180);

      // 计算直径的两个端点坐标
      final startPoint = Offset(
        center.dx + circleRadius * cos(startRad),
        center.dy + circleRadius * sin(startRad),
      );
      final endPoint = Offset(
        center.dx + circleRadius * cos(endRad),
        center.dy + circleRadius * sin(endRad),
      );

      // 绘制单条直径
      canvas.drawLine(startPoint, endPoint, linePaint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

调整说明 #

如果需要将圆形分成4等份（仅两条垂直直径），只需将diameterCount改为2，此时角度间隔会自动变为90度，生成两条垂直的直径线。

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