はてなブログでpaper.jsのテスト6

canvas

マウスクリックによる動作テスト。
クリックした点に円が出現する。さらにクリックして円を増やした時、以前の円とかぶるようならば円が被らないように小さくなる

ソース

var circles = new Array();

function onMouseDown( event ){

	var path = new Path.Circle(event.point, 60 );
	path.set_size = 60;
	path.strokeColor ="#fff";
	path.strokeWidth = 4;
	path.fillColor ="#333";
	var innerPath = path.clone();
	innerPath.scale(0.6);
	innerPath.strokeWidth = 3;
	innerPath.dashArray = [10, 4];
	innerPath.fillColor  ="#111";

	for( var i= 0; i<circles.length; i++ ){
		var distance = circles[i][0].position.getDistance(event.point);
		var size = distance -60;

		if( size<= 0 ){
			circles[i][0].remove();
			circles[i][1].remove();
		 } else if(size < circles[i][0].set_size ){

			var scale =size/circles[i][0].set_size;
			circles[i][0].scale(scale);
			circles[i][1].scale(scale);
			circles[i][0].set_size = size;
			circles[i][1].strokeWidth = circles[i][0].set_size/20;

			console.log("distance : " + distance);
			console.log("scale : " + scale);
		}
	}

	var p = new Array();
	p.push(path);
	p.push(innerPath);
	circles.push(p);
}

動作例

何度かクリックしたものをキャプチャ。

メモ

　PointクラスのhitTestのテストをしようと思っていたのだが、pathとpoint都の比較に用いるものだったので点同士の距離を測るgetDistanceを利用した。
　本来であればPathItemやgroupを使用して、それ用の関数を使うべきだったとは思う。
　path.set_sizeで現在の円の大きさを保持している。

　この状態から、円の出現時にアニメーションをつけたりして、徐々に大きくなるなどの制限をつけるととてもややこしいことになるのが予測される。複数の円が大きくなっている状態でどれが優先されるかなどを考えなければいけなくなるのでかなり面倒。

　灰色は野暮ったい色に見えないようにするのが難しい。使う灰色が一種だけならさほど問題ないように感じる。