libro
www.tuyano.com
JavaScript/Ajaxライブラリ入門

RaphaëlによるSVGグラフィック (5/5)

作成:2010-04-28 16:01
更新:2010-05-11 16:35

■図形のアフィン変換

キャンバス・オブジェクトの位置や大きさを変更する場合、属性を操作する他にアフィン変換を適用する方法があります。アフィン変換というのは、図形の平行移動と線形写像の組み合わせで図形の表示を変換するやり方です。要するに「移動」「回転」「拡大縮小」の組み合わせで、図形を自由に配置する、ということですね。

下のリストに、簡単なサンプルを上げておきます。これは、マウスポインタの位置によって、長方形の向きと大きさが変わるサンプルです。淡いブルーのキャンバス上にマウスを移動すると、中央の長方形がくるくると回転したり、拡大縮小されたりします。

アフィン変換のためのメソッドは、キャンバス・オブジェクト内に用意されています。それぞれの使い方についてざっと整理しておきましょう。


１．平行移動
translate( 横の距離 , 縦の距離 )
図形を平行移動します。これは縦横の移動の幅をそれぞれ引数に渡すだけです。これは非常にシンプルですね。


２．拡大縮小
scale( 横の倍率 , 縦の倍率 , 中心の横位置 , 中心の縦位置 )
図形を拡大縮小します。拡大率は第１，２引数で指定します。１倍が同じ大きさとなり、それより小さければ縮小され、大きければ拡大されます。このとき、注意しなければならないのは、「その図形は、どこを中心として拡大縮小されるか」という点です。それを指定するのが第３，４引数です。これで指定された地点から図形が拡大されます。


３．回転
rotate( 角度 , 真偽値 )
rotate( 角度 , 中心の横位置 , 中心の縦位置 )
図形の回転は、２つの引数指定が用意されています。１つ目は、回転角度と、絶対位置からの角度かどうかを指定する真偽値を引数に渡すものです。例えば連続してrotateが呼び出されたとき、「最後の状態から回転させるか」「最初の状態から回転させるか」を指定するものです。trueにすると、常に「最初の状態から、第１引数の角度だけ回転させる」ということになります。falseなら、「そのときの状態から、更に第１引数の角度だけ回転させる」ということになります。

もう１つのやり方は、角度と、回転の中心となる位置を指定するやり方です。通常、図形の回転は、その図形の中心位置から回転しますが、このように回転の中心位置を設定することで、大きく回転させたりできます。

いずれも、回転の角度は度数（dgree、０～359の値）で指定します。ラジアン単位ではありません。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
		xml:lang="ja" lang="ja"> 
	<head> 
		<meta http-equiv="Content-Type"
			content="text/html; charset=UTF-8" /> 
		<title>Sample Page</title>
		<script type="text/javascript"
			src="raphael-min.js" charset="utf-8"></script>
		<script type="text/javascript">
		<!--
		var dragging = false;
		var r1 = null;
		function init(){
			var paper = Raphael(10,25, 300, 300);
			var r = paper.rect(0,0,300,300);
			r.attr({fill:"#99F",stroke:"#99F",opacity:0.25});
			r.mousemove(doAct);
			r1 = paper.rect(50,125,200,50);
			r1.attr({fill:"red",stroke:"blue","stroke-width":5});
		}
		function doAct(event){
			var x = event.x - 10;
			var y = event.y - 25;
			r1.rotate(x,true);
			r1.scale(y / 100,y / 100,150,150);
		}
		//-->
		</script>
	</head>
	<body onload="init();">
		<h1>サンプル</h1>
		<div id="canvas"></div>
	</body>
</html>
※関連コンテンツ

「JavaScript/Ajaxライブラリ入門」に戻る