POPSブログ

CreateJS wicks方式サムネール、LightBoxタイプ、フルサイズ表示

225

  Category:  javascript2013/06/01 pops 

CreateJSを利用して、キャンバスにサムネールをwicks方式で表示します。サムネールを「クリック」すれば画像が拡大します。偶然出来た「LightBox」で「フルサイズ表示」します。LightBoxのテストより「サムネールwicks方式」で表示テストの意味合いが濃い。
easeljs-0.7 でのテストです。

 

CreateJS wicks方式サムネール、LightBoxタイプ、フルサイズ表示のテスト


2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。動作など確認してeaseljs-0.7用に更新しています。(2013/10/19)


現段階では「LightBox」らしきモノも表示出来ると言うだけです。Canvas、CreateJSの進化次第では将来どの様になるかは判りません。選択肢が増えるのか、単なる邪道なのか、、、?

 

wicks方式サムネール、マウスオーバーすると「サムネール」左右がずれて表示するタイプです。良い「呼称」がないので、同様な仕様で有名な「wicks」の名前を使用しました。その方が動きが予測できる様な気がします。

 

DEMO


CreateJS wicks方式サムネール、LightBoxタイプ、フルサイズ表示。(createJS018b.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// Android系でCanvasをリサイズした場合にクラッシュする情報があります。これは未確認です。///


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


HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.0.min.js"></script>

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


HTML (HTML5)


<div id="image-box">
	<canvas id="mainCanvas" width="640" height="200"></canvas>
</div>

canvasは単にメニューを収納しているだけです。装飾などなくとも良い。


JS

createJS018b.js、JS名は任意に変更可。(easeljs-0.7用、スクリプトが雑、繁雑だ!)


//日本語
//createJS018b.js
//wicksサムネール方式デモ用
//easeljs-0.7フルスケール専用

//------------------------------------------------------
//初期設定

var speed=1000;//拡大移動、アニメ速度

//ベースcanvasサイズ
var canvasWidth=640;
var canvasHeight=200;

//ロード画像の大きさ
var imageW=640;
var imageH=300;

//サムネールBOX画像
var thumbW=128;
var thumbH=60;
var margin=4;//余白
var thumbRadius=5;//角丸半径

//wicks全体の幅、高さはサムネールの大きさより大きく
var wicks_W=600;
var wicks_H=80;
//サムネール配置間隔/スペース考慮
var wicks_space=142;
//wicks位置
var wicksBox_X=20;
var wicksBox_Y=20;
//パーツ幅高さ
var wicksParts_W=20;
var wicksParts_H=80;

//サムネール配置
var thumbSet=true;//未使用

//lightbox設定
var overlay_color='#000000';//#000000 #FFFFFF
var overlay_alpha=0.85;//0.5-1

//画像manifestリスト
var manifest=[
{src:'/main/images/toyota_car10.jpg',id:'PHOTO'},
{src:'/main/images/toyota_car11.jpg',id:'PHOTO'},
{src:'/main/images/toyota_car12.jpg',id:'PHOTO'},
{src:'/main/images/toyota_car13.jpg',id:'PHOTO'},
{src:'/main/images/toyota_car15.jpg',id:'PHOTO'},
{src:'/main/images/toyota_car16.jpg',id:'PHOTO'}
];

//最初の画像0のこと
var image_no=0;
//画像数
var image_max;

//拡大表示する画像の大きさ変更しないこと
viewW=imageW;
viewH=imageH;

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

//ステージ、未使用変数も含む
var stage,stage2;
//Loader
var loader;
//コンテナ
var container;
var loadingcontainer;
var progresscontainer;
var thumbboxcontainer;
//LightBoxコンテナ
var lightboxcontainer;
//画像result
var mainImage,backImage,topImage,welcomeImage;
//Loading
var loadingShape;
//TEXT未使用
var viewtext;

//読み込み画像result保存容器
var assets=[];

//変数
var globalflag=false;
//loading変数
var loading=false;
//ProgressBar
var progressbar;
var bar_v=0;
var once=true;//未使用
var kcount=0;

//canvas中心位置
var canvasX=canvasWidth/2;
var canvasY=canvasHeight/2;

var gangle=0;//角度Angle
//グローバルID押された画像番号
var gid_no=0;

var main_scale=1;//標準1
//拡大表示する画像のスケール計算と補正
if (main_scale < 0.1) {main_scale=1;}
var view_scaleX=viewW/imageW*main_scale;
var view_scaleY=viewH/imageH*main_scale;

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

//Thumbボタン
var myThumb=[];
var angles=[];

//ブラウザサイズ/レーヤーCSS
var browserW;
var browserH;
//表示エリアサイズ
var clientW;
var clientH;

//lightbox-image
var lightboxImage;
//全体のCanvasエレメント
var popup_element;
//overlayバックレーヤー
var popup_overlay;
//Litebox-On作った
var liteboxOn=false;
var full_scale=1;//フルスケール変数

//wicksメニュー構成
var wicksBox;
//wicksホルダー
var wicksfolder;
var partsLeft;
var partsRight;
var wicksBoxmask;
//左右ボタン
var prevBtn;
var nextBtn;
//position関連変数
var position_st = [];//初期標準位置保存配列
var position_op = [];//オープン位置保存配列
var position_cl = [];//クローズ位置保存配列


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

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver設定
	stage.enableMouseOver(20);

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

	//thumbboxcontainerコンテナ下に移動下画像層なし
	thumbboxcontainer=new createjs.Container(0,0,canvasWidth,canvasHeight);
	//コンテナをステージにaddChild
	stage.addChild(thumbboxcontainer);

	//上画像層、空コンテナを作る
	container=new createjs.Container();
	topImage=new createjs.Bitmap();
	//ロード画像サイズで調整
	topImage.regX=imageW/2;
	topImage.regY=imageH/2;
	//拡大表示する画像のスケールで補正
	topImage.scaleX=view_scaleX;
	topImage.scaleY=view_scaleY;

	container.addChild(topImage);
	stage.addChild(container);
	topImage.visible=false;

	//loadingコンテナを作る
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//LOADINGを作る
	loadingShape=loadingIndicator();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickを設定
	loadingShape.tick=function (){
		if(loading) {
			loadingShape.rotation +=5;
			stage.update();
		}
	}
	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loading=true;//loading表示判定

	stage.update();

	//ProgressBar、canvasWidthの幅で描画
	progresscontainer=new createjs.Container();
	progresscontainer.x=0;
	progresscontainer.y=20;
	progressbar=new createjs.Shape();
	progressbar.graphics.s(0).beginFill("#888888").drawRect(0,0,canvasWidth,4);
	//bar_v判定tickを設定
	progressbar.tick=function (){
		if(bar_v > 0) {
			progressbar.graphics.s(0).beginFill("#FFD700").drawRect(0,0,canvasWidth*bar_v,4);
			stage.update();
		}
	}
	//Ticker.addEventListener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.addChild(progressbar);
	stage.addChild(progresscontainer);

	//簡易TEXT削除

	stage.update();

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

//progressBar
function progress(event) {

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

//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);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

//各画像読み込み完了
function fileload (event) {

	var id=event.item.id;
	//画像選別
	if (id == 'PHOTO') {
		//エラー無しの画像をassets容器に保存
		assets.push(event.result);
	}
}
//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;
	//loader Listener削除
	loader.removeEventListener('fileload',fileload);
	loader.removeEventListener('complete',complete);

	//loading EventListener削除
	createjs.Ticker.removeEventListener('tick',loadingShape.tick);
	//非表示でも良い
	loadingcontainer.visible=false;
	loading=false;//loading表示判定

	stage.update();

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

		//早すぎるので調整
		setTimeout(function() {

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

			stage.update();
			//クリック有効
			globalflag=true;
			//Menuを作る
			drawMenu ();

		},1000);
	}
}

//wicksサムネールを作る
function drawMenu () {

	//ボタン幅、高さ
	var btnW=wicks_space;//サムネール配置間隔
	var btnH=(thumbH+margin*2);

	//部品構成
	wicksBox=new createjs.Container();
	//wicksホルダー/バックRectはマスクで
	wicksfolder=new createjs.Container();
	wicksfolder.x=wicksParts_W;

	//ホルダーmask、ホルダー背景兼用
	var wicksmask=new createjs.Shape();
	wicksmask.graphics.beginFill('#FFFFFF').drawRect(0,0,wicks_W-wicksParts_W*2,wicks_H);
	wicksmask.x=wicksParts_W;

	//左
	partsLeft=new createjs.Container();
	var back=new createjs.Shape();
	back.graphics.beginFill('#CCCCCC').drawRect(0,0,wicksParts_W,wicksParts_H);
	prevBtn=createCirclebtn(0,0,5,'#000000','#FFD700');
	prevBtn.x=wicksParts_W/2;
	prevBtn.y=wicksParts_H/2;
	partsLeft.addChild(back,prevBtn);
	partsLeft.x=0;

	//右
	partsRight=new createjs.Container();
	var back=new createjs.Shape();
	back.graphics.beginFill('#CCCCCC').drawRect(0,0,wicksParts_W,wicksParts_H);
	nextBtn=createCirclebtn(0,0,5,'#000000','#FFD700');
	nextBtn.x=wicksParts_W/2;
	nextBtn.y=wicksParts_H/2;
	partsRight.addChild(back,nextBtn);
	partsRight.x=wicks_W-wicksParts_W;

	//フォルダーMASK
	wicksfolder.mask=wicksmask;
	//addChild
	wicksBox.addChild(partsLeft,wicksmask,wicksfolder,partsRight);
	wicksBox.x=wicksBox_X;
	wicksBox.y=wicksBox_Y;

	//thumbboxcontainerに収容
	wicksBoxmask=new createjs.Shape();
	wicksBoxmask.graphics.beginFill('#FFFFFF');
	operaRoundRect(wicksBoxmask,0,0,wicks_W,wicks_H,5);
	wicksBoxmask.x=wicksBox_X;
	wicksBoxmask.y=wicksBox_Y;
	wicksBoxmask.shadow=shadow;

	//全体MASK
	wicksBox.mask=wicksBoxmask;
	//addChild
	thumbboxcontainer.addChild(wicksBoxmask,wicksBox);

	//左右ボタンを非表示にする、現在表示
	//prevBtn.visible=false;
	//nextBtn.visible=false;

	var fldr_W=wicks_W-wicksParts_W*2;
	var kankaku=(fldr_W-btnW)/(image_max-1);

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

		//番号受け渡し
		var no=i;

		//Bitmap 現在こちら使用
		myThumb[i]=createThumbBox(assets[no],0,0,thumbW,thumbH,thumbRadius,margin,imageW,imageH,no);

		//配置/横は自動であとで揃う
		myThumb[i].x=0;
		//縦は中央に
		myThumb[i].y=wicks_H/2;

		//傾き、テキトウランダム
		angles[i]=Math.ceil(Math.random()*6)*30*(Math.floor(Math.random()*3)-1);
		//angles[i]=0;//角度0

		//判別用のproperty:idを書き込む
		myThumb[i].id=i;

		myThumb[i].cursor='pointer';
		//myThumb wicksfolderにaddChild
		wicksfolder.addChild(myThumb[i]);

		//配置位置を計算保存、中央補正
		//position保存
		position_st[i]=(fldr_W/image_max*i)+btnW/2;
		position_op[i]=(kankaku*i)+btnW/2;
		position_cl[i]=fldr_W-kankaku*(image_max-i)+btnW/2;
		if(i == 0) {position_cl[0]=btnW/2;position_op[0]=btnW/2;}//1番目補正

		//クリックアクション
		myThumb[i].on("click",handleclick,null,false,i);

	}

	//上画像クリックアクション
	topImage.addEventListener('click',resize_image);

	//ダミーバックアクション補正
	var dummyback=new createjs.Shape();
	dummyback.graphics.beginFill('#FFFFFF').drawRect(0,0,btnW,wicks_H);
	dummyback.x=wicks_W-wicksParts_W*2;

	//rollover-action
	dummyback.addEventListener('rollover',function (e) {
		return false;
	});
	wicksfolder.addChild(dummyback);

	//サムネール均等配置reset実行
	reset_slide();

	//lightboxを作る
	if (!liteboxOn) {
		//lightboxを作る/CSSで非表示にする
		createLightbox();
	}

	//Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

}

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

	//アニメ中は機能しない
	if (!globalflag) {return}

	var hit_no=no;
	//画像番号/ホルダーバックRectが有ると番号が狂う
	image_no=hit_no;

	//lightboxの場合updateしないので追加
	stage.update();//重要

	//lightbox
	setLightbox(image_no);

}

//上画像を戻すFade
function resize_image() {

	globalflag=false;

	var sclx=thumbW/imageW;
	var scly=thumbH/imageH;

	//topImage/元の位置を目指す/angles[image_no]
	var tw2=createjs.Tween.get(topImage)
	.to({x:gpoint_x,y:gpoint_y,scaleX:sclx,scaleY:scly,rotation:gangle,alpha:0},speed/2)
	.call(finshtween2);

	//Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);
}

//Lightboxアニメ表示
function setLightbox(no) {

	//フルスケール専用
	fullSize(clientW,clientH);
	view_scaleX=view_scaleY=full_scale;

	//clientサイズ取得
	set_clientSize();
	//clientW clientH
	popup_element.setAttribute('width',clientW);
	popup_element.setAttribute('height',clientH);

	//popup_overlay element表示
	lightboxImage.visible=false;
	//高さを戻す
	popup_overlay.style.height='100%';
	popup_overlay.style.visibility='visible';//CSSで表示にする
	popup_element.style.visibility='visible';//CSSで表示にする
	//画像
	lightboxImage.alpha=0;
	var newimage=new createjs.Bitmap(assets[no]).image;
	lightboxImage.image=newimage;

	//縮小、サムネールの大きさに
	lightboxImage.scaleX=thumbW/imageW;
	lightboxImage.scaleY=thumbH/imageH;
	//rotation
	lightboxImage.rotation=angles[no];

	lightboxImage.visible=true;
	stage2.update();

	//TWEEN
	var twlb=createjs.Tween.get(lightboxImage)
	.wait(500)
	.to({scaleX:view_scaleX,scaleY:view_scaleY,rotation:0,alpha:1},1000)
	.call(function () {
		//表示中のみshadowフィルター
		lightboxImage.shadow=shadow;
	});

	//Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick2);

}
//Lightboxアニメ非表示
function resetLightbox() {

	//shadowフィルター削除
	lightboxImage.shadow=null;

	//TWEEN
	var twlb2=createjs.Tween.get(lightboxImage)
	.to({alpha:0},500)
	.call(function () {
		createjs.Ticker.removeEventListener('tick',tick2);
		//非表示
		lightboxImage.visible=false;
		lightboxImage.alpha=1;
		popup_element.style.visibility='hidden';//CSSで非表示にする
		popup_overlay.style.visibility='hidden';//CSSで非表示にする
		popup_overlay.style.height='0%';

	});
}

//windowがリサイズされた
window.onresize=function(event){

	//liteboxがあれば実行
	if (liteboxOn) {
		//browserサイズ取得
		set_browserSize();
		//clientサイズ取得
		set_clientSize();
		fullSize(clientW,clientH);
		view_scaleX=view_scaleY=full_scale;

		//キャンバス補正但し同じ大きさだbrowserW browserH
		//フルスクリーンの場合に必要、フルスケールの場合補正しないと欠ける
		popup_element.setAttribute('width',browserW);
		popup_element.setAttribute('height',browserH);

		//lightboxコンテナ位置補正
		lightboxcontainer.x=clientW/2;
		lightboxcontainer.y=clientH/2;

		//IMAGE
		lightboxImage.scaleX=view_scaleX;
		lightboxImage.scaleY=view_scaleY;

		stage2.update();//重要
	}
}

//lightboxを作る/CSSで非表示にする
function createLightbox () {

	//Litebox-On
	liteboxOn=false;

	//レーヤー新規作成
	var layelement=document.createElement('div');
	layelement.id='lightbox-overlay'; 
	//div append Body
	document.body.appendChild(layelement);
	popup_overlay=document.getElementById('lightbox-overlay');
	//CSS変更
	popup_overlay.style.backgroundColor=overlay_color;
	popup_overlay.style.opacity=overlay_alpha;
	//非表示でもあると重いので高さを変える
	popup_overlay.style.height='0%';

	//canvas新規作成
	var element=document.createElement('canvas');
	element.id='popCanvas';
	//canvas append Body
	document.body.appendChild(element);

	//createjsステージ2を設定
	popup_element=document.getElementById('popCanvas');
	stage2=new createjs.Stage(popup_element);

	set_browserSize();
	//キャンバスの大きさはsetAttributeで設定することbrowserW browserH
	//CSSは相対的で正確には成らない、こちら使用
	popup_element.setAttribute('width',browserW);
	popup_element.setAttribute('height',browserH);

	//clientW clientH こちらはブラウザサイズ変更した場合ブラウザにより欠ける
	/*
	popup_element.setAttribute('width',clientW);
	popup_element.setAttribute('height',clientH);
	*/

	//Lightbox画像Container
	lightboxcontainer=new createjs.Container();
	//空画像
	lightboxImage=new createjs.Bitmap();
	//ロード画像サイズで調整
	lightboxImage.regX=imageW/2;
	lightboxImage.regY=imageH/2;
	lightboxcontainer.addChild(lightboxImage);
	lightboxImage.visible=false;

	//javascript OK
	set_clientSize();
	lightboxcontainer.x=clientW/2;
	lightboxcontainer.y=clientH/2;

	stage2.addChild(lightboxcontainer);

	//container-click-action、画像
	lightboxcontainer.addEventListener('click',resetLightbox);
	//キャンバスelement-click-action、上にelementがあるからレーヤーはだめ、無くとも良い
	//フルスクリーンの場合でも有効になる様にしている
	popup_element.onclick=function(event) {resetLightbox();}

	popup_element.style.visibility='hidden';//CSSで非表示にする
	popup_overlay.style.visibility='hidden';//CSSで非表示にする
	stage2.update();//表示はしない

	//Litebox-On作った
	liteboxOn=true;

}

//tickステージ
function tick() {

	stage.update();
}
//tickステージ2
function tick2() {

	stage2.update();
}

//quadraticCurveTo、こちら使用
function operaRoundRect(s,x,y,w,h,r) {

	s.graphics.moveTo(x+r,y)
	.lineTo(x+w-r,y)
	.quadraticCurveTo(x+w,y,x+w,y+r)
	.lineTo(x+w,y+h-r)
	.quadraticCurveTo(x+w,y+h,x+w-r,y+h)
	.lineTo(x+r,y+h)
	.quadraticCurveTo(x,y+h,x,y+h-r)
	.lineTo(x,y+r)
	.quadraticCurveTo(x,y,x+r,y);
}

//create-box
function createThumbBox (image,x,y,w,h,r,m,imgw,imgh,no) {

	//サムネールBOX
	box=new createjs.Container();
	var thumbimg=new createjs.Bitmap(image);
	thumbimg.x=m;
	thumbimg.y=m;
	//縮小
	thumbimg.scaleX=w/imgw;
	thumbimg.scaleY=h/imgh;
	//back
	var thumbback=new createjs.Shape();
	thumbback.graphics.s(0).beginFill('#FFFFFF');
	operaRoundRect(thumbback,x,y,w+m*2,h+m*2,4);

	thumbback.shadow=shadow;

	box.addChild(thumbback,thumbimg);
	box.regX=(w+m*2)/2;
	box.regY=(h+m*2)/2;

	//rollover
	box.addEventListener('rollover',function (e) {
		//
		set_slide(no);
	});
	//rollout
	box.addEventListener('rollout',function (e) {
		//
		//reset_slide();
	});

	return box;
}

//create-Circleボタン
function createCirclebtn (x,y,r,outcolor,overcolor){

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name='btntext';//name挿入
	var s=new createjs.Shape();
	//共通
	s.graphics.s().beginFill(outcolor).drawCircle(x,y,r);
	btn.addChild(s);
	btn.shadow=shadow;
	btn.addEventListener('click',function () {
		//
	});
	//rollover
	btn.addEventListener('rollover',function (e) {
		//
		s.graphics.clear();
		s.graphics.s().beginFill(overcolor).drawCircle(x,y,r);
		stage.update();
	});
	//rollout
	btn.addEventListener('rollout',function (e) {
		//
		s.graphics.clear();
		s.graphics.s().beginFill(outcolor).drawCircle(x,y,r);
		stage.update();
	});
	return btn;
}

//slide-tween
function set_slide(no) {
	//
	var x_v;
	for (var i=0; i < image_max; i++) {

		if (i <= no) {
			x_v=position_op[i];
		} else {
			x_v=position_cl[i];
		}
		var tween=createjs.Tween.get(myThumb[i])
		.wait(250)
		.to({x:x_v},200);
		//.call(finshtween);

	}

}
//
function reset_slide() {
	//
	var x_v;
	for (var i=0; i < image_max; i++) {
		x_v=position_st[i];
		var tween=createjs.Tween.get(myThumb[i])
		.to({x:x_v},150);
		//.call(finshtween);
	}

}
//finshtween
function finshtween() {
	//
}

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

//スケール決定、clientSize画面フルサイズにする
function fullSize(cW,cH) {

	var sideSpace=10;
	//比率ratio
	var ratio=1;
	//clientSizeパネル寸法で領域を狭める
	var erea_W=cW-sideSpace*2;
	var erea_H=cH-sideSpace*2;

	//収まるスケールを決定する
	//横長画像はエリア横幅に合わせる
	if (imageH < imageW) {
		ratio=erea_W/imageW;
		//縦が収まらない場合修正
		if (erea_H < imageH*ratio) {
			ratio=erea_H/imageH;
		}
	}
	//同比率、縦長画像はエリア縦幅に合わせる
	//縦横同じ大きさはエリア縦で比較
	if (imageH >= imageW) {
		ratio=erea_H/imageH;
		//横が収まらない場合修正
		if (erea_W < imageW*ratio) {
			ratio=erea_W/imageW;
		}
	}
	//full_scaleに変換
	full_scale=ratio;
}

//browserSize
function set_browserSize(){

	browserW=window.outerWidth;
	browserH=window.outerHeight;
}
//clientSize
function set_clientSize(){

	//javascript表示エリアdocumentElement
	clientW=window.document.documentElement.clientWidth;
	clientH=window.document.documentElement.clientHeight;
}

//簡単なLOADING
function loadingIndicator(){

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

	//描画データ
	var cx,cy,
	numNeedles=12,
	innerR=10,
	outerR=5,
	cAngle= -Math.PI/2,
	nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){
		cAngle +=nAngle;
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)* innerR;
		graphics.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

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


/*日本語 createJS018b.css*/

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

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:200px;
margin:0 auto;
padding:0;
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:#FFFFFF;
}

#image-box #mainCanvas {
border-style:none;
background-color:transparent;
}

#lightbox-overlay {
z-index:7700;
visibility:hidden;
position:fixed;
top:0;left:0;
width:100%;
height:100%;
background-color:#000000;
opacity:1;
}

#popCanvas {
z-index:7777;
position:fixed;
top:0;left:0;
}

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


簡単な説明


簡単な説明など


[説明図]


 

注意、このサンプルは、テスト用のLightBoxタイプ、フルサイズ表示です。

 

CreateJSを利用して、キャンバスで、LightBoxの作り表示しましたが、まだテストです。


1. wicks方式サムネールメニューに、LightBoxを加えたテストサンプルです。
2. レーヤーとLightBox本体をjavascriptで作り appendChild() しています。不要に成ったら削除したいが出来ません。javascriptで removeChild() が使えない。
3. サムネールを並べる時に最後の部分をカットするために「マスク」をしています。サムネールのアクションが残り「マスク」でカットした部分でも機能してしまいます。困るズラ、(上図参照)
4. フルサイズ表示専用な為に迫力がある。但し、単なる拡大だから画質は劣る。(1x1ドット、モニターの方は物理的に拡大出来ませんので、虫眼鏡で拡大してオモイッキリ騒いでください)
5. Android系でCanvasを「リサイズ」した場合にクラッシュする情報があります


LightBoxは、テスト的に作っただけで現在何も判らない状態であり、今後どの様に成るかも未定。よって詳細説明などは控えます。興味のある方は中身をみてください。


LightBoxの削除について


1. 以前より、LightBoxを入れると、CSSが重くなる傾向に有り、特に「IE」では顕著であった。
2. LightBoxを使用する時構造を作り、使用後は削除するが基本であった。


現在、LightBox、Canvasも使用しない時は非表示にしている。出来ればその都度Canvas、オーバーレーを作って、LightBoxの使用を終えたら削除したいのですが、要素を削除する removeChild() が CreateJS、javascript、双方とも同じメソッドのため使用出来ません。削除してもシナクトモ処理時間的には差異は感じられません。
よってLightBoxを使用しない時は非表示にしています。以下参考まで。


popup_element、popup_overlayは新たにjavascriptで追加した要素である

CSSで非表示
popup_element.style.visibility='hidden';//CSSで非表示にする
popup_overlay.style.visibility='hidden';//CSSで非表示にする

メソッド removeChild() が同じなため、javascript で削除出来ない。

addChild() removeChild() は、CreateJSで作ったインスタンスをステージにadd removeするメソッド。


//javascript
//popup_element.parentNode.removeChild(popup_element);
//popup_overlay.parentNode.removeChild(popup_overlay);

jqueryなら、メソッド名が違うので削除出来る。但しこのためだけに「jquery」を読み込むのは無駄な気がする。


stage2=null;
$('#lightbox-overlay').remove();
$('#popCanvas').remove();

「CreateJS は Canvas処理作業に使用するものです」と言う事だ。勿論、CreateJSの「DOMElement Class」にもremoveChild()メソッドは無い。(現在、削除は考慮されていないし、HTMLに存在する要素に対する制御が目的のようだ)
将来この辺を考慮してもらいたいと願う。他に方法はあるか?


サムネール rollover rollout アクション

easeljs-0.7より mouseover mouseout が rollover rollout になりましたので変更します。
新しい、rollover rollout、が古い、mouseover mouseout、と同様です。


サムネール rollover rollout アクションはcreateThumbBox()で作る時に設定されている。rolloutのアクションは使用していない。reset_slide()を実行する様に変更すれば。サムネールは均等な位置に戻る。


	//rollover
	box.addEventListener('rollover',function (e) {
		//
		set_slide(no);
	});
	//
	box.addEventListener('rollout',function (e) {
		//
		//reset_slide();
	});

現在、LightBoxを閉じた場合に開いた「サムネール」が判るようにrolloutアクションを意図的に実行していない。


サムネールアクションの補正処理

「マスク」でカットされ非表示になっている部分でも「サムネール」の「rollover rollout」が機能します(これ、困る!、上図参照)。ほって於いても良いのですが、カバーShape()を該当部分の上に重ねてダミーのアクション設定で修正しています。(returnするだけ、上の層でダミー的に処理し下の反応を抑える、ダブル時などよく使う)
勿論、マスクされていますし、欄外配置のため見えません。(ドアとして利用も可能かな)

ここでの処理では、rollover の addEventListener さえ有れば良いから、return falseを記述せずとも機能する。
マスク材の位置を変えたりと色々してみたが結果は同じだ。「仕様」であると理解する外無い。


//ダミーバックアクション補正
var dummyback=new createjs.Shape();
dummyback.graphics.beginFill('#FFFFFF').drawRect(0,0,btnW,wicks_H);
dummyback.x=wicks_W-wicksParts_W*2;
//rollover-action
dummyback.addEventListener('rollover',function (e) {
	return false;
});
wicksfolder.addChild(dummyback);

サムネールを配置、し終わった直後に設定しますので。必ず1番上に配置になる。X位置をズラシて利用する。
他の処理として、サムネール要素が非表示ならアクションは機能しない。mouseEnabledを旨く利用する方法もあるかも知れないが、取り合えずカバーで覆う方法で処理する。


サムネールスライド関数の直接実行

サムネール指定位置のオープン、均等配置を直接行う方法である。それぞれ、set_slide() reset_slide()を実行すればよい。(このデモでは、Ticker設定が常時機能している)


指定位置のオープン、指定番号は0より指定する
set_slide(指定番号);

均等配置
reset_slide();

左右のボタンについて

左右のボタンは現在使用していませんので飾りになっています。サムネールが多い場合のページを作る時に利用できます。ページを作る事は可能ですが今よりモット繁雑になります。現在は「画像先読み」形式ですから余り画像数が有っても困ります。必要な方は挑戦してください。また普通のスライドMENUに応用も可能かと思う。マウスオーバーで色が変わりますのでオモイッキリ遊んでください。


//左右ボタンを非表示にする
prevBtn.visible=false;
nextBtn.visible=false;

wicks方式サムネール表示

この方式は、サムネールを重ねているので多くのサムネールを狭い場所に収納できるのが利点だが、作るのは面倒である。構造を簡略できるが、多機能に変更できる形で試作してみた。各部にshadow処理をしていますので多少重いです。shadow処理をしなければ軽くなります。
jquery AS3で作る場合と全て同じであるが、アニメの制御が異なるので、TWEEN の設定に少しアイデアが必要かも!。


LightBox構造とCSS

現在、透過レーヤーoverlay、画像操作Canvasと単純にbodyにappendChild()している状態です。透過レーヤー面積が狭くなるように position:fixed で固定しています。z-index で調整します。(ワタシは、7777 を使ってしまう習性がある、7776 7778 は非常に落ち込む数字です)


Android系での問題点

Android系でCanvasをリサイズした場合にクラッシュする情報があります。このスクリプトは、ブラウザ サイズを「意図的に変えた」場合、Canvasをリサイズする様に出来ています。
ワタシは、Android系は持って居ませので、よって未確認です。Android系に対応する気は有りませんが、Android系のCanvas使用に関する不具合情報など有りますのでご注意ください。


 

その他

DEMO専用です。使用する事は可能ですが、あくまでもテストですので個人の判断で使用下さい。画像などは各自ご用意下さい。JSの先頭部分をお読み下さい。
テストですので、勿論 間違い含有、予告無くスクリプトなど修正する場合があります、ご了承下さい。


下記ページのものを基本に作りました。

【参照】当方の記事: CreateJS 画像拡大ビューア、サムネールDrag対応 LightBoxタイプ

【参照】当方の記事: CreateJS 画像拡大ビューア、サムネールDrag対応 LightBoxタイプ、フルサイズ表示


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]