如何动态地将小时放入时钟中？

Question

我使用 Java 制作了一个 svg 时钟，在 svg 文件中绘制了一个圆圈和三条动画线。这就是我的时钟的样子。

\n\n

\n\n

现在我想将小时添加到时钟中，如下所示。

\n\n

\n\n

如何根据圆的cx、cy、r和进行计算？stroke-width我希望用户提供这些值，然后我绘制其余的值，包括时针、分针和秒针。我不担心时钟指针，我可以弄清楚这一点，但我不知道如何动态地将小时放在时钟中。我不想手动放置它们。

\n\n

这是我的 SVG 文件。

\n\n

<svg xmlns = \'http://www.w3.org/2000/svg\' version = \'1.1\' width="500.0" height="500.0">\n\n\n\n<circle cx="100.0" cy="100.0" r="50.0" stroke="none" stroke-width="1.0" fill="rgba(102,205,170,0.4)"/>\n\n<line x1="100" y1="100" x2="100" y2="62" stroke="red" stroke-width="2.0" stroke-linecap="round">\n<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="500ms" repeatCount="indefinite"></animateTransform>\n </line>\n\n<line x1="100" y1="100" x2="100" y2="62" stroke="black" stroke-width="2.0" stroke-linecap="round">\n<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="3s" repeatCount="indefinite"></animateTransform>\n </line>\n\n\n<line x1="100" y1="100" x2="100" y2="75" stroke="black" stroke-width="4.0" stroke-linecap="round">\n<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="40s" repeatCount="indefinite"></animateTransform>\n </line>\n\n\n</svg>\n

\n\n

我该如何执行此操作？计算时需要哪些变量？我正在寻找一个公式来正确计算时间。

\n\n

更新：Micha\xc3\xabl Lhomme 的答案给了我最好的图纸

\n\n

\n\n

我怎样才能让时间进入圆圈内？他们非常接近，但我希望他们进去。

\n\n

谢谢！

\n

Answer 1

您需要使用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 对齐属性“text-anchor”和“alignment-baseline”