POPSブログ

CreateJS 画像拡大ビューア、サムネールDrag対応 キャンバスサイズ自由形

222

  Category:  javascript2013/05/20 pops 

CreateJSを利用して、キャンバスにサムネールをランダム配置表示します。サムネールを「クリック」すれば画像が拡大します。比較的画像数が多い場合に有効かも知れません。サムネールはDrag対応ですから移動出来ます。キャンバスサイズ自由形です。
easeljs-0.7 でのテストです。

 

CreateJS 画像ビューア、サムネールDrag対応 キャンバス自由サイズのテスト


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


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


DEMO


CreateJS 画像ビューア、サムネールDrag対応、キャンバスサイズ自由形。(createJS016b.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。


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>

JS

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


//日本語
//createJS016b.js
//サムネールデモ用
//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=400;

//ロード画像の大きさ/canvasと同じ
var imageW=465;
var imageH=350;

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

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

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

//画像manifestリスト2
var manifest=[
{src:"/main/images/cat13m.jpg",id:"PHOTO"},
{src:"/main/images/cat14m.jpg",id:"PHOTO"},
{src:"/main/images/cat17m.jpg",id:"PHOTO"},
{src:"/main/images/cat18m.jpg",id:"PHOTO"},
{src:"/main/images/cat19m.jpg",id:"PHOTO"},
{src:"/main/images/cat20m.jpg",id:"PHOTO"}
];

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

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

//ステージ
var stage;
//Loader
var loader;
//コンテナ
var container;
var backcontainer;//未使用
var loadingcontainer;
var progresscontainer;
var thumbboxcontainer;
var sclbtncontainer;
//画像result
var mainImage,backImage,topImage,welcomeImage;
//Loading
var loadingShape;
//TEXT
var viewtext;

//ドラッグ操作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 activeBtn;//未使用


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

	//STAGE
	//createjsステージを設定
	stage=new createjs.Stage('mainCanvas');
	//MouseOver
	stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	var backrect=new createjs.Shape();
	//ベタ背景
	//backrect.graphics.beginFill("#FFFFFF").drawRect(0,0,canvasWidth,canvasHeight);
	//グラデーション背景
	backrect.graphics.s(0).beginLinearGradientFill(["#FFFFFF","#CCCCCC"],[0,1],0,0,0,canvasHeight).drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);

	//welcome画像層画像表示
	//welcomeImage=new createjs.Bitmap(/main/images/welcome_back3.png);
	//stage.addChild(welcomeImage);

	//背景画像BitmapFillを並べる
	var backrect2=new createjs.Shape();
	backrect2.graphics.s(0).beginBitmapFill(backimg,'repeat').drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect2);
	//画像を先に表示
	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 Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);
	set_text("Loading Now!");

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

	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;
	//簡易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
	var bkcolors=["#FF0000","#FFFFFf","#0000FF"];
	var scales=[1.2,1,.8];//120% 100% 80%
	//create-Circleボタン
	for (var i=0; i < 3; i++) {
		var sclbtn=createCirclebtn (0,0,5,bkcolors[i],scales[i],i);
		sclbtn.x=i*15;
		sclbtncontainer.addChild(sclbtn);
	}

	//プロローグなし
	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;
		var delay=(i+1)*500;

		var tw=createjs.Tween.get(myThumb[i])
		.wait(delay)
		.to({x:posxs[i],y:posys[i],rotation:angles[i]},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;
	//重ね順を一番上にする
	thumbboxcontainer.setChildIndex(instance,image_max-1);

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

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

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

}

//tickステージ
function tick() {
	stage.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 () {
		scalechg(scale);
	});
	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();
}

//簡単な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
//画像読み込み
var backimg=new Image();
backimg.onload=function () {
	init();
}
backimg.src="/main/images/h4gr02.gif";//93x78

注釈文を削除すれば、幾分早くなります。


CSS

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


/*日本語 createJS016b.css*/

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

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

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


簡単な説明


簡単な説明など


[説明図]

 

注意、このサンプルでは、キャンバスサイズ(表示エリア)と画像サイズは違います。

 

表示エリア、サムネールの大きさ、拡大画像の大きさ、を自由に出来るのが特徴です。但し、表示エリア、サムネールを大きくすると結構重くなります。その外は前ページのサンプルとほぼ同じですので、そちら参照下さい。


背景層の設定

背景層の設定は、自由ですが表示エリアの大きさによって違ってきます。勿論、サムネールの見栄えを良くするにも重要になります。


1.表示エリアと同じ大きさのBitmap画像を用意して表示する。
2.小さな背景画像をグラフィックで、BitmapFill()でリピートして並べる。
3.グラフィックでベタ塗り、またはグラデーション塗りで背景を作る。最も簡単な方法である。


Loaderを利用しないで画像を表示するには、Bitmap()は問題は起きませんが、BitmapFill()の場合は注意下さい。また画像取得に失敗した場合は、重大なエラーになる場合があります。


● 最下位色背景層の利用

背景画像を使用しない場合は最下位層のグラフィックを利用するのも方法です。


 

● グラフィックで背景を作る

一番簡単であるが単調になり易い。画像が不要だから手軽です。



//バックRect/最下位色背景層
var backrect=new createjs.Shape();
//ベタ背景
backrect.graphics.beginFill("#FFFFFF").drawRect(0,0,canvasWidth,canvasHeight);
//グラデーション背景
//backrect.graphics.s(0).beginLinearGradientFill(["#FFFFFF","#CCCCCC"],[0,1],0,0,0,canvasHeight).drawRect(0,0,canvasWidth,canvasHeight);
stage.addChild(backrect);

● Bitmap()画像表示

画像取得に失敗しても表示しないだけなので安心できる。原則キャンパスサイズと同じ大きさ。画像先読みして置くと表示が速い。大きな画像を必要とするが一番よい方法だ。



//welcome画像層画像表示
welcomeImage=new createjs.Bitmap('画像URL');
stage.addChild(welcomeImage);

● BitmapFill()利用背景画像

「エラー」回避をする事が重要です、一般的には下の様に画像を読み込んでからコンテンツを作ります。但し、画像読み込みに失敗すれば何も出来ません。



//画像読み込み
var backimg=new Image();
backimg.onload=function () {
	init();
}
backimg.src="/main/images/h4gr02.gif";//93x78

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

//背景画像BitmapFillを並べる
var backrect2=new createjs.Shape();
backrect2.graphics.s(0).beginBitmapFill(backimg,'repeat').drawRect(0,0,canvasWidth,canvasHeight);
stage.addChild(backrect2);

● CSS背景画像

CreateJS以外の処理ですから言及は避けて来ましたが、普通にDIV要素なりに、CSSで挿入するのも方法かも知れません。


画像の拡大率の変更

画像の拡大率を3種設定可能です。自由に選んで表示可能です。初期値は、120% 100% 80% です。右下のボタンで選定します。(初期設定で、変更可能です)
画像の拡大は画像が荒くなりますので拡大率に注意ください。尚、表示品質はブラウザにより多少バラ付きが有ります。GIF画像は拡大縮小に向いていません(無理にアンチェリアス処理を行うので負荷が大きい)。


画像の拡大縮小

「拡大縮小」する画像はサムネールのBitmap()では無く、上画像層のBitmap()です。サムネールの位置から「拡大縮小」させています。上画像層の中心はキャンバス(stage)の中央です。拡大し過ぎれば表示出来ない部分が出て来ます。拡大時に余白のサムネールを押す(クリック)事も可能です。


最大の欠点は大きな画像を表示出来ない事です。そのために「LightBox」と組み合わせる方法も有ります。ブラウザ画面サイズにキャンバスを作り最大に拡大する手法も在るかとは思いますが、、、「次回に試してみます」。


プロローグ

プロローグと言っても簡単なもので、サムネールを一旦外側に置きパネル内部に登場させるだけです。prologueの設定で制御出来ます。使用しなければ画像ロード後パッと表示する。


サムネールの配置

サムネールをランダム且つ均等に配置するのは難しい。多少は偏ってしまう。一応2種類( ランダム 中央付近番号順 )の配置方法をセットしました。


サンプル背景画像 93x78


同じような形式です。違う点はキャンバスサイズと表示画像サイズが同じです。

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


 

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


次回は、CreateJSで「LightBox」を作り画像拡大出来るタイプです。
以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]