日別アーカイブ: 2019-08-23

図の回転と停止

ものづくり筆耕ブログ

もう一つの円形ふちどり

先日、画像を丸く縁どるにおいて、2つの図を重ね合わせることによって丸い画像を描画しましたが、今回はCSSのborder-radiusを使って円形画像を実現しています。cssは別ファイルでなく、HTMLの中にstyle要素を定義しborder-radius属性を設定しています。

回転方法

シーソースイッチ

図を回転するには、transform-rotateを使います。連続して回転するには回転角度を変化させます。そして、一定間隔で等速回転させるには、setTimeout関数を使います。時間にて起動されるイベントにて回転角度を制御します。

回転と停止を制御するには一つのクリックボタンを押下します。このボタンはシーソースイッチと同じ機能を持ち、押すごとに回転と停止が交互に機能します。

スイッチの名称は交互に変化し、メカニックのシーソースイッチの機能ををソフトウェアで実現させています。

図の回転と停止例





rotation©2019 TacM,Ver0.01






サンプルコード

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bordering4 {
	background-image: url("https://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png");/* 表示する画像 */
	background-size:354px 354px;
	border:6px solid navy;												/* 枠線を付加 */
	background-position:-7px -7px;										/* 横長画像の左上を基準に表示 */
	border-radius:50%;													/* 角丸半径を50%にする(=円形にする) */
	width:340px;	height:340px;										/* 縦横を設定 */
}
</style>
</head>
<body>
<Div style="width:600px; height:600px; position:relative; border:1px solid blue; font-size:64px; color:mediumvioletred;">
<div style="position:absolute; left:120px; top:0px;">rotation<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span></div>
<div id="disc" class="bordering4" style="position:absolute; left:120px; top:130px; transform-origin:177px 177px;"></div>
<a style="position:absolute; left:20px; top:470px; width:120px; height:120px;" href="javascript:void(0)" onclick="startStop();return false;">
<img id="gostop" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/startBotton.png" width="120" height="120"></a>
</Div>
<script type="text/javascript" charset="utf-8">
const SPEED=74;															//回転速度, 74 ～ 4, Japanese 30 kei sight-seeing game
var interval=SPEED;														//回転スピード, Japanese ten large tourist spot
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("gostop").src="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/" + (k?"startBotton.png":"pauseBotton.png");
	//console.log("startStop", clickCount, k, document.getElementById("gostop").src);
	if(k==0){															//停止中から回転開始
	  setTimeout('revolution()', interval);								//回転開始
	}
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%72*5;												//0 5 10 15 20 ~ 355
	var e=d-18;															//-18 -13 -8 -3 2 7
	//console.log("Degree=", degree, d);
	document.getElementById("disc").style.transform="rotate("+e+"deg)";	//回転を制御
	if((clickCount % 2)==0){											//回転中ならば継続
		setTimeout('revolution()', interval);							//引き続き回転を制御する
	}
	else{}																//停止指令を受けた状態、revolution()を呼ばなければ自然に停止
}
</script>
</body>
</html>