我用Java制作了一个SVG时钟,在SVG文件中画了一个圆圈和三条动画线。我的钟就是这样的。
现在我想把时间加在时钟上,如下所示。
在给定圆的cxcyrstroke-width的情况下,如何进行计算我希望用户提供这些值,并绘制其余值,包括小时、分钟和秒针我不担心时钟指针,我能搞清楚,但我不知道如何动态地把时间放在时钟上我不想手动放置它们。
这是我的SVG文件。

<svg xmlns = 'http://www.w3.org/2000/svg' version = '1.1' width="500.0" height="500.0">



<circle cx="100.0" cy="100.0" r="50.0" stroke="none" stroke-width="1.0" fill="rgba(102,205,170,0.4)"/>

<line x1="100" y1="100" x2="100" y2="62" stroke="red" stroke-width="2.0" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="500ms" repeatCount="indefinite"></animateTransform>
 </line>

<line x1="100" y1="100" x2="100" y2="62" stroke="black" stroke-width="2.0" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="3s" repeatCount="indefinite"></animateTransform>
 </line>


<line x1="100" y1="100" x2="100" y2="75" stroke="black" stroke-width="4.0" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="40s" repeatCount="indefinite"></animateTransform>
 </line>


</svg>

我该怎么做呢?作为计算的一部分,我需要哪些变量?我正在寻找一个公式,以便正确地安排时间。
更新:Michaël lHome给了我最好的答案
我怎样才能让时间进入圆圈他们很近,但我希望他们在里面。
谢谢!

最佳答案

需要使用cos和sin函数计算圆上每个点的坐标:

/*
 * @param radius The clock radius
 * @param cx X coordinates of the clock's center
 * @param cy Y coordinates of the clock's center
 */
void drawHours(int radius, int cx, int cy) {
  for(int i = 1; i <= 12; i++) {
    double x = radius * Math.cos(Math.PI / -2 + (2 * i * Math.PI) / 12) + cx
    double y = radius * Math.sin(Math.PI / -2 + (2 * i * Math.PI) / 12) + cy

    String text = Integer.toString(i);
    //draw text at [x, y] using style 'text-anchor' set to 'middle' and 'alignment-baseline' set to 'middle'
  }
}

要调整文本的位置,请使用svg对齐属性“文本定位”和“对齐基线”

10-07 19:11
查看更多