POPSブログ

CreateJS 画像拡大ビューア、サムネールDrag対応 LightBoxタイプ

223

  Category:  javascript2013/05/23 pops 

CreateJSを利用して、キャンバスにサムネールをランダム配置表示します。サムネールを「クリック」すれば画像が拡大します。サムネールはDrag対応ですから移動出来ます。偶然出来た「LightBox」タイプを組み合わせてみました。
easeljs-0.7 でのテストです。

 

CreateJS 画像ビューア、サムネールDrag対応、LightBoxタイプのテスト


2013/09/25/ バージョンアップされ EaselJS-0.7 に成りました、Drag 設定部分が大幅に改定されましたので、該当する記事、デモとも easeljs-0.7.0 対応に順次修正します。2013/10/05


jQuery、AS3、でも作られて居ますので、真新しいものでは有りませんが、サムネールの大きさを指定可能です。通常表示、LightBox表示、画像拡大率を3種指定切り替え可能。


DEMO


CreateJS 画像ビューア、サムネールDrag対応 LightBoxタイプ。(createJS017.js)

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


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


HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。


<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" class="radius">
	<div id="canvasWrap">
		<canvas id="mainCanvas" width="640" height="400"></canvas>
	</div>
</div>

canvasを一度ラップ(#canvasWrap)している構造もありますが、在っても無くとも同じです。


JS

createJS017.js、JS名は任意に変更可。注意、easeljs-0.7.0 対応


//日本語
//createJS017.js
//Light-Box
//easeljs-0.7用

//------------------------------------------------------
//初期設定
//拡大移動、アニメ速度
var speed=1000;
//表示する画像のスケール指定 0.5-1.2
//スケールボタンが無い場合有効
var main_scale=1;//標準1

//prologueプロローグ
var prologue=true;//true false

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

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

//拡大表示する画像の大きさ、実際ロード画像と違っても良い
viewW=640;
viewH=300;

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

//サムネール配置 true=ランダム false=中央付近番号順
var thumbSet=true;//false true

//lightbox設定
var lightbox=false;//使用true false
var overlay_color='#000000';//#000000 #FFFFFF
var overlay_alpha=0.8;//0.5-1

//lightbox切り替えボタン表示 true false
var lbBtn_use=true;//true

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

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

//ステージ
var stage,stage2;
//Object
var canvasObject;
//Loader
var loader;
//コンテナ
var container;
var backcontainer;//未使用
var loadingcontainer;
var progresscontainer;
var thumbboxcontainer;
var sclbtncontainer;
var messPanel;
//lbBtnContainer
var lbbtncontainer;
//LightBox-container
var lightboxcontainer;
//画像result
var mainImage,backImage,topImage,welcomeImage;
//Loading
var loadingShape;
//TEXT
var viewtext;
//メッセージTEXT
var messtext;

//ドラッグ操作moveがあったか
var dragflag=false;
var mousePoint;

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

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

//canvas中心位置
var canvasX=canvasWidth/2;
var canvasY=canvasHeight/2;
//Global-Point
var gpoint_x=0;
var gpoint_y=0;
var gangle=0;//角度Angle
//グローバルID押された画像番号
var gid_no=0;

//拡大表示する画像のスケール計算と補正
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=[];
var mybtn=[];//sclbtn
var activeBtn;//使用

//ブラウザサイズ/レーヤー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;

//ステージ周りセット
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);

	//welcome画像層画像表示
	welcomeImage=new createjs.Bitmap('/main/images/welcome_back2.png');
	stage.addChild(welcomeImage);
	//welcome画像を先に表示
	stage.update();

	//下画像層なし
	//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
	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);
			stage.update();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);

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

	//control-BtnContainer
	sclbtncontainer=new createjs.Container();
	sclbtncontainer.x=canvasWidth-50;
	sclbtncontainer.y=canvasHeight-15;
	stage.addChild(sclbtncontainer);

	//control-lbBtnContainer
	//lightbox切り替えボタン表示
	if (lbBtn_use) {
		lbbtncontainer=new createjs.Container();
		lbbtncontainer.x=20;
		lbbtncontainer.y=canvasHeight-15;
		stage.addChild(lbbtncontainer);
	}

	//メッセージBOX
	//x,y w,h,r,背景色,文字色
	messPanel=createMessPanel(0,0,250,30,5,'#FFFFFF','#FF0000');
	messPanel.x=canvasWidth/2;
	messPanel.y=canvasHeight/2;
	stage.addChild(messPanel);
	messPanel.visible=false;

	stage.update();

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

	//画像ロードに進む
	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;
	//簡易TEXT
	set_text('Loading End!');
	//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();

	//全ボタン幅
	var btnW_all=0;

	if (thumbSet) {
		var cw=Math.floor(canvasWidth*3/4);
		var ch=Math.floor(canvasHeight*3/4);
	}

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

		//配置
		if (!thumbSet) {
			//中央付近番号順
			myThumb[i].x=Math.floor((canvasWidth-thumbW)/(image_max-1))*i+thumbW/2;
			myThumb[i].y=(canvasHeight/2)+(Math.floor(Math.random()*canvasHeight/2)-canvasHeight/4);
		} else {
			//ランダム
			myThumb[i].x=Math.floor((Math.random()*cw)+canvasWidth*0.12);
			myThumb[i].y=Math.floor((Math.random()*ch)+canvasHeight*0.12);
		}

		//傾ける/+-60
		angles[i]=Math.floor(Math.random()*120)-60;
		myThumb[i].rotation=angles[i];

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

		myThumb[i].cursor='move';
		//myThumb addChild
		thumbboxcontainer.addChild(myThumb[i]);

		//クリックアクション
		myThumb[i].addEventListener('click',handleclick);

		//ドラッグアクション
		myThumb[i].addEventListener('mousedown',press);

	}

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

	//control-Btn
	//controlActiveボタンを作る
	activeBtn=createActivebtn (0,0,5,"#CCCCCC");

	var bkcolors=['#FF0000','#FFFFFF','#0000FF'];
	var scales=[1.2,1,.8];//120% 100% 80%

	//mybtn create-Circleボタン
	for (var i=0; i < 3; i++) {
		mybtn[i]=createCirclebtn (0,0,5,bkcolors[i],scales[i],i);
		mybtn[i].x=i*15;
		sclbtncontainer.addChild(mybtn[i]);
	}
	//controlActiveボタン
	activeBtn.x=mybtn[1].x;
	sclbtncontainer.addChild(activeBtn);

	//lightbox切り替えボタン表示
	if (lbBtn_use) {
		//lbBtn
		var lbbtn=createCirclebtn2 (0,0,5,'#555555','#FFD700');
		lbbtncontainer.addChild(lbbtn);
	}

	//プロローグなし
	if (!prologue) {
		stage.update();
	} else {
		thumbboxcontainer.visible=false;
	}

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

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

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

			//簡易TEXTクリア
			set_text('');
			//viewtext.visible=false;
			stage.update();
			//クリック有効
			globalflag=true;
			//プロローグ
			if (prologue) {
				prologue_action();
			}

		},1000);
	}
}

//プロローグAction
function prologue_action () {

	globalflag=false;
	kcount=0;
	var radius=Math.floor(canvasWidth*0.7);
	var posxs=[];
	var posys=[];
	var k=0;
	thumbboxcontainer.visible=true;

	for (var i=0; i < image_max; i++) {
		//現在位置保存
		posxs[i]=myThumb[i].x;
		posys[i]=myThumb[i].y;
		//外周に移動
		var angle=Math.random()*360;
		myThumb[i].x=Math.cos(angle)*radius+(canvasWidth/2);
		myThumb[i].y=Math.sin(angle)*radius+(canvasHeight/2);
		myThumb[i].rotation=180;
		myThumb[i].scaleX=5;
		myThumb[i].scaleY=5;
		myThumb[i].alpha=0;
		var delay=(i+1)*500;

		var tw=createjs.Tween.get(myThumb[i])
		.wait(delay)
		.to({x:posxs[i],y:posys[i],scaleX:1,scaleY:1,rotation:angles[i],alpha:1},1000)
		.call(finshprologue);

	}

	//Ticker設定
	createjs.Ticker.addEventListener('tick',tick);
}
//プロローグ用
function finshprologue() {

	//全て完了
	if(kcount == image_max-1){
		finshprologueAll();
	}
	//0からカウント加算
	kcount ++;

}
//プロローグ用
function finshprologueAll() {

	//少し遅延させる
	setTimeout(function() {
		globalflag=true;
		//Ticker OFF
		createjs.Ticker.removeEventListener('tick',tick);

	},300);

}

//DRAW、通常アニメ
function draw() {

	globalflag=false;
	topImage.visible=false;
	stage.update();

	//MODE Fade
	var mode=0;
	topImage.alpha=0;

	//画像result取得/Tween後も使用する
	mainImage=assets[image_no];

	//縮小、サムネールの大きさに
	topImage.scaleX=thumbW/imageW;
	topImage.scaleY=thumbH/imageH;

	//移動位置Global-Point
	topImage.x=gpoint_x;
	topImage.y=gpoint_y;

	//傾ける
	//topImage.rotation=angles[image_no];
	topImage.rotation=gangle;

	//上画像更新画像Bitmap挿入、中央補正なし回転は出来ない
	topImage.image=new createjs.Bitmap(mainImage).image;

	topImage.visible=true;

	//topImage/canvas中心位置を目指すFade
	//拡大表示する画像の指定スケールまで拡大

	var tw=createjs.Tween.get(topImage)
	.to({x:canvasX,y:canvasY,scaleX:view_scaleX,scaleY:view_scaleY,rotation:0,alpha:1},speed)
	.call(finshtween);

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

}

//フェードアニメ完了
function finshtween () {

	//少し遅延させる
	setTimeout(function() {

		//アニメ
		globalflag=true;
		//Ticker OFF
		createjs.Ticker.removeEventListener('tick',tick);

	},200);//200-300

}

//上画像を戻す完了
function finshtween2 () {

	topImage.visible=false;

	//少し遅延させる
	setTimeout(function() {

		//アニメ
		globalflag=true;
		//Ticker OFF
		createjs.Ticker.removeEventListener('tick',tick);

	},200);//200-300

}

//ThumbClick
function handleclick (event) {

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

	//ドラッグmoveしたときはアニメしない
	if (dragflag) {return}

	var instance=event.target.parent;
	var hit_no=instance.getChildIndex(instance);
	//Point/thumbboxcontainerコンテナ基準Global
	var point=thumbboxcontainer.localToGlobal(instance.x,instance.y);

	//Global-Point
	gpoint_x=point.x;
	gpoint_y=point.y;

	//角度取得
	gangle=instance.rotation;

	//id
	gid_no=instance.id;
	//重ね順を一番上にする/Dragで実行
	//thumbboxcontainer.setChildIndex(instance,image_max-1);

	//画像番号を押されたIDに修正
	image_no=gid_no;

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

	//重ね変わるので少し遅延させる
	setTimeout(function() {

		//lightbox draw処理
		if (lightbox) {setLightbox(image_no);}
		//通常draw処理
		if (!lightbox) {draw();}

	},500);//500-1000

}

//上画像を戻す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);
}

//ドラッグListener
function press(event) {

	var instance=event.target.parent;
	//ドラッグ開始
	dragflag=false;//move判定
	mousePoint=instance.globalToLocal(event.stageX,event.stageY);
	//直接eventでは無くinstanceに
	instance.addEventListener("pressup",stopdrag);
	instance.addEventListener("pressmove",drag);
	//重ね順を一番上にする
	thumbboxcontainer.setChildIndex(instance,image_max-1);

}
function stopdrag(event) {

	var instance=event.target.parent;
	instance.removeEventListener("pressup",stopdrag);
	instance.removeEventListener("pressmove",drag);

}
function drag(event) {

	dragflag=true;//動いた時のみtrue
	var instance=event.target.parent;
	var offset=instance.localToGlobal(mousePoint.x,mousePoint.y);
	instance.x +=event.stageX-offset.x;
	instance.y +=event.stageY-offset.y;
	stage.update();

}

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

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

	});
}
//
function lightboxchg(lbfg) {

	if(lbfg) {
		set_text('LightBox ON');
		//Litebox-On、作成されていないなら作る
		if (!liteboxOn) {createLightbox();}
		//topImageが表示されているならけす
		if (topImage.visible) {
			resize_image();
		};
	} else {
		set_text('LightBox OFF');
	}
	stage.update();
}

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

	//Litebox-On、作られていれば
	if (liteboxOn) {

		//browserサイズ取得
		set_browserSize();
		//clientサイズ取得
		set_clientSize();
		//キャンバス補正但し同じ大きさだbrowserW browserH
		//フルスクリーンの場合に必要
		popup_element.setAttribute('width',browserW);
		popup_element.setAttribute('height',browserH);
		//lightboxコンテナ位置補正
		lightboxcontainer.x=clientW/2;
		lightboxcontainer.y=clientH/2;
		stage2.update();//重要

	}
}

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

	//overlayレーヤー新規作成
	var layelement=document.createElement('div');
	layelement.id='lightbox-overlay'; 
	//div append Body
	document.body.appendChild(layelement);
	popup_overlay=document.getElementById('lightbox-overlay');

	//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で設定すること
	//CSSは相対的で正確には成らない browserW browserH
	popup_element.setAttribute('width',browserW);
	popup_element.setAttribute('height',browserH);

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

//VIEWTEXT
function set_text(t) {

	viewtext.text=t;
}

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

	return box;
}

//create-Circleボタン
function createCirclebtn (x,y,r,bkcolor,scale,no){

	//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(bkcolor).drawCircle(x,y,r);
	btn.addChild(s);
	btn.shadow=shadow;
	btn.addEventListener('click',function () {
		//controlActiveボタン移動
		activeBtn.x=btn.x;
		scalechg(scale);
	});
	//mouseOver mouseOut
	btn.addEventListener('mouseover',function (e) {
		var scale_v=scale*100;
		var text='画像拡大率 '+ scale_v +' %';
		messPanel_view(text)
	});
	btn.addEventListener('mouseout',function (e) {
		messPanel_reset();
	});
	return btn;
}
//create-Circleボタン2
function createCirclebtn2 (x,y,r,bkcolor,bkcolor2){

	var lbflag=lightbox;
	var color=bkcolor2;
	if(lightbox) {color=bkcolor;}

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name='lbbtn';//name挿入
	var s=new createjs.Shape();
	//共通
	s.graphics.s().beginFill(color).drawCircle(x,y,r);
	btn.addChild(s);
	btn.shadow=shadow;
	btn.addEventListener('click',function () {
		if(lightbox) {
			s.graphics.clear();
			s.graphics.s().beginFill(bkcolor2).drawCircle(x,y,r);
			lbflag=false;

		} else {
			s.graphics.clear();
			s.graphics.s().beginFill(bkcolor).drawCircle(x,y,r);
			lbflag=true;

		}
		lightbox=lbflag;
		stage.update();
		lightboxchg(lbflag);

	});
	//mouseOver mouseOut
	btn.addEventListener('mouseover',function (e) {
		var text='画像拡大用の\nLightBoxを設定します';
		if (lightbox) {
			text='LightBoxを解除します\n通常の画像表示を設定';
		}
		messPanel_view(text)
	});
	btn.addEventListener('mouseout',function (e) {
		messPanel_reset();
	});
	return btn;
}

//注意、Activebtn Circle
function createActivebtn (x,y,r,activec) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";
	var s=new createjs.Shape();
	//共通
	s.graphics.s().beginFill().drawCircle(x,y,r)
	.beginFill(activec).drawCircle(x,y,r/2);
	btn.addChild(s);
	return btn;
}

//スケール変更
function scalechg(scale) {

	main_scale=scale;
	//拡大表示する画像のスケール計算と補正
	view_scaleX=viewW/imageW*main_scale;
	view_scaleY=viewH/imageH*main_scale;
	//TEXT
	var t='SCALE: '+ main_scale*100 + '%';
	set_text(t);
	stage.update();
}

//MessPanel表示
function messPanel_view(text) {

	messtext.text=text;
	messPanel.visible=true;
	stage.update();
}
//MessPanel非表示
function messPanel_reset() {

	messtext.text='';
	messPanel.visible=false;
	stage.update();
}

//createMessPanel
function createMessPanel(x,y,w,h,r,bkcolor,textcolor) {

	//メッセージBOX
	box=new createjs.Container();
	//back
	var back=new createjs.Shape();
	back.graphics.s(0).beginFill('#FFFFFF');
	operaRoundRect(back,x,y,w,h,r);
	back.shadow=shadow;
	//messtextはグローバル
	messtext=new createjs.Text('MESS','12px _ゴシック',textcolor);
	messtext.x=5;
	messtext.y=3;
	messtext.maxWidth=w-10;
	messtext.lineHeight=12;
	messtext.textAlign='left';
	messtext.mask=back;
	box.regX=w/2;
	box.regY=h/2;
	box.addChild(back,messtext);
	return box;
}

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

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


/*日本語 createJS017.css*/

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

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
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-radius:10px;
}

canvas {
border-style:none;
background-color:transparent;
}

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

#lightbox-overlay {
z-index:7700;
visibility:hidden;
position:fixed;
top:0;left:0;
width:100%;
height:100%;
}
#popCanvas {
z-index:7777;
position:fixed;
top:0;left:0;
}

#crl-text {
display:block;
width:640px;
height:20px;
margin:0 auto;
padding:0;
}

当方のサンプルの例です。背景画像使用の場合は用意ください。


簡単な説明


簡単な説明など


[説明図]

 

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

 

表示エリア、サムネールの大きさの同じ、「画像ビューア、サムネールDrag対応」に LightBox を組み合わせたテストサンプルです。


LightBoxの作りはまだテストです

LightBoxの作りはまだテストですから、今後どのような形になるか等全て不明です。ただ「LightBox」らしきものが出来上がった。事実があるだけです。


1. 表示エリアと画像サイズの大きさの同じタイプのものに、LightBoxを加えたテストサンプルです。
2. LightBoxは暫定的(偶然)に作ったもので、今後どのような形式に成るかは未定(不明)です。
3. LightBoxのオーバーレイは通常の「DIV」構成です。Canvasで作る事は可能ですが効率、動作が悪い。
4. LightBoxのアニメする部分はCanvasで出来ています。HTML画面に大きなCanvasを重ねると、HTML画面が反応しなくなりますので、LightBoxを使用しない時はCanvasを非表示にします。
5.ブラウザサイズを変更した場合は、画像位置を調整していますが、画像サイズ変更は行っていません。
6. jQueryなどと組み合わせて作ったほうが、効率が良いような気がします。(問題が出なければ良いが?)
7. Android系でCanvasをリサイズした場合にクラッシュする情報があります


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


LightBoxのCanvasはブラウザの大きさに作った。フルスクリーンでも表示できる。browserW、browserHはブラウザの横縦、Canvasの大きさをCSSで制御すると問題有りで、setAttribute()にしている。


popup_element.setAttribute('width',browserW);
popup_element.setAttribute('height',browserH);

LightBoxのオーバーレイは通常のHTMLの作りである。但しその時折に削除しないでセットしているので。使用しない時は大きさを0にして非表示にし軽くなるようにする。(透明度のあるオーバーレイは非表示でも影響がでる)


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

LightBoxのCanvasも使用しない時は非表示にしている。


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

現在、LightBoxの構造は常駐していますが、本来は使用する時のみ構造を作り、使用しない時は削除すべきでしょう。


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


【参考】buccchi.jp: Android×Canvasの即死ポイントとその回避策

【参考】水玉製作所: CreateJSを使用した際に一部のAndroid4端末でおこる不具合に関して




サンプル画像 640x20


 

一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。
また、CreateJSの「仕様」もクルクル変わっていますので、バージョン違い等に充分注意下さい


下記ページのものを基本に LightBox を加えました。参照下さい。

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]