POPSブログ

CreateJS アコーディオン、DOMElement表示、HOVER(rollover)形式

299

  Category:  javascript2014/05/25 pops 

簡単な画像を使用した ホリゾンタル アコーディオン です。多少制約はありますが DOMElement を表示し中にHTMLを挿入出来ますので、自由に画面構成が可能です。
easeljs-0.7.1 でのテストです。

 

CreateJS アコーディオン、DOMElement表示、HOVER(rollover)形式 テスト

簡単な画像を使用したアコーディオンですが、一応リンクを組めば指定ページにジャンプできますので、アコーディオンMENUと言う所でしょうか。一部制約など有りますが「htmlコンテンツ」の表示の出来るように設計しました。

あくまでも、画像専用のアコーディオンとなります。下図のような構造になります。


 

DEMO


CreateJS アコーディオン、DOMElement表示、HOVER(rollover)形式のデモ、(createJS083.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>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。
このJSでは、jqueryの読み込みが必要です。特殊な処理はしていないのでバージョンは何でも良い。


HTML (HTML5)


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

JS

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


//日本語
//createJS083.js
//アコーディオン3
//------------------------------------------------------
//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

//リンクを有効にする/標準false
var linkUse=false;//false true
//模擬ボタンを作る/標準false
var btnUse=false;//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"}
];

//案内文、リンクデータは画像数にあわせて編集
//タイトル
var title_text=["Blog","Index","Service","Links","Download","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=[];
//DOMElement-accordBox
var accordBox;
var accordBox_width=500;
var accordBox_height=100;
//canvas補正位置
var canvasPos_x=0;
var accordBox_margin=80;
var canvasPos_y=50;

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

//jqueryインスタンス
var jqueryBox;

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

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

	//jquery
	jqueryBox=$("#accordHtmlBox");

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

	//DOMElement-accordBox
	//DOMElement位置の修正、未使用
	//var element=document.getElementById("image-box");
	//canvasPos_x=element.offsetLeft;

	accordBox=new createjs.DOMElement("accordHtmlBox");
	//accordBox.x=pos_x+60;//陰影誤差補正
	accordBox.x=canvasPos_x+accordBox_margin;
	accordBox.y=canvasPos_y;//50
	accordBox.visible=false;
	stage.addChild(accordBox);

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

			//タイトル合成/FILL文字
			//画像、画像の大きさwh、文字位置xy、文字角度DEG値、フォント、フォントサイズ、フォント色、陰影、陰影色、Title文字、番号
			//(img,w,h,x,y,angle,font,fsize,fcolor,shadow,scolor,title)
			//assets2[i]=createMixedCanvas(img,accordionWidth,accordionHeight,20,10,90,"Arial","bold 30px","#FFFFFF",true,"#000000",title_text[i],no);

			//アウトライン専用/ライン幅に注意
			//画像、画像の大きさwh、文字位置xy、文字角度DEG値、フォント、フォントサイズ、フォント色、ライン幅、陰影、陰影色、Title文字、番号
			//(img,w,h,x,y,angle,font,fsize,fcolor,shadow,scolor,title)
			assets2[i]=createMixedCanvas2(img,accordionWidth,accordionHeight,20,10,90,"Arial","bold 30px","#FFFFFF",2,true,"#00BFFF",title_text[i],no);

		}

	}

}

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

		//リンク有効ならボタンにclickタイプ設定
		if(linkUse) {
			//pointer
			btn[i].cursor="pointer";
			//クリックアクション
			btn[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削除

}

//アコーディオン要素作成
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) {
		//close実行できないので非表示のみ実行
		accordBox_close();
	});
	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);}
	}

	accordBox_open(no);

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

	}

}

//accordBox表示
function accordBox_open(no) {

	//jqueryで挿入処理 OK
	//DIVの中のhtmlを取得
	var data=$("#data"+(no+1)).html();
	//親からの位置でhtmlを取得
	//var data=$("#data-div").children().eq(no).html();
	//jqueryインスタンスに挿入
	jqueryBox.html(data);

	accordBox.x=accordionOpenPointX[no]+accordBox_margin;
	accordBox.y=canvasPos_y;//50
	accordBox.alpha=0;
	accordBox.visible=true;
	var tw=createjs.Tween.get(accordBox);
	tw.wait(speed)
	.to({alpha:1},200);//200-400

}
//accordBox非表示
function accordBox_close() {

	//現在closeさせていない
	//accordBox.visible=false;
	accordBox.alpha=1;
}

//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;
}
//アウトライン専用
//画像、画像の大きさwh、文字位置xy、文字角度DEG値、フォント、フォントサイズ、フォント色、ライン幅、陰影、陰影色、文字、番号
function createMixedCanvas2(img,w,h,x,y,angle,font,fsize,fcolor,lwidth,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をずらした陰影もどき
	ctx.strokeStyle=scolor;
	ctx.lineWidth=lwidth+1;
	//陰影
	if (shadow) {set_shadow (ctx,scolor);}
	ctx.strokeText(title,0,0);

	//OUTLINE
	ctx.strokeStyle=fcolor;
	ctx.lineWidth=lwidth;
	//描画
	ctx.strokeText(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

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


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

#data-div{
display:none;
height:0;
}

/* htmlBox */
#accordHtmlBox {
position:relative;
top:0;left:0;
width:500px;
height:200px;
padding:10px;
text-align:left;
font-size:12px;
border-radius:8px;
background-color:rgba(256,256,256,0.4);
}
.a-back{
padding:0 2px;
background-color:#EE82EE;
}
.btn {	
display:block;
text-align:center;
width:80px;
padding:2px 0;
font-size:13px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
border:1px solid #DDDDDDD;
background-color:#4682B4;
}

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


 

簡単な説明


[説明図]

 

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

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


DOMElement表示用、アコーディオン

主に、MENU用途に用いられる事を前提に作っています。デモではページへのジャンプ設定は行っていませんが設定可能です。またHTMLの、Aリンク設定が可能ですから此方の方が便利かも知れません。
これは、装飾用アコーディオンになります。装飾なしの簡略化したものは前々ページにあります。


1. 装飾といっても画像自体を「画像加工ソフト」で、デザイン装飾して使用すればより簡単でよろしいことです。
2. 一応、HTMLを挿入できる形式にしましたので、Aリンク設定、画像挿入などが可能です。
3. リンク用ボタンを表示できます。(原則使用しません)
4. イベント処理の関係で、前のものよりアコーディオン機能が劣ります。(OPEN専用)
5. Firefoxで文字のY方向にずれが生じます。これは直りませんので了承ください。
6. HTMLの取り込みに、jqueryを使用しています。
7. 設定はJS上部を参照ください。


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


DOMElement表示の問題点など

HTMLで記述出来る事大変便利なのですが、指定するアコーディオン要素(canvas要素)の中に挿入は出来ません。
Canvas(ステージ)の「一番上層」に表示なります。(中間に挿入しても一番上に表示してしまう)


1. アコーディオン要素の rollover rollout のイベントが途切れるために、最終的にrolloverで指定要素を開く動作のみ設定になる。(開きっぱなしになるが、現在それ以外の方法はない....?)
2. アコーディオン要素の中にHTMLを挿入出来ないのでDOMElement表示はフェードで別途表示する。
3. DOMElementは1個で、アコーディオン要素の表示位置を計算して、其の都度中のHTMLを取り替える。
4. 原則、リンクなどは、HTMLに「Aリンク」で記述するが、従来のボタンの使用も可能である。


DOMElementはCanvasの直下配置

DOMElementはCanvasの直下に記述した方が良いと思う。でなければCanvasの直下以外に配置するが、CSSの影響で位置がずれることがある。Canvasのoffset値を取得して修正できる。
#accordHtmlBox は、DOMElementクラス設定するDIV容器のID名です。


Canvasの直下にいれた例 (推奨)


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

修正の例、現在はCanvasの直下に記述しているので修正してはいない。
必要であれば、offset値で修正するなどの処置をする。


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


var element=document.getElementById("image-box");
canvasPos_x=element.offsetLeft;

DOMElementクラスのインスタンスにする

HTMLを表示する器として、#accordHtmlBox をステージの最上段にDOMElementクラスのインスタンスとして取り込みます。
初期位置を決定しますが、当初は accordBox.visible=false 非表示にしています。



//CreateJSのインスタンス
var accordBox;

accordBox=new createjs.DOMElement("accordHtmlBox");
//accordBox.x=pos_x+60;//陰影誤差補正
accordBox.x=canvasPos_x+accordBox_margin;
accordBox.y=canvasPos_y;//50
accordBox.visible=false;
stage.addChild(accordBox);

DOMElementのHTMLはページ内部に予め記述しておき、必要に応じて挿入する

挿入するする方法は、jQueryを使用すれば簡単である。javascriptでも記述できる。データはページに下記の様に記述している。(状況に応じて使い分ければよい)
アコーディオン要素が開いたとき、DOMElementに対応するHTMLを流し込んでいるだけである。

#data-divは非表示にしています。このJSでは、中のデータHTMLはアコーディオン要素分用意します。



<div id="data-div">
	<div id="data1">HTMLの記述</div>
	<div id="data2">HTMLの記述</div>
	<div id="data3">HTMLの記述</div>
	<div id="data4">HTMLの記述</div>
	.
	.
</div>

DIVが非表示になっているために、ブラウザによりけりですが、HTML記述の画像を先読みしない場合があります。この場合表示される時に画像読み込み処理されます。つまり初回に画像表示タイミングがずれる。


● jQueryを使用、ID名で区別

jqueryで挿入処理して、表示位置を決定しフェードイン表示している。アコーディオン要素がスライドする時間 wait() で遅らせています。



//jqueryのインスタンスを保持する変数
var jqueryBox;
jqueryBox=$("#accordHtmlBox");//認識が早くなる

//accordBox表示
function accordBox_open(no) {

	//jqueryで挿入処理 OK
	//DIVの中のhtmlを取得
	var data=$("#data"+(no+1)).html();
	//jqueryインスタンスに挿入
	jqueryBox.html(data);

	accordBox.x=accordionOpenPointX[no]+accordBox_margin;
	accordBox.y=canvasPos_y;//50
	accordBox.alpha=0;
	accordBox.visible=true;
	var tw=createjs.Tween.get(accordBox);
	tw.wait(speed)
	.to({alpha:1},200);

}

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

次の様にも書ける、クラスの場合に有効

//親からの位置でhtmlを取得
var data=$("#data-div").children().eq(no).html();

● javascriptを使用、ID名で区別

IDで判別する方が記述は簡単のようです。DOMElementクラスのhtmlElementを利用した場合の記述も下に記す。



//javascriptで挿入処理 OK
var element=document.getElementById("accordHtmlBox");
var dataElement="data"+(no+1);
element.innerHTML=document.getElementById(dataElement).innerHTML;

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

DOMElementクラスのhtmlElementを利用した場合

//htmlElementで処理する OK
var dataElement="data"+(no+1);
accordBox.htmlElement.innerHTML=document.getElementById(dataElement).innerHTML;

色々とあるものです。ID名などは自由ですので、それに応じて記述すればよい。


アコーディオン要素の rollover rollout のイベントが途切れる

アコーディオン要素の上にDOMElementがあるので、rollover rollout のイベントが途切れるのは、現状ではイベント処理の仕様である故に仕方がない。
ここが最大の難問であるが解決できない。其のうち何とかなるだろう...........


良い方法があれば、後日、修正しますが「わからん」が本音である。誰か考えてください。


画像の修飾

前ページではFillのテキストを描画したが、今回はアウトラインで描画してみる。(Fillのテキスト使用可能)
ライン幅に注意、太いと中が塗りつぶれてアウトラインでなくなる、処理関数は書き換え自由です。



//アウトライン専用/ライン幅に注意
//画像、画像の大きさwh、文字位置xy、文字角度DEG値、フォント、フォントサイズ、フォント色、ライン幅、陰影、陰影色、Title文字、番号
//(img,w,h,x,y,angle,font,fsize,fcolor,shadow,scolor,title)
assets2[i]=createMixedCanvas2(img,accordionWidth,accordionHeight,20,10,90,"Arial","bold 30px","#FFFFFF",2,true,"#00BFFF",title_text[i],no);

リンク用ボタンの表示

原則、DOMElementの、Aリンクを使用するために「リンク用ボタン」は未使用です。
設定変更で使用可能ですから、リンクURLデータを記載してパス等を合わせてください



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

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

}

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

	var hit_no=no;

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

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

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

}

タイトル色などの登録

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


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

HTMLで記述できる強み

Canvasにテキストを描画するのは大変面倒な作業ですが、DOMElementクラスでHTMLを描画できるのは強みであり、CSSで装飾できるのも便利なことです。
現時点ではイベント処理に影響しますので、其の点が問題ですが将来は改善されることと思います(期待)。

問題とならない所で旨く利用するのが肝要かも知れません。


使用画像

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


参照、関連記事

大型画像専用、装飾なしの基本的な、CreateJS アコーディオンです。

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

装飾有りの、CreateJS アコーディオンです。

【参照】当方の記事: CreateJS アコーディオン、画面装飾HOVER(rollover)形式


DOMElementクラスでテキスト表示の以前の記事です。

【参照】当方の記事: CreateJS 画像スライド、アニメーション DOMElementクラスでテキスト表示


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

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

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



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]