KineticJS入門 – 少し複雑な図形を描いてみる

前回まで、図やテキストを描いたりしていましたが、今回はもう少しだけ複雑な図を、機能を使って書いてみます。

線を描いてみる

関数Lineを使えば、自由にラインをひくことができます。

	var line= new Kinetic.Line({
		points: [10, 10, 50, 50, 140, 30, 220, 80], 
		x:10, 
		y:10, 
		stroke:"green"
	});

x軸、y軸をピクセル数でポイントを指定し、そのポイント間に線を引いてくれます。
つまり、この設定では(10, 10) (50, 50) (140, 30) (220, 80)の4点が線で結ばれ、一つのラインを描写しています。

多角形を描く

関数Polygonを使えば、多角形を描くことができます。
ポイントの設定はLineと同じです。始点と終点が結ばれるわけですね。なるほど。

	var polygon = new Kinetic.Polygon({
		points: [10, 10, 50, 50, 140, 30, 220, 80], 
		x:10, 
		y:10, 
		stroke:"red"
	});

正多角形を描く

正多角形を描く場合には、関数RegularPolygonを使用します。
以下は、半径が40pxの八角形です。

	var regularpolygon = new Kinetic.RegularPolygon({
		sides:8, 
		radius:40, 
		x:100, 
		y:50, 
		stroke:"blue"
	});

星を描く

関数Starを使えば、簡単に星形の図形を描くことができます。

	var star = new Kinetic.Star({
		numPoints:5, 
		outerRadius:40, 
		innerRadius:25, 
		x:200, 
		y:50, 
		fill:"yellow", 
		stroke:"black"
	});

このサンプルコードでは角は5つ、凸部分の半径は40px、凹部分の半径は25pxという設定です。

その他にも、パスを指定して複雑な図形も描けるようです。
また、これらの図形は組み合わせて描写することもできるので、がんばれば簡易的なグラフィックWebアプリなんてのも作れそうですね。
というより、既にありそう。