POPSブログ

CreateJS アコーディオン、画面装飾HOVER(rollover)形式

298

  Category:  javascript2014/05/22 pops 

簡単な画像を使用した ホリゾンタル アコーディオン ですが、色々と装飾出来る様にしました。装飾部分と共にTEXTなどを画像化して使用していますが少々描画品質は劣ります。設定など変更できますので自由度があり多様性に富みます。
easeljs-0.7.1 でのテストです。

 

CreateJS アコーディオン、画面装飾HOVER(rollover)形式 テスト

簡単な画像を使用したアコーディオンですが、一応リンクを組めば指定ページにジャンプできますので、アコーディオンMENUと言う所でしょうか。画像エフェクトなどの多様性はありますが「htmlコンテンツ」の表示には不向きです。

あくまでも、画像専用のアコーディオンとなります。


 

DEMO


CreateJS アコーディオン、画面装飾HOVER(rollover)形式のデモ、(createJS082.js)

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



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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.1.min.js"></script>

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


HTML (HTML5)



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

JS

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


//日本語
//createJS082.js
//アコーディオン2
//------------------------------------------------------
//canvasの大きさ/全てこの値を使用
var canvasWidth=800;
var canvasHeight=300;

//アコーディオン画像の大きさ
var accordionWidth=640;
var accordionHeight=300;

//初期指定OPEN番号を有効にする
var selectUes=true;
//初期指定OPEN番号 0-
var select_no=0;
//TWEEN速度 200-800
var speed=500;
//タイトル文字と画像を合成する
var mixed=true;//false true
//案内文を表示する
infortextUse=true;//false true
//リンクを有効にする
var linkUse=false;//false true
//模擬ボタンを作る
var btnUse=true;//true false

//画像manifestリスト
var manifest=[
{src:"/main/images/flower01.jpg",id:"PHOTO"},
{src:"/main/images/flower02.jpg",id:"PHOTO"},
{src:"/main/images/flower03.jpg",id:"PHOTO"},
{src:"/main/images/flower04.jpg",id:"PHOTO"},
{src:"/main/images/flower05.jpg",id:"PHOTO"},
{src:"/main/images/flower06.jpg",id:"PHOTO"},
{src:"/main/images/textimg01.png",id:"PARTS"}
];

//案内文、リンクデータは画像数にあわせて編集
//タイトル
var title_text=["Blog","Index","Service","Links","Download","Map"];
//案内文
var info_text=[
"POPS-WEB Blog ページに進みます",
"POPS-WEB Index ページに進みます",
"POPS-WEB Service ページに進みます",
"POPS-WEB Links ページに進みます",
"POPS-WEB Download ページに進みます",
"POPS-WEB Map ページに進みます"
];

//リンクデータ
var link_url=["blog.html","index.html","service.html","links.html","download.html","map.html"];

//登録色
var d_color=["#FF1493","#FF69B4","#FFA07A","#9370DB","#6A5ACD","#4682B4","#778899","#B8860B","#DEB887","#FFD700"];

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

//ステージ
var stage;
//コンテナ
var accordioncontainer;
var loadingcontainer;
var progresscontainer;
var textcontainer;

//読み込み画像URL保存容器
var assets=[];
var parts=[];
//キャプチャー画像保存容器
var assets2=[];

//ローダー変数
var loader;
//LoadingShape
var loadingShape;

//loading変数
var loading=false;
//ProgressBar
var progressbar;
var progtext;
var bar_v=0;

//画像No/未使用
var image_no=0;
//画像数
var image_max;

//Accordion変数
myAccordion=[];
//標準X位置保存
accordionStPointX=[];
accordionOpenPointX=[];
accordionClosePointX=[];
//アニメ中は機能しない未使用、removeAllTweensで対応
var globalflag=false;

//模擬ボタン
var btn=[];

//陰影
var shadow=new createjs.Shadow("#000000",0,0,4);

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

//ステージ周りセット
function init() {

	//STAGE
	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);

	//accordion画像層
	accordioncontainer=new createjs.Container();
	stage.addChild(accordioncontainer);

	//loading3コンテナをステージにaddChild
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//ShapeのLOADINGを作る
	loadingShape=loadingIndicator3();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickを設定
	loadingShape.tick=function (){
		loadingShape.rotation +=5;

	}
	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loading=true;//loading表示判定未使用

	//ProgressBar
	progresscontainer=new createjs.Container();
	progressbar=new createjs.Shape();
	progtext=new createjs.Text("0","12px Arial","#FFFFFF");
	progtext.x=0;
	progtext.y=15;
	progtext.maxWidth=80;
	progtext.textAlign="center";
	progtext.shadow=shadow;//shadow
	//alpha
	progressbar.alpha=0.5;

	//bar_v判定tickを設定 butt round/Stroke
	//90度是正-Math.PI/2
	progressbar.tick=function (){
		if(bar_v > 0) {
			progressbar.graphics.clear();
			progressbar.graphics.setStrokeStyle(8,"butt").beginStroke("#FF69B4");
			progressbar.graphics.arc(0,0,40,-Math.PI/2,Math.PI*2*bar_v-Math.PI/2);
			progtext.text=Math.floor(bar_v*100);
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);

	//Main-Ticker設定
	createjs.Ticker.setFPS(30);
	//createjs.Ticker.timingMode=createjs.Ticker.RAF;
	createjs.Ticker.addEventListener('tick',tick);

	//画像一括ロードに進む
	bulkload();

}

//bulk-load、画像一括ロード
function bulkload() {

	//Loader
	loader=new createjs.LoadQueue(false);
	//全体、progressがあれば先に設定
	loader.addEventListener("progress",progress);

	//loader EventListener設定、この部分修正
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//error関数を追加
	loader.addEventListener("error",loaderror);

	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}
//各画像読み込み完了
function fileload (eventObject) {
	var id=eventObject.item.id;
	//プ画像選別
	if (id == 'PHOTO') {
		//エラー無しの画像をassets容器に保存
		assets.push(eventObject.result);
	}
	if (id == 'PARTS') {
		parts.push(eventObject.result);
	}

}

//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;

	//loader Listener削除 こちら使用に修正
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);
	//追加error関数を削除
	loader.removeEventListener("error",loaderror);

	//loading Listener削除
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//loading container非表示
	loadingcontainer.visible=false;
	loading=false;//loading表示判定

	//画像があれば
	if (image_max) {

		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			event.target.removeEventListener("progress",progress);
			//progressTicker削除
			createjs.Ticker.removeEventListener('tick',progressbar.tick);
			//progress非表示
			progresscontainer.visible=false;

			//合成処理
			makeAccodImage();
			//表示に進む
			main();

		},2000);
	}

}

//エラー処理
function loaderror(eventObject) {

	var id=eventObject.item.id;
	//プ画像選別
	if (id == 'PHOTO') {
		//エラーの場合代替画像を作りassets容器に格納
		//var img=createColorCanvas (accordionWidth,accordionHeight,"#FFFFFF");//ベタ
 		var img=createLineGradBox (accordionWidth,accordionHeight,"#FFFFFF",d_color[assets.length],"#FFFFFF","y",2);//登録色グラデーション
		assets.push(img);
	}
	if (id == 'PARTS') {
		var image=null;
		parts.push(image);
	}

}

//progressBar
function progress(event) {

	//loadedのみ効く
	bar_v=event.loaded;
}

//Makeアコーディオン部材全体をキャプチャー画像にする
function makeAccodImage() {

	//合成処理
	for (var i=0; i < image_max; i++) {

		var contena=new createjs.Container();
		//番号受け渡し
		var no=i;
		var img=assets[no];
		//Title文字と画像を合成する
		if(mixed) {
			//画像、画像の大きさwh、文字位置xy、文字角度DEG値、フォント、フォントサイズ、フォント色、陰影、陰影色、Title文字、番号
			//(img,w,h,x,y,angle,font,fsize,fcolor,shadow,scolor,title)
			img=createMixedCanvas(img,accordionWidth,accordionHeight,20,10,90,"Arial","bold 30px","#FFFFFF",true,"#000000",title_text[i],no);
		}
		var back=new createjs.Bitmap(img);

		//TEXT
		var text;
		if(infortextUse) {
			text=new createjs.Text(info_text[i],"13px Arial","#FFFFFF");
			text.x=accordionWidth-(text.getMeasuredWidth()+120);
			text.y=15;
			text.shadow=shadow;

		}

		//
		var logo;
		if(parts[0]) {
			var logo=new createjs.Bitmap(parts[0]);
			logo.x=(640-340)/2+40;
			logo.y=240;
		}

		contena.addChild(back,logo,text);
		//部材キャプチャー
		contena.cache(0,0,accordionWidth,accordionHeight);//cacheする
		assets2[i]=contena.cacheCanvas;//cache取得保存
		contena.uncache();//un-cacheする
		//クリア
		contena=null;
	}

}

//MAIN
function main() {

	//アコーディオン配置間隔
	var move_w=Math.floor(canvasWidth/image_max);//ST
	var move_w2=Math.floor((canvasWidth-accordionWidth)/(image_max-1));//OPEN
	var move_w3=Math.floor((canvasWidth-accordionWidth)/(image_max-1));//CLOSE

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

		//初期間隔決定保存
		accordionStPointX[i]=move_w*i;
		//OPEN CLOSE位置
		accordionOpenPointX[i]=move_w2*i;
		accordionClosePointX[i]=move_w3*(i-1)+accordionWidth;
		if(i == 0) {accordionClosePointX[i]=0;}
	}

	//アコーディオンHoverMenu clickタイプ
	for (var i=0; i < image_max; i++) {

		//番号受け渡し
		var no=i;
		//合成画像使用
		var img=assets2[no];
		//アコーディオン要素
		myAccordion[i]=createAccordion(img,accordionWidth,accordionHeight,no);
		//初期間隔
		myAccordion[i].x=accordionStPointX[i];
		//判別用のproperty:idを書き込む、未使用
		myAccordion[i].id=i;

		//リンク有効なら
		if(linkUse) {
			//pointer
			myAccordion[i].cursor="pointer";
			//クリックアクション
			myAccordion[i].on("click",handleclick,null,false,i);

		}

		//addChild
		accordioncontainer.addChild(myAccordion[i]);

	}

	//select番号補正
	if(select_no > image_max-1) {select_no=0;}

	//初期指定OPEN番号
	if(selectUes) {
		accordion_open(select_no);
	}

	//stage-rollout/stage-u-out初期指定OPEN番号
	stage.addEventListener("rollout",function (e) {
		if(selectUes) {
			//accordion_open(select_no);
		}
	});

}

//アコーディオン要素作成
function createAccordion(img,w,h,no) {

	//ラップコンテナ
	ac=new createjs.Container();
	back=new createjs.Bitmap(img);

	//模擬ボタン/クリックアクションなし
	if(btnUse) {
		btn[no]=createShapeBtn2 (0,0,60,20,5,"GO","12px","#FFFFFF","#FF69B4",no);
		btn[no].x=accordionWidth-60;
		btn[no].y=25;
	}
	if(!btnUse) {
		btn[no]=null;
	}

	ac.addChild(back,btn[no]);
	//active判定用
	var no=no;

	//ラップコンテナrollover
	ac.addEventListener("rollover",function (e) {
		//
		accordion_open(no);
	});
	//ラップコンテナrollout
	ac.addEventListener("rollout",function (e) {
		//
		accordion_close(no);
	});
	return ac;
}

//Clickアクション
function handleclick (event,no) {

	var hit_no=no;

	//リンク有効ならば処理
	if(linkUse) {

		//登録リンクデータ
		var url="/main/html/" + link_url[hit_no];

		//例ウィンドウに出力
		location.href=url;
	}

}

//OPEN、removeAllTweensで対応
function accordion_open(no){

	//removeAllTweens
	createjs.Tween.removeAllTweens();

	for (var i=0; i < image_max; i++) {
		var tw=createjs.Tween.get(myAccordion[i]);

		if(no >= i) {tw.to({x:accordionOpenPointX[i]},speed);}
		if(no < i) {tw.to({x:accordionClosePointX[i]},speed);}
	}

}
//CLOSE
function accordion_close(no){

	//removeAllTweens
	createjs.Tween.removeAllTweens();

	//標準に戻す
	for (var i=0; i < image_max; i++) {
		//myAccordion[i].x=accordionStPointX[i];//標準

		var tw=createjs.Tween.get(myAccordion[i]);
		tw.to({x:accordionStPointX[i]},200);

	}

}

//tick
function tick() {
	stage.update();
}

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

//create-Shape模擬ボタン
function createShapeBtn2 (x,y,w,h,r,label,size,lc,backcolor,no) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ、黒back付き
	var btn=new createjs.Container();
	var back=new createjs.Shape();//背景
	var shape=new createjs.Shape();
	//Fill
	shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
	shape.regX=w/2;
	shape.regY=h/2;

	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";
	btn.addChild(shape,tx);

	//rollover
	btn.addEventListener("rollover",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill("#DAA520").drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	return btn;
}

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

//画像、画像の大きさwh、文字位置xy、文字角度DEG値、フォント、フォントサイズ、フォント色、陰影、陰影色、文字、番号
function createMixedCanvas(img,w,h,x,y,angle,font,fsize,fcolor,shadow,scolor,title,no){

	//canvasエレメント
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	//画像描画
	ctx.drawImage(img,0,0,w,h);

	//文字レーヤー白
	//ctx.fillStyle='rgba(255,255,255,0.5)';//白半透明

	//文字レーヤー指定色/現在こちら使用
	//登録色RGB変換半透明
	var rgbArr=toRgb(d_color[no]);
	ctx.fillStyle=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],0.5);//OK

	//Rect
	ctx.fillRect(0,0,40,h);

	//文字回転/画像レーヤーはそのままです
	ctx.translate(x,y);//重要
	ctx.rotate(angle*createjs.Matrix2D.DEG_TO_RAD);//RAD値に変換

	//title文字
	var font_v=fsize +" "+ font;

	ctx.fillStyle=fcolor;
	ctx.font=font_v;
	ctx.textAlign="left";//center left
	ctx.textBaseline="middle";
	//Textに陰影
	if (shadow) {set_shadow (ctx,"#000000");}
	//描画
	ctx.fillText(title,0,0);

	return canvas;
}

//Textに陰影
function set_shadow (ctx,color) {

	//RGB変換
	rgbArr=toRgb(color);

	//Textに陰影
	//影の色オフセット距離ぼかし量
	//ctx.shadowColor="rgb(0,0,0)";

	//Graphics.getRGB利用した
	ctx.shadowColor=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]);//OK
	ctx.shadowOffsetX=0;
	ctx.shadowOffsetY=0;
	ctx.shadowBlur=3;
}

//変換は配列で返すナントカ使える
function toRgb(bc) {
	bc=bc.replace("#","");
	var rgbArr=[];
	rgbArr[0]=parseInt(bc.slice(0,2),16);
	rgbArr[1]=parseInt(bc.slice(2,4),16);
	rgbArr[2]=parseInt(bc.slice(4,6),16);
	return rgbArr;
}

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

//幅、高さ、画像
function createImgCanvas(w,h,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	//LinearGradient
	var gradient;
	if(direction == 'x') {
		gradient=ctx.createLinearGradient(0,h,w,h);
	}
	if(direction == 'y') {
		gradient=ctx.createLinearGradient(w,0,w,h);
	}
	if(direction == 'xy') {
		gradient=ctx.createLinearGradient(0,0,w,h);
	}
	if(type == 2) {
    		gradient.addColorStop(0,color1);
    		gradient.addColorStop(1,color2);
	}
	if(type == 3) {
    		gradient.addColorStop(0,color1);
		gradient.addColorStop(0.5,color2);
    		gradient.addColorStop(1,color3);
	}
	ctx.fillStyle=gradient;
	//FILL
	ctx.fillRect(0,0,w,h);

	return canvas;
}

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

//簡単なLOADING
function loadingIndicator3 () {

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round");//round

	//描画データ
	var alpha_v=1;//透明度
	var alphaback;

	var cx,cy;
	var numNeedles=12;
	var innerR=15;
	var outerR=10;
	var cAngle=-Math.PI/2;
	var nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		rotateflag=cAngle -=nAngle;
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		//#CCCCCC
		alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).moveTo(cx,cy);
		cx=Math.cos(cAngle)*outerR;
		cy=Math.sin(cAngle)*outerR;
		graphics.lineTo(cx,cy);

	}
	//Shapeに格納
	var s=new createjs.Shape(graphics);
	return s;
}

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

//START
init();

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


CSS

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


/*日本語 createJS082.css*/

#demo-wrap {
position:relative;
width:auto;
height:100%;
text-align:center;
}

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:800px;
height:300px;
padding:0;
margin:0 auto;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
background-color:#000000;
}

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


 

簡単な説明


[説明図]

 

前ページの「CreateJS アコーディオン 大型画像 HOVER(rollover) 形式」に装飾を施したものです。基本的にはそちら参照ください。

【参照】当方の記事: CreateJS アコーディオン 大型画像 HOVER(rollover) 形式


装飾画像用、アコーディオン

主に、MENU用途に用いられる事を前提に作っています。デモではページへのジャンプ設定は行っていませんが、設定可能ですので、リンク先のURLなどを記載ください。
これは、装飾用アコーディオンになります。装飾なしの簡略化したものは前ページにあります。


1. 装飾といっても画像自体を「画像加工ソフト」で、デザイン装飾して使用すればより簡単でよろしいことです。
2. 一応、リアルタイムの条件変化で画像の書き換えなど可能である事が強みですが、其の分面倒になります。
3. ボタンは飾りです。(機能するように変更は可能です)
4. Firefoxで文字のY方向にずれが生じます。これは直りませんので了承ください。
5. 設定はJS上部を参照ください。


アコーディオン部の大きさと要素(画像)の大きさ

アコーディオン部の大きさはページの大きさなどに合わせますので、枚数に応じて適正な幅の画像を用意します。
図の様に配置されますので、それらを考慮した画像幅にしてください。画像幅が同じで枚数が増えれば重なり部分が狭くなる。この辺は臨機応変に対応する。


次の説明などは、前ページ、記事を参照ください。またJS上部をご覧ください。

1. アコーディオン指定要素を開く原理
2. 初期時に指定要素を開く
3. OUT時に初期指定要素をOPENさせる
4. 画像要素をコンテナでラップ
5. rollover rollout アクション


以下、変更、追加などを簡単に説明します。


タイトルの表示

アコーディオンの横にタイトル文字を表示します。

「前ページ」のものと比較して、「タイトル文字表示」と次の「案内文の表示」が若干変更があります。



//タイトル文字と画像を合成する
var mixed=true;//false true

//タイトル
var title_text=["TITLE1","TITLE2",.........];

タイトル色などの登録
代替画像の色などに利用されています。内部書き換えで使用変更などは自由です。


//登録色
var d_color=["#FF1493","#FF69B4","#FFA07A","#9370DB","#6A5ACD","#4682B4","#778899","#B8860B","#DEB887","#FFD700"];

案内文の表示

アコーディオン内部に案内文を表示します。


//案内文を表示する
infortextUse=true;//false true

//案内文
var info_text=["案内文","案内文",.........];

装飾ボタン表示

ダミーのボタンです。アコーディオン自体に「クリックアクション」を設定していますので、画面のどの位置でも反応します。つまり現在「装飾ボタン」は飾りになります。
但し、「クリックアクション」ハンドルを「装飾ボタン」に設定変更すれば、ボタンは機能します。


現在、アコーディオン要素にクリックアクションが設定されています。


//リンク有効なら
if(linkUse) {
	//pointer
	myAccordion[i].cursor="pointer";
	//クリックアクション
	myAccordion[i].on("click",handleclick,null,false,i);
}

「装飾ボタン」にクリックアクションを設定するには、対象インスタンスを以下の様に「装飾ボタン」に変更する。
但し、「装飾ボタン」が表示されているのが前提条件です。


//リンク有効なら
if(linkUse) {
	//pointer
	btn[i].cursor="pointer";
	//クリックアクション
	btn[i].on("click",handleclick,null,false,i);
}

ページへのジャンプ設定

下記、配列にデータをいれて、ジャンプ設定を有効にします。カーソルが変更になり、「クリック」でジャンプします。

JSに記載のデータはダミーですから、正確に記載してジャンプを確認ください。



//リンクを有効にする
var linkUse=true;//false true

---------------------------------------------------------------
正確なURLを記載して、実行を確認ください

//リンクデータ
var link_url=["リンク先URL","リンク先URL",...........];

urlの記載部分を合わせてください。


//Click
function handleclick (event,no) {

	var hit_no=no;

	text_set(" No."+hit_no);

	//リンク有効ならば処理
	if(linkUse) {

		//登録リンクデータ
		var url="/main/html/" + link_url[hit_no];

		//例ウィンドウに出力
		location.href=url;
	}

}

デモではジャンプ設定をしていません。


タイトルの装飾処理と画像との合成

タイトルと読み込み画像を、Canvasエレメント処理で1つに合成して、Bitmap()で表示出来ます。(其の後、このデモJSでは「案内文テキスト」などとキャッシュで画像化して使用しています)

現在、Logo画像の読み込み失敗の場合の代替Logoテキストは用意していません。非表示になります。


全体をコンテナに収容していますから、無理に画像化しないで構成しても構いません、ここは、あくまでもテストです。
この辺は色々な方法があるが、どのような方法でも構いません。個人の自由です。



var img=assets[no];
//Title文字と画像を合成する
if(mixed) {
	//画像、画像の大きさwh、文字位置xy、文字角度DEG値、フォント、フォントサイズ、フォント色、陰影、陰影色、Title文字、番号
	//(img,w,h,x,y,angle,font,fsize,fcolor,shadow,scolor,title)
	img=createMixedCanvas(img,accordionWidth,accordionHeight,20,10,90,"Arial","bold 30px","#FFFFFF",true,"#000000",title_text[i],no);
}
var back=new createjs.Bitmap(img);

-----------------------------------------------------------------

//画像、画像の大きさwh、文字位置xy、文字角度DEG値、フォント、フォントサイズ、フォント色、陰影、陰影色、文字、番号
function createMixedCanvas(img,w,h,x,y,angle,font,fsize,fcolor,shadow,scolor,title,no){

	//canvasエレメント
	var canvas=document.createElement("canvas");

	途中略す

	return canvas;
}

画像処理が、JSでどこまで可能かテストしているだけで、「画像処理ソフト」で画像を変えたほうが簡単で有りかつ綺麗であることは明白です。

内部変更可能です。


タイトル文字の下の半透明Rectの色の変更です。現在、登録色を使用し下のレーヤー指定色処理を行っています。
処理関数を、書き換えれば自由な位置に色々と装飾が可能になります。


RGB形式で色指定は大変面倒なために、toRgb()関数で「16進カラー」を変換して使用しています。最後の「0.5」は透明度の指定です。



//文字レーヤー白
ctx.fillStyle='rgba(255,255,255,0.5)';//白半透明

-----------------------------------------------------------------

//文字レーヤー指定色
//登録色RGB変換半透明
var rgbArr=toRgb(d_color[no]);
ctx.fillStyle=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],0.5);//OK

画像化処理

装飾ボタン以外は、コンテナの中に配置してキャッシュを取得、それを画像化して使用しています。装飾ボタンを画像化すると色変化がなくなりますから分離処理しました。


画像化することにより、アコーディオンコンテナの中の階層が単純化されますので、幾分軽快に動作するような気がします.... が、気のせいかも知れません。


ステージに addChild していませんので表示はしません。あくまでもメモリー上での処理になります、以下の様に処理しました。contena=nullが正しいか不明ですが、正常に処理しますので一応は正しいものと理解します。


var contena=new createjs.Container();

各種処理をする

contena.addChild(back,logo,text);
//部材キャプチャー
contena.cache(0,0,accordionWidth,accordionHeight);//cacheする
assets2[i]=contena.cacheCanvas;//cache取得保存
contena.uncache();//un-cacheする
//クリア
contena=null;

画像の読み込み失敗のエラー処理、代替画像挿入

画像読み込みエラー処理関数を追加、グラデーション代替画像を表示します。ほとんどエラーは無いと思いますが一応安心です。間違い画像URLを記載して故意にエラーにしますと確認できます。


//エラー処理
function loaderror(eventObject) {

	var id=eventObject.item.id;
	//プ画像選別
	if (id == 'PHOTO') {
		//エラーの場合代替画像を作りassets容器に格納
		//var img=createColorCanvas (accordionWidth,accordionHeight,"#FFFFFF");//ベタ
 		var img=createLineGradBox (accordionWidth,accordionHeight,"#FFFFFF",d_color[assets.length],"#FFFFFF","y",2);//登録色グラデーション
		assets.push(img);
	}
	if (id == 'PARTS') {
		var image=null;
		parts.push(image);
	}

}

-----------------------------------------------------------------

//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	略す

	return canvas;
}

参照

装飾なしの基本的な、CreateJS アコーディオンです。

【参照】当方の記事: CreateJS アコーディオン 大型画像 HOVER(rollover) 形式


Canvasエレメント処理でタイトルなどを描画する場合は、下記、記事を参照ください。

【参照】当方の記事: CreateJS Canvasエレメント描画のテキストをBitmapクラスで表示する

【参照】当方の記事: CreateJS Canvasエレメント描画のOutlineテキストをBitmapクラスで表示する


使用画像

原則、画像は使用者が用意します。640x300 使用画像はデモページにあります。



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]