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

Question

我正在尝试创建一个自定义视图，该视图显示一个带有数字 1-10 的表盘。我正在使用三角函数找到表盘数字的 X 和 Y 位置。我可以毫无问题地找到圆圈周围的位置，但我无法将它们进一步对准表盘的中心。以数字 6 为例，我只想将它放在略高于粗白色刻度线的位置。

我试过"shortening the radius"的版本。

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

然后从半径中减去 'distance' 以找到那里的 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>

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

Answer 1

我找到了解决问题的方法。问题是我无法计算 canvas?.drawText() 中的半径，所以我需要提供预先计算的值。

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

然后使用 canvas?.drawText() 中的 shorterRadius 以及其余的计算。

那我的表盘就和附图一样了

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

how to make custom view dial drawing numbers with trigonometry

android

trigonometry

android-custom-view

android-canvas

android-graphics