如何为GPS航点应用中已绘制的罗盘添加周边度数字本标识

核心实现逻辑 #

• 确定基础参数：先获取罗盘的圆心坐标（centerX, centerY）、罗盘外圈半径，度数字本距离圆心的半径设置为比罗盘外圈半径大10~15dp，避免文本和罗盘边框、刻度重叠。
• 坐标计算逻辑：每一个度数θ对应的文本绘制坐标可通过三角函数计算，通用公式如下：

textX = centerX + cos(θ * π / 180) * textRadius
textY = centerY + sin(θ * π / 180) * textRadius

注意Android、iOS、Web Canvas等主流绘制框架的Y轴默认向下，计算时可将θ减去90度做偏移，保证0度（正北）对应罗盘正上方位置。

• 标注间隔设置：建议每15度或30度标注一次文本，0度替换为「N」、90度替换为「E」、180度替换为「S」、270度替换为「W」，其余标注对应数字即可，视觉辨识度更高。

主流平台参考代码 #

Web Canvas实现 #

const canvas = document.getElementById('compass');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const compassRadius = 150;
const textRadius = compassRadius + 20;

// 每30度标注一次
for (let deg = 0; deg < 360; deg += 30) {
  const radian = (deg - 90) * Math.PI / 180; // 偏移90度让0度对应正上方
  const x = centerX + Math.cos(radian) * textRadius;
  const y = centerY + Math.sin(radian) * textRadius;
  
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = '14px sans-serif';
  // 替换方位文本
  const text = deg === 0 ? 'N' : deg === 90 ? 'E' : deg === 180 ? 'S' : deg === 270 ? 'W' : deg.toString();
  ctx.fillText(text, x, y);
}

Android Kotlin实现 #

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val centerX = width / 2f
    val centerY = height / 2f
    val compassRadius = 300f
    val textRadius = compassRadius + 40f
    val paint = Paint().apply {
        textSize = 40f
        textAlign = Paint.Align.CENTER
        color = Color.BLACK
    }
    
    for (deg in 0 until 360 step 30) {
        val radian = Math.toRadians((deg - 90).toDouble())
        val x = centerX + (Math.cos(radian) * textRadius).toFloat()
        val y = centerY + (Math.sin(radian) * textRadius).toFloat()
        val text = when(deg) {
            0 -> "N"
            90 -> "E"
            180 -> "S"
            270 -> "W"
            else -> deg.toString()
        }
        canvas.drawText(text, x, y, paint)
    }
}

常见问题调整 #

• 文本方向倒转：绘制单条文本前先将Canvas旋转对应度数，绘制完成后恢复画布状态即可保证文本一直正向显示。
• 文本和刻度重叠：调整textRadius数值拉大文本和罗盘外圈的距离，或缩小标注文本字号即可。

内容的提问来源于stack exchange，提问作者Chris Marshall Iheacho