POPSブログ

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

221

  Category:  javascript2013/05/18 pops 

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

 

CreateJS 画像ビューア、サムネールDrag対応のテスト (createJS016.js)


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


jQuery、AS3、でも作られて居ますので、真新しいものでは有りませんが、CreateJSでキャンバスを利用して作ってみました。ドラッグ移動しても料金は掛かりませんので安心して戴けます。「ドラッグ」して1日中遊んで下さい。


DEMO


CreateJS 画像ビューア、サムネールDrag対応、簡易形。

このページは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="300"></canvas>
	</div>
</div>

JS

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


//日本語
//createJS016.js
//簡易サムネールデモ用
//easeljs-0.7用

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

var speed=1000;//拡大移動、アニメ速度
//ベースcanvasサイズ
var canvasWidth=640;
var canvasHeight=300;

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

//Imageオブジェクト先読み
var backgroundimage=new Image();
backgroundimage.src="/main/images/welcome_black_w.png";

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

//ロード画像の大きさ/canvasと同じ
var imageW=canvasWidth;
var imageH=canvasHeight;
//拡大表示する画像の大きさ/canvasと同じ
var viewW=canvasWidth;
var viewH=canvasHeight;

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

//ステージ
var stage;
//Loader
var loader;
//コンテナ
var container;
var backcontainer;//未使用
var loadingcontainer;
var progresscontainer;
var thumbboxcontainer;
//画像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;

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

//拡大表示する画像のスケール計算
var view_scaleX=viewW/imageW;
var view_scaleY=viewH/imageH;

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

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

//ステージ周りセット
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(backgroundimage);
	//welcomeImage=new createjs.Bitmap('/main/images/welcome_black_w.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 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 cw=Math.floor(canvasWidth*3/4);
	var ch=Math.floor(canvasHeight*3/4);

	//全ボタン幅
	var btnW_all=0;
	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=Math.floor((canvasWidth-thumbW)/(image_max-1))*i+thumbW/2;
		myThumb[i].y=(canvasHeight/2)+(Math.floor(Math.random()*canvasHeight/2)-canvasHeight/4);
		//傾ける
		angles[i]=Math.floor(Math.random()*120)-60;
		myThumb[i].rotation=angles[i];
		//判別用のproperty:idを書き込む
		myThumb[i].id=i;

		myThumb[i].cursor="move";

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

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

		//myThumb addChild
		thumbboxcontainer.addChild(myThumb[i]);

	}

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

	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;

			//簡易TEXTクリア
			set_text("");
			//viewtext.visible=false;
			stage.update();
			//クリック有効
			globalflag=true;

		},1000);
	}
}

//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;
	//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;
	//画像番号を押された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;
}

//簡単な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

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


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

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


簡単な説明


簡単な説明など


[説明図]


 

注意、このサンプルでは、キャンバスサイズと画像サイズは同じです。画像サイズは同一である事。

 

尚、当方の「家庭の事情」により「タッチ端末」には対応していませんのでご了承下さい(超貧乏のため対応未定、1000年後位にはなんとかしたいナ 2014/06/01)。
よって、問題のある場合は、自己解決してください。

タッチ端末でドラッグ&ドロップなどに関することは下記記事など参照ください。お手数でもよろしく!

【参照】qiita.com/tsunet111さんの記事: CreateJS IE10/11 タッチ端末でドラッグ&ドロップ(スワイプ)


 

ドラッグListenerの設定

ドラッグの設定は easeljs-0.7 付属の Example を参考に記述しました。同じインスタンスに「click」イベントをも付けているので判別の工夫をした。ドラッグ時、重ね順を一番上にする様にしている。


ドラッグ時イベント名、pressup pressmove に変更になっています。
イベントの発生する所を認識して、ドラッグで動かす対象を正確に指定しなければ移動しません。構造の違いでも記述が異なりますので、注意が必要です。
「デモ」では画像、背景を収容している、コンテナにドラッグアクション addEventListener("mousedown",press) を設定。


1.コンテナにaddEventListener("mousedown",press)を設定。
2.ドラッグすると、中の画像(及び背景)にイベントが発生します。
3.ドラッグで動かす対象は、親である event.target.parent に成ることに注意下さい。
4. pressup pressmoveドラッグ時専用のイベントのようです。
5. 余り頻繁に変わってほしくないのが本音。修正が大変だ(ドラッグ関連は特に大変のようです)。


又、ドラッグと別に「クリック」も設定していますが、mousedown して終了後 mouseup で「クリック」の動作に進むため、識別変数 dragflag で補正しています。(「クリック」ではない)



var dragflag=false;

//ドラッグ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();

}

ドラッグ関連の設定方法など変更になった理由などは、下記記事に有ります。

【参考】f-siteの記事: EaselJSの次期バージョンにおけるイベントのバブリングとマウスイベント


サムネールClick時の対策

同じインスタンス(サムネール)に「drag」設定の他「click」イベントをも付けている。ドラッグ時に mouseup すれば click と同じで有り、「click」のアクションを実行してしまうので修正しなければならない。
「ダブルクリック」イベントでも良いが、画像縮小の場合「シングルクリック」であるので操作統一のために、識別の変数 dragflag で区別して「シングルクリック」で反応出来る用にした。(上記、ドラッグListener の dragflag 部分参照)


ドラッグした時はクリックアクションを実行させない様に工夫する。


//ThumbClick
function handleclick (event) {

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

	//イベントは画像または背景
	var instance=event.target.parent;
	//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;
	//画像番号を押されたIDに修正
	image_no=gid_no;

	略す

}

画像番号の修正

画像番号とサムネールのインデックス番号(重ね順)は初期時は同じである。ドラッグ時「重ね順を一番上にする」のでその関係が変わる。そのため修正を行っています。
サムネールのインスタンスに画像番号と同じ、「id」を入れて識別する。「name」でも良い。


事前登録の id を取得する。画像番号と同じになるので代入する。


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

重ね順を一番上にする

重ね順を一番上にするは、setChildIndex()を使用すれば簡単に変更できる。「thumbboxcontainer」コンテナの中にサムネールがあるので、対象サムネールが「クリック」(ドラッグ)された場合に変更するとすれば、


親インスタンス.setChildIndex(対象の子インスタンス,子の総数-1);

function press(event) {
	略す
	thumbboxcontainer.setChildIndex(instance,image_max-1);
	略す
}

DEMOでは、ドラッグ時に重ね順を変更しています。


画像の拡大縮小

「拡大縮小」する画像はサムネールのBitmap()では無く、上画像層のBitmap()です。サムネールの位置から「拡大縮小」させています。上画像層の中心はキャンバス(stage)の中央です。


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


ドラッグ用のカーソル

サムネールにドラッグ用の move カーソルを設定しても表示しません。ここでは不要ですが、enableMouseOver() を加えると、move カーソルを表示します。フシギ!


stage.enableMouseOver(20);

DEMOでは enableMouseOver() は設定していません。設定しても問題などは起きては居ません。


サムネールのランダム配置

一番、気を使うのが「サムネールの配置」である。偏れば「ミットモナイ」だけである。サムネール数が多ければ何とか散らばるが、少ないと見た目が悪い。
次ぎの様にしてもランダム配置は出来るが完全では無い。均等に散らばる方法を誰か考えて下さい。


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

	for (...) {

		//ランダム配置
		myThumb[i].x=Math.floor((Math.random()*cw)+canvasWidth*0.12);
		myThumb[i].y=Math.floor((Math.random()*ch)+canvasHeight*0.12);

	}

スクリプトの標準化

他のスクリプトも構造など全て殆んど同じです。少し目的に応じてアレンジしているだけです。同じようなもの使い回ししています。


角丸処理の変更(追記)

現在、Opera は Chromeエンジンに移行したために、角丸処理の不具合はなくなりましたので、CreateJS標準の drawRoundRect が使用できます。変更の例を下記に示します。2014/06/01 追記しました。


以前の処理(使用の例)


//back
var thumbback=new createjs.Shape();
thumbback.graphics.s(0).beginFill("#FFFFFF");
operaRoundRect(thumbback,x,y,w+m*2,h+m*2,4);

新しい処理(CreateJS標準)


//back
var thumbback=new createjs.Shape();
thumbback.graphics.s(0).beginFill("#FFFFFF").drawRoundRect(x,y,w+m*2,h+m*2,4);

------------------------------------------------------------------------------
ライン設定はなくとも良い
//back
var thumbback=new createjs.Shape();
thumbback.graphics.beginFill("#FFFFFF").drawRoundRect(x,y,w+m*2,h+m*2,4);

修正が面倒な場合はそのままでも角丸は描画されます。


 

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


次回は、同じ形式ですが、拡大画像サイズなど変更出来るタイプです。
以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]