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
相关产品推荐
相关产品推荐

