CSSとJSでアナログ時計②文字盤を作る


前回作成した外枠に文字盤を追加してきます。

・今回の完成品

css_clock10

目盛

一般的なアナログ時計には2種類の目盛が存在します。
5分おきにプロットされた大きい目盛と、1分おきにプロットされた小さい目盛です。

大きな目盛

まず、12時の位置の大きな目盛だけ作成してみます。

css_clock4

(2px)×(10px)のdivタグを黒背景で描画しているだけですね。
今回は白い枠の中にdivを格納しているので、表示位置は白い枠を基準に考えます。
topは黒い枠にピッタリとくっつけたかったので0px。
leftは白い枠の横サイズ(180px)の半分(90px)から、今回のdivの横の半分(1px)を引いた(89px)を指定しています。

*

続いて1時の位置にある大きな目盛を作成します。
時計の中心点を基準に「transform: rotate」で右に30度傾けることで、綺麗に外周に沿って円形になってくれます。

css_clock5

transform-originは、transformの基準点を指定する属性です。
標準の出力位置からの相対指定になるので、横1px:縦90pxの位置に指定すると、ちょうど時計の中心になります。

transform: rotateは上記で指定した点を基準に、要素を回転させます。
単位は「度」で、「deg」を付けます。
まだベンダープレフィックスを付与しないと動きません。

*

あとはこれをぐるっと一周作成するだけなのですが、同じことの繰り返しなので、ここはJavaScriptで楽をします。

css_clock6

ライブラリにはjQueryを使用しました。
“big-grad”クラスを持つdivタグを生成し、30度ずつ角度を変更してCSSを付与して画面に表示しています。

小さな目盛

小さな目盛も同様に出力します。
大きな目盛は30度ずつ傾けましたが、小さな目盛は360÷60で6度ずつ傾ける必要があります。

css_clock7

ちょうど5分毎に大きな目盛と重なる部分があり、表示する意味はありませんが、判定を入れるのも面倒なので今回はそのまま出力しています。

数字

さて、1~12の数字部分も基本的には上記と同じように回転させる方法で出力させますが、一つ問題があります。
それはそのまま回転させると文字まで傾いてしまうということです。

css_clock8

そこで、時計の中心を基準に回転させた上で、数字の中心を基準に逆方向に回転させることで、向きを補正してみます。

css_clock9

上記の図でいう青い点は、時計の中心となる点です。

まずは普通に傾ける用のdiv($thisNumber)と数値を入れて逆に傾ける用のdiv($innerNumber)をそれぞれ用意します。
普通に傾ける用のdivにはclass=”number”を指定し、回転の基準点を時計の中心にします。
基準点を指定しなければ、勝手にdivの中心を基準に回転するため、数値を入れる方のdivには特に回転の中心点は指定しません。
それぞれに回転のcssを指定した後、合体して表示します。

css_clock10

*

これで、文字盤の描画はおしまいです。
JavaScriptを使った部分は、CSSとHTMLをひたすら書いていっても実現できますし、他にも方法が何通りもあると思います。
今回のやり方は一つの例として考えて下さい。

次回は、秒針を作成します。

関連記事

コメントする