You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中使用drawLine()将圆16等分的坐标计算问题

Flutter CustomPaint 绘制圆形16等分线坐标问题

我正尝试使用drawLine()函数绘制8条直线,将直径500的圆形划分为16个相等部分。目前水平、垂直方向的居中分割线绘制效果正常,但已绘制的两条对角线无法精准穿过对应象限中心,导致部分象限面积大小不一,当前实现效果参考:
实现效果截图

现有实现代码

父类组件代码

class _AnimatedCircleState extends State<AnimatedCircle> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 500,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.red,
          ),
          child: CustomPaint(
            size: Size(500, 500),
            painter: Painter(),
          ),
        ),
      ),
    );
  }
}

CustomPainter 绘制逻辑代码

class Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Offset p1(double dx, double dy) {
      return Offset(dx, dy);
    }
    Offset p2(double dx, double dy) {
      return Offset(dx, dy);
    }

    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2;
    // 垂直居中分割线
    canvas.drawLine(p1(250, 0), p2(250, 500), paint);
    // 对角线1
    canvas.drawLine(p1(415, 62.5), p2(85, 437.5), paint);
    // 水平居中分割线
    canvas.drawLine(p1(0, 250), p2(500, 250), paint);
    // 对角线2
    canvas.drawLine(p1(415, 437.5), p2(85, 62.5), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

核心诉求

  • 找到每条分割线两个端点的准确x、y坐标计算方法
  • 此前尝试的计算逻辑:360°除以16等份得到单份角度为22.5°,取半径500分别乘以sin(22.5°)、cos(22.5°)得到对应x、y值,但代码运行效果不符合预期,初步判断是坐标原点偏移导致计算偏差
  • 需要修正已有对角线的坐标使其精准穿过对应象限中心,同时补全剩余4条分割线的坐标参数

内容的提问来源于stack exchange,提问作者public static void Main

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 21:36:15