Flutter中能否获取圆形图片的对应角度并在指定位置绘制内容？

核心实现思路 #

将圆形地图图片放置在正方形容器内，以容器中心点作为圆形的圆心，所有角度计算、坐标转换都基于该坐标系完成，通过自定义绘制实现角度计算和内容渲染。

1. 任意点角度计算步骤 #

• 确保圆形图片所在容器为正方形，圆形直径等于正方形边长，记边长为size，则圆心坐标为(size/2, size/2)
• 获取目标点相对于容器的本地坐标(pointX, pointY)，如果是触摸点需要通过GlobalKey的currentContext?.findRenderObject()的globalToLocal方法转换为容器内相对坐标，不能直接使用全局屏幕坐标
• 计算目标点相对于圆心的偏移量：

  double dx = pointX - size/2;
  double dy = pointY - size/2;
  

• 引入dart:math库完成弧度转角度计算：

  double radian = atan2(dy, dx);
  double angle = radian * 180 / pi;
  

• 角度归一化处理，将默认返回的[-180, 180]范围转换为常用的[0, 360]范围：

  if (angle < 0) angle += 360;
  

默认计算逻辑中0度对应正右方向，顺时针角度递增，如果业务需要0度对应正上方向，计算完成后加90度再做一次归一化即可

2. 指定角度绘制自定义内容 #

通过继承CustomPainter实现自定义绘制类，在paint方法中完成所有绘制逻辑：

• 先裁剪圆形绘制区域，再绘制地图底图，保证底图为圆形：

  // 裁剪圆形区域
  Path circlePath = Path()..addOval(Rect.fromLTWH(0, 0, size.width, size.height));
  canvas.clipPath(circlePath);
  // 绘制地图底图
  canvas.drawImageRect(mapImage, Rect.fromLTWH(0, 0, mapImage.width.toDouble(), mapImage.height.toDouble()), Rect.fromLTWH(0, 0, size.width, size.height), Paint());
  

• 已知目标角度targetAngle、自定义内容距离圆心的半径r，计算绘制坐标：

  double targetRadian = targetAngle * pi / 180;
  double drawX = size/2 + r * cos(targetRadian);
  double drawY = size/2 + r * sin(targetRadian);
  

• 在计算出的(drawX, drawY)位置绘制自定义内容即可，支持绘制圆点、文字、图标等任意元素，调用canvas.drawCircle、TextPainter.paint等对应API即可实现。

3. 注意事项 #

• 触摸事件可以通过GestureDetector的onPanDown、onPanUpdate回调监听，实时计算触摸点对应角度
• 如果需要支持圆形地图的缩放、平移交互，所有坐标计算需要同步乘以缩放系数、叠加平移偏移量，避免角度计算出现偏差

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