POPSブログ

CreateJS Matrixで円周配置の図形Shapeなどを回転(easeljs-0.8)

338

  Category:  javascript2015/02/28 pops 

円周上に配置した図形ShapeなどをMatrixクラスを使用して回転させます。画像などをも配置出来ますので色々な応用が可能です。Matrixですのでマウス位置に対応して、回転方向速度変化など操作出来ます。簡単な「デモ」と共に掲載します。Matrix2Dクラスのrotate()がデグリー値になりましたので以前のものを訂正しました。easeljs-0.8 でのテストです。

 

CreateJS Matrixで円周配置の図形Shapeなどを回転


Matrixクラスを使用していますので、リアルタイムに条件を変えて変化が可能になります、ここではマウスの動きにより左右回転、速度の切り替えを行なう簡単なものです。
回転速度の角度に応じてtick毎に外周位置を計算して、図形位置をMatrixで移動しているだけですが、全体が移動しているので回転しているように見えます。グラフイックの書き換えは行なっていません。
以前のJSは特殊でしたので(どうしてもうまく行かなかった)、新たなJSに訂正します。2015/03/12


 

DEMO (easeljs-0.8)


CreateJS Matrixで円周上に配置した図形Shapeなどを回転 テスト、(createJS126x.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


新たに作ったJS(2015/03/12、修正しました)

demo


削除したJS(特殊、createJS055b.js)

demo


Chrome Opera Firefox Safari(Win) IE9-11で動作確認済み。 Safari(Mac)、は未確認です。


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.8使用)


<script type="text/javascript" src="js/easeljs-0.8.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box">
		<canvas id="mainCanvas" width="640" height="300"></canvas>
	</div>
</div>

JS

createJS126x.js、JS名は任意に変更可。注意、easeljs-0.8用です。



//日本語
//createJS126x.js
//Matrix2Dデモ2
//easeljs-0.8用/Matrix変更3
//インスタンス角度はMatrixで処理

//--------------------------------------------------------------

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

//partsの色 かならず#000000の16進カラー形式で記入のこと
var partsbackcolor="#FFFFFF";
var partsbackcolor2="#333333";
//split分割数 3-12
var split=12;
//半径
var radius=100;
//正転逆転フラグ 右正転=1 左=-1
var rotateflag=1;
//初期回転速度 デグリー値1-5
var angle=5;//DEG
//パーツ補正角度 傾き デグリー値
var partsAngle=90;
//虹色にする不透明 true false
var rainbowColor=true;
//マウスイベントの使用 true false
var eventUse=true;

//始点の角度
var startAngle=-Math.PI/2;//赤1時
//var startAngle=-Math.PI/2-(Math.PI*2/split);//赤12時

//テキスト使用
var textUse=true;

//--------------------------------------------------------------
//回転正逆ラジアン補正
angle *=rotateflag;
//to-RAD
var rotate_angle=angle*createjs.Matrix2D.DEG_TO_RAD;
var plusAngle=0;
//--------------------------------------------------------------

var stage;
var viewtext;
var partsContainer;

var matrix=new createjs.Matrix2D();
var chip=[];
var innerchip=[];
var stopNo=1;

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);

function init() {

	stage=new createjs.Stage("mainCanvas");
	//MouseOver設定/必要に応じ設定
	stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	var backrect=new createjs.Shape();
	backrect.graphics.beginFill("#000000").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);
	stage.update();

	//空コンテナインスタンス配置
	partsContainer=new createjs.Container();
	partsContainer.x=canvasWidth/2;
	partsContainer.y=canvasHeight/2;
	stage.addChild(partsContainer);

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);

	//TEXT
	set_text("Matrix-rotation");

	//パーツを配置してBaseを作る
	set_baseCircle();

	//Listener
	createjs.Ticker.setFPS(40);
	createjs.Ticker.addEventListener("tick",parts_rotate);

	//マウスイベントの使用
	if (eventUse) {
		stage.addEventListener("stagemousemove",setAngle);
	}

}

//MOUSE
function setAngle(event) {
	var mouseX=event.stageX;
	angle=(mouseX-canvasWidth/2)*1/50;
}

//Ticker
//全てインスタンスchip[i]にmatrix処理する場合
function parts_rotate(event) {

	var count=split;

	//ラジアン値で計算してデグリー変換

	//加算/停止処理
	plusAngle +=(angle*createjs.Matrix2D.DEG_TO_RAD*stopNo);

	//描画データ
	var cx,cy;
	var cAngle=startAngle;
	var nAngle=0;

	//描画位置、360度で配置
	nAngle=Math.PI*2/count;
	var chipflag=1;
	var parts_angle=0;

	for (var i=0; i < count; i++){

		//回転
		cAngle +=nAngle;

		cx=Math.cos(cAngle+plusAngle)*radius;
		cy=Math.sin(cAngle+plusAngle)*radius;

		//matrix
		matrix.identity();
		//位置をずらす
		matrix.translate(cx,cy);
		//配置角度取得
		parts_angle=Math.atan2(cy,cx);
		matrix.rotate(parts_angle*180/Math.PI+partsAngle);
		//実行
		matrix.decompose(chip[i]);

	}

	//update
	stage.update();

}

//base
function set_baseCircle() {

	var backc=partsbackcolor;
	var backc2=partsbackcolor2;

	//パーツの大きさ
	var parts_w=40;//20 40
	var parts_h=40;//40

	var count=split;

	for (var i=0; i < count; i++){

		//図形用インスタンス配置コンテナ
		chip[i]=new createjs.Container();
		chip[i].id=i;
		//内部図形
		innerchip[i]=new createjs.Shape();

		//Rect
		//graphicRect(innerchip[i],-parts_w/2,-parts_h/2,parts_w,parts_h,backc,backc2,rainbowColor,count,i);
		//RoundRect
		graphicRoundRect(innerchip[i],-parts_w/2,-parts_h/2,parts_w,parts_h,5,backc,backc2,rainbowColor,count,i);
		//Ellipse
		//graphicEllipse(innerchip[i],-parts_w/2,-parts_h/2,parts_w,parts_h,backc,backc2,rainbowColor,count,i);

		//陰影可能
		//innerchip[i].shadow=shadow;

		chip[i].addChild(innerchip[i]);
		partsContainer.addChild(chip[i]);

	}

}

//Ellipse Graphics
function graphicEllipse(s,x,y,w,h,color,color2,rainbow,len,no) {
	var c=color;
	var c2=color2;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
		c2=createjs.Graphics.getHSL(no/len*360,80,10);//直接
	}
	//s.graphics.clear();
	//s.graphics.beginFill(c).drawEllipse(x,y,w,h);
	//Gradien/HSL
	s.graphics.beginLinearGradientFill([c,c2],[0,0.5],0,0,0,h).drawEllipse(x,y,w,h);
}
//Rect Graphics
function graphicRect(s,x,y,w,h,color,color2,rainbow,len,no) {
	var c=color;
	var c2=color2;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
		c2=createjs.Graphics.getHSL(no/len*360,80,10);//直接
	}
	//s.graphics.clear();
	//s.graphics.beginFill(c).drawRect(x,y,w,h);
	//Gradien/HSL
	s.graphics.beginLinearGradientFill([c,c2],[0,0.5],0,0,0,h).drawRect(x,y,w,h);
}
//RoundRect Graphics
function graphicRoundRect(s,x,y,w,h,r,color,color2,rainbow,len,no) {
	var c=color;
	var c2=color2;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
		c2=createjs.Graphics.getHSL(no/len*360,80,10);//直接
	}
	//s.graphics.clear();
	//drawRoundRect
	//s.graphics.beginFill(c).drawRoundRect(x,y,w,h,r);
	//Gradien/HSL
	s.graphics.beginLinearGradientFill([c,c2],[0,0.5],0,0,0,h).drawRoundRect(x,y,w,h,r);
}

//VIEWTEXT
function set_text(t) {
	if (textUse) {
		viewtext.text=t;
		stage.update();
	}
}

//--------------------------------------------------------------

//START
window.onload=function() {
	init();
}

注釈文を削除すれば、幾分早くなります。
画像使用の場合、登録画像パスは当方の例です。使用の際は環境に合わせて下さい。


CSS

createJS126x.css、CSSは同じです。CSS名は任意に変更可



/*日本語 createJS126x.css*/

#demo-wrap {
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
margin:0 auto;
padding:0;
border:1px #CCCCCC solid;
background-color:#FFFFFF;
}

当方のサンプルの例です。


 

簡単な説明


zuzu

 

処理の説明

図の様に、matrix2D処理の原点は水平方向右になりますが、1時の位置より描画するために90度左に補正して開始しています。(処理方法によっては12時の位置よりも可能、初期位置を角度で補正しても良い)
その都度位置を計算して、円周配置インスタンス位置にmatrix2Dで移動しています。
図では判り易くするために数字を配置したので配置方向などがわかる。


1. 位置を計算して、円周配置インスタンス位置にmatrix2Dで移動すると1番の様になる。
くせがあるからこの所、注意が必要です
2. インスタンスを中心よりの角度で補正すると外周との接線方向に補正できる。
3. インスタンスを90度多く回転させれば、放射状になります。
4. 位置決め、回転を全てMatrixで行いました。(きめ細かな修正など難しくなると思います)
5. 虹色の着色は1時の位置より開始するので、赤色になる。(文字は入れない)。
6. 文字がないと回転の方向が不明瞭なので、グラデーション塗りを施した。
7. 設定の詳細はJS先頭を参照ください。


zuzuzu

 

回転すれば位置が変わるので、再度計算してmatrix2Dで位置を変えているだけです。


角度の補正

角度の補正を行わない場合は放射状にはならず、インスタンスは常に水平状態ですので、その時の配置角度を取得して補正します。これでインスタンスは中心線に対して平行に成ります。
関数、Math.atan2(y,x) は原点より座標(y,x)の角度を取得できます。
「デグリー値」に変換して使用します。



//配置角度取得
parts_angle=Math.atan2(cy,cx);
matrix.rotate(parts_angle*180/Math.PI+partsAngle);

初期値設定などはデグリー値が多い

中々、Math.PIでの設定はわかり難いと思うので、ほとんどの初期値はデグリー値で、途中「ラジアン」に変換して使用しています。
反対に角度の「ラジアン値」を「デグリー値」に変換するには、180/Math.PI を乗ずればよい。



回転デグリー値 = 角度のラジアン値 * 180/Math.PI


以前は図形の回転補正を全てMatrixで行っていましたが、図形の部分は固定した作りに変更しました。
始めは、ラジアンで計算して、Matrix処理の部分だけをデグリー値に変換して有ります。どちらかといえば全てラジアン処理の方がやり易いのですが....
2015/03/11/まで掲載のJSは特殊ですので、新たに正当なJSと取り替えます。
内容などはほぼ同じですが、違いは下記ページのものと比較ください。

 

easeljs-0.7用の記事です

【参照】当方の記事: CreateJS Matrixで円周上に配置した図形Shapeなどを回転

インスタンスの回転をrotationで行う形式、理解し易い。easeljs-0.8用の記事です

【参照】当方の記事: CreateJS Matrix円周配置インスタンス回転(easeljs-0.8)



一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]