如何动态地将时间放置在时钟中？

Question

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

现在我想像下面这样将小时数添加到时钟中。

给定圆的 cx、cy、r 和 stroke-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 Lhomme 的回答给了我最好的图纸

如何让时间进入圈内？他们非常接近，但我希望他们在里面。

谢谢！

Answer 1

从圆心开始，使用 sin 和 cos 三角函数计算要显示给定小时数字的点的中心。

要计算每个数字的中心点，类似这样的方法可能有效（未经测试）：

// This will calculate the center point for the location at which a
// label for the given hour should be:
Point2D.Double getHourLocation(int hour, int clockDiameter)
{
    double radians;
    double x;
    double y;

    // assume 360 degrees, so range needs to be 0..360:
    // first, adjust hour so 0 is at the top, 15s is at 3 o'clock, etc
    // 360/12 = 30, so
    hour *= 30;

    // calculate x, y angle points relative to center
    radians = Math.toRadians(hour * Math.PI / 180);
    x = Math.cos(radians);
    y = Math.sin(radians);

    // sin() and cos() will be between -1.0 and 1.0 so adjust for that
    x *= 100;
    y *= 100;

    // x, y points should now be relative to center of clock
    x += clockDiameter;
    y += clockDiameter;

    return new Point2D.Double(x, y);
}

计算出该位置后，您必须根据字体特征进行调整。例如，假设您知道“12”文本应该以 (-50,50) 为中心 - 您需要调整 x,y 坐标以考虑文本宽度和高度以确定实际开始绘制的位置.

Answer 2

需要用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'

如何动态地将时间放置在时钟中？

How to place the hours in a clock dynamically?

algorithm

svg

graphics

geometry