POPSブログ

CreateJS Matrix円周配置インスタンス回転(easeljs-0.8)

344

  Category:  javascript2015/03/12 pops 

easeljs-0.8でMatrix2Dクラスに変更がありましたので、円周上に配置したインスタンスをMatrixで回転させますが、rotate()は使用せずrotationで処理します。
rotate()の処理がデグリー値に変更なりましたのでMatrixから分離した方が良い様な気がします。

 

CreateJS Matrix円周配置インスタンス回転表示テスト


これは、3D風Carouselであり、実際は2Dです。基本的な構造などは「前々ページ」のものを改造したものです。
以前のeaseljs-0.7のものはeaseljs-0.8で一部正常に動作しないので修正しています。
また少々機能なども追加しました。


zu

 

DEMO (easeljs-0.8)


CreateJS Matrix円周配置インスタンス回転表示デモ、(createJS126.js)

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


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

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



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

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

//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
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);
		//実行
		matrix.decompose(chip[i]);

		//配置角度取得
		parts_angle=Math.atan2(cy,cx);
		//中心からの角度で補正/インナーコンテナ回転デグリー
		innerchip[i].rotation=(parts_angle*180/Math.PI)+partsAngle;//中心向き2

	}

	//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

createJS126.css、CSS名は任意に変更可



/*日本語 createJS126.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;
}

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


 

簡単な説明


easeljs-0.8用に書き換えました


easeljs-0.8用で、下記ページに掲載のものは表示は同じですが、matrix2D.rotate()を使用しているため少々理解し難い様なスクリプトになっています。(2015/03/12修正します)
そこで、matrix2D.rotate()を使用せずに角度をrotationで処理するとスッキリしたクリプトになります。内容はほぼ同じですが、違いは下記ページのものと比較ください。

easeljs-0.8用の記事です。(2015/03/12、判り易いJSに修正します)

【参照】当方の記事: CreateJS Matrixで円周配置の図形Shapeなどを回転(easeljs-0.8)


 

インスタンスのスケール変更など

 

1. Matrixクラスの変更で合わなくなった部分を修正した。
2. スケール変化など、Math.PIで計算して合わない部分は別の計算にした。
3. matrix2D.rotate()の使用を止めてrotationを使用するように修正した。
4. 円周配置インスタンス回転、放射状のタイプです。


matrix2D.rotate()の使用を止めた

matrix2D.rotate()がデグリー値に変わったので以前の様に処理出来ない面がある。
(作り方によってはどうなるかは不明)
matrix2D.rotate()をrotationで処理した方がスッキリする。但しインスタンスの構造を2重にせねば成らない面倒さは残ります。(コンテナをネストすれば良い)

以前の方法より、こちらの処理方法が良いのではと思っている。


zuzu

 

処理の説明

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


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


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


zuzuzu

 

前の表示方法

前の計算は180度で配置すると言う摩訶不思議な方法を取った。自分でも理解し難い。
新たに方法を見つけたのでこれは 2015/03/12 に createJS126x.js として修正する。



//Ticker
function parts_rotate(event) {

	略す

	//描画位置、180度で配置
	nAngle=Math.PI/count;

	略す

}

今回は下記の様に360度で配置しているから自然である。
目的、構造などによっては書き換えなどは自由である。



//Ticker
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);
		//実行
		matrix.decompose(chip[i]);

		//配置角度取得
		parts_angle=Math.atan2(cy,cx);
		//中心からの角度で補正/インナーコンテナ回転デグリー
		innerchip[i].rotation=(parts_angle*180/Math.PI)+partsAngle;//中心向き2

	}

	//update
	stage.update();

}

角度の補正

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



//配置角度取得
parts_angle=Math.atan2(cy,cx);
//中心からの角度で補正/インナーコンテナ回転デグリー
innerchip[i].rotation=(parts_angle*180/Math.PI)+partsAngle;//中心向き2

円周配置インスタンスの構造

位置用のインスタンス、中の回転用の要素、と役割をきっちりします。前ページの「Carousel」と同じ構造になります。


1. chip[i]、円周配置インスタンスはにmatrix2Dで位置を決定するだけで回転は与えない。
2. innerchip[i]はインスタンスの中の構造です。現在はグラフイックになります。
3. 文字などを挿入する場合は innerchip[i] はコンテナになり、中にグラフイック、文字などを配置する。


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

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



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


 

全てインスタンスchip[i]にmatrix処理する場合(参考)

処理の順序違いで別の形になるので注意ください。上記の様に分離したほうが問題が出難いと思います。

「この形式のデモ」/ 全てmatrix処理のデモ(createJS126x.js)



createJS126x.js
他は全てcreateJS126.jsと同じ
------------------------------------------------------------
//Ticker
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();

}

外周配置のインスタンスは自由に改造出来ますので、好みの形にして下さい。
また、不要な部分は削除も可能です。詳細はJSを参照ください。



easeljs-0.8用の記事です。全てMatrixで処理していますがマチガイ易いので注意。

【参照】当方の記事: CreateJS Matrixで円周配置の図形Shapeなどを回転(easeljs-0.8)



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]