4

いくつかの基本的な CSS プロパティを使用して、アナログの 12 時間時計を作成してみることにしました。まず、500px の正方形の div を作成します。次に、border-radius を 250px に設定し、見栄えの良い円を取得します。この後、12 個の目盛りを追加し、それらを絶対位置に配置して、対応する位置を取得します。

各目盛りの角度はこれに基づいています (単純な計算を綴って申し訳ありません)。

  • 12の目盛り
  • 私たちのサークルで360°
  • 360 / 12 = 30° の角度

各目盛りの位置は、いくつかの基本的な三角法を使用して計算できます。θ (0°、30°、60°など) と半径 (250) を知っているので、 と を使用cosしsinて、関連する上下左右の値を計算できます。左または右の値 (x) を取得するには、次を使用するだけですr * sin θ。上位または下位の値 (y) を取得するには、次を使用できますr - (r * cos θ)。下の画像 (MS Paint のスキル不足をお許しください) が、私がやろうとしていることを明確にするのに役立つことを願っています。

下の画像

これらの方程式が得られると、それぞれの x 値と y 値を取得するのがはるかに簡単になります。

    θ (angle)   |  250 * sin θ [x]  | 250 - (250 * cos θ) [y]
--------------------------------------------------------------
   30° (1:00)   |   right: 125px    |      top: 33.5px
   60° (2:00)   |   right: 33.5px   |      top: 125px
   90° (3:00)   |   right: 0px      |      top: 250px
  120° (4:00)   |   right: 33.5px   |      bottom: 125px
  150° (5:00)   |   right: 125px    |      bottom: 33.5px
  180° (6:00)   |   right: 250px    |      bottom: 0px
  210° (7:00)   |   left: 125px     |      bottom: 33.5px
  240° (8:00)   |   left: 33.5px    |      bottom: 125px
  270° (9:00)   |   left: 0px       |      bottom: 250px
  300° (10:00)  |   left: 33.5px    |      top: 125px
  330° (11:00)  |   left: 125px     |      top: 33.5px
  360° (12:00)  |   left: 250px     |      top: 0px

あまりにも長い間質問を引きずっていたので...私の質問は、2、3、4、8、9、および10の目盛りがすべて少しずれているのはなぜですか? 私の計算に基づくと (私は常にそう言いたかったのですが)、これらの問題は発生しないはずです。確かに、いくつかの丸めを行い、いくつかの sig fig を省略しましたが、それらはポジショニングが不安定に見えるほど重要ではありません。これが私のコードです：

HTML

<body>
    <div id="clock">
        <div id="one" class="oneEleven tick"></div>
        <div id="two" class="twoTen tick"></div>
        <div id="three" class="threeNine tick"></div>
        <div id="four" class="fourEight tick"></div>
        <div id="five" class="fiveSeven tick"></div>
        <div id="six" class="sixTwelve tick"></div>
        <div id="seven" class="fiveSeven tick"></div>
        <div id="eight" class="fourEight tick"></div>
        <div id="nine" class="threeNine tick"></div>
        <div id="ten" class="twoTen tick"></div>
        <div id="eleven" class="oneEleven tick"></div>
        <div id="twelve" class="sixTwelve tick"></div>
    </div>
</body>

CSS

#clock {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  border: 1px solid black;
  position: relative;
}

.tick {
  background-color: black;
  height: 20px;
  width: 5px;
  position: absolute;
}

.oneEleven {
  /* ~6.7% */
  top: 33.5px;
}

.twoTen {
  /* 25% */
  top: 125px;
}

.threeNine {
  /* 50% */
  top: 250px;
}

.fourEight {
  /* 25% */
  bottom: 125px;
}

.fiveSeven {
  /* ~6.7% */
  bottom: 33.5px;
}

#one {
  right: 125px;
  transform: rotate(30deg);
}

#two {
  /* ~93.3% */
  right: 33.5px;
  transform: rotate(60deg);
}

#three {
  right: 0px;
  transform: rotate(90deg);
}

#four {
  right: 33.5px;
  transform: rotate(120deg);
}

#five {
  right: 125px;
  transform: rotate(150deg);
}

#six {
  left: 250px;
  bottom: 0px;
}

#seven {
  left: 125px;
  transform: rotate(-150deg);
}

#eight {
  left: 33.5px;
  transform: rotate(-120deg);
}

#nine {
  left: 0px;
  transform: rotate(-90deg);
}

#ten {
  left: 33.5px;
  transform: rotate(-60deg);
}

#eleven {
  left: 125px;
  transform: rotate(-30deg);
}

#twelve {
  left: 250px;
  top: 0px;
}

jsFiddle。_ 一見すると完全にはわかりませんが、私が参照した目盛りを見ると、それらが円の上に並んでいないことがわかります. 最終的にパーセンテージに移行する予定ですが、なぜオフになっているのかを知りたいのですが、スタイルを追加したいサークルを作成するには、これが最善の方法ですか? HTML5 の canvas タグがあることは理解していますが、それを使用するのは難しすぎて、実行する必要がある以上の処理を行っているように感じます...

どんな助けでも大歓迎です！

4

1 に答える 1

3

各目盛りを配置して、円の正しい位置に 1 つのコーナーを配置したようです。しかし、目盛りは原点を中心に回転し、その一部が円の外に押し出されます。ティックごとに transform-origin を適切に設定することで修正できるはずです。配置したのと同じコーナーを中心に回転する必要があります。したがって、上と右に配置する場合は、transform-origin を「右上」に設定します。例えば：

#two {
  /* ~93.3% */
  right: 33.5px;
  transform: rotate(60deg);
  transform-origin: top right;
}
于 2013-04-29T15:34:40.623 に答える