如何使用三角函数制作自定义视图拨号图形

Question

我正在尝试创建一个自定义视图，该视图显示带有数字1-10的表盘。我使用三角函数查找表盘数字的X和Y位置。我没有问题可以找到圆的位置，但是我无法将它们进一步对准表盘的中心。例如，以数字6为例，我只是希望将其放置在稍厚的白色刻度线上方。

我尝试过“缩短半径”的版本。

val diameter = Math.min(width, height)
val radius = diameter / 2 
val distance = radius * 0.20f //20% of radius

然后从半径中减去“距离”以找到那里的X和Y位置，然后在没有运气的情况下在这些位置上加上数字。

下面是计算X和Y位置并添加在拨号屏幕截图中显示的数字的代码。

for (i in 1..10) {
canvas?.drawText(i.toString(),cx.toFloat() + 
(Math.cos(Math.toRadians(degrees.getInt(feetNumber,0).toDouble())).toFloat()) *     
radius - (paint.measureText(i.toString()) / 2),
                cy.toFloat() + 
(Math.sin(Math.toRadians(degrees.getInt(feetNumber,0).toDouble())).toFloat()) * 
radius + (paint.measureText(i.toString()) / 2), paint)

feetNumber++;
}

我已将度数添加到数组资源文件中。

<resources>
<array
  name="degrees">
  <item>270</item>
  <item>306</item>
  <item>342</item>
  <item>18</item>
  <item>54</item>
  <item>90</item>
  <item>126</item>
  <item>162</item>
  <item>198</item>
  <item>234</item>
</array>
</resources>

如果有人能帮助我理解如何在通常在表盘中找到数字的粗刻度线后的短空格处绘制数字，我将不胜感激。

Answer 1

我找到了解决我问题的方法。问题是我无法计算canvas?.drawText()中的半径，因此我需要使用预先计算的值。

val radius = diameter / 2
val mark = radius * 0.30f
val shorterRadius = radius - mark

，然后将shorterRadius内的canvas?.drawText()与其余的计算一起使用。

然后我的拨盘看起来像所附的图片。