POPSブログ

CreateJS RoundRectマウスオーバーボタンのactive時の変化を考える

217

  Category:  javascript2013/05/06 pops 

CreateJS 角丸RoundRectマウスオーバーボタンの変化への対応ですが、active時の方法について考えてみました。グラフィックを変化させれば良いのですが簡単に出来る方法は無いか?、Bitmap画像サムネール表示処理、BitmapFill()で画像スケール変更についても調べてみた。easeljs-0.7 でのテストです。

 

CreateJS RoundRectマウスオーバーボタンのactive時の変化


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


マウスオーバー、マウスアウトの変化は、ベタ塗り、グラデーション、画像を埋め込みの3種類については前に書きました。一応active時の方法としてラベル色を変化させました。やはりボタン背景等も変化させたいものです。簡単な方法として別途にグラフィックを作りボタンの上に重ねて変化させるものです。

関連する事項が有りますので、説明が長くなります。


[ 目次 ]


[ 説明図 ]

 

RoundRectマウスオーバーボタンのactive時の変化を簡単に行う方法

▲[ 目次 ]

RoundRectマウスオーバーボタンのactive時の変化を簡単に行う方法。


1. 1個の「active専用のボタン」を作り、「activeなボタン要素」に重ねて行く方法です。
(イワユル、ゴマカシ、マヤカシです)
2. ボタンと同じ大きさのグラフィックを変えたShapeボタンを作り、既存ボタンの上に重ね移動して使用します。原点が同じですので簡単に重なります。(ラベルの変更なしならShapeだけでも良いでしょう)
3. 1個の「active専用のボタン」を、通常ボタンの最後に addChild します。重ね順は1番上になります。
4. 少し色、文字の「shadowフィルター」も違いを出しました。ラベル文字はその都度書き換えています。
5. 考えれば他の方法もあると思います。
6. マウスオーバーでサムネールを表示しますが、位置は localToGlobal() で算出すると簡単です。
7. easeljs-0.7バージョンUPに伴い「クリックアクション」の「イベント処理」が変更になりましたので訂正します。
8. 正月には「activeボタン」3段重ねで祝いましょう。(ミカンとエビも忘れずに!)


 

DEMO等

▲[ 目次 ]

DEMO


上記、マウスオーバーボタンのactive時の変化、簡単なデモ。Carousel Slider

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


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




マウスオーバーボタンのactive時の変化を簡単に行う

▲[ 目次 ]

1個のactive時のボタンを作り、activeなボタンに重ねて行く方法が一番効果があり、簡単な方法のようです。多少「activeボタン」に変化を付けるのも随意です。DEMOではラベルも替えています。

以下説明などは、DEMOのJS記載のものがほとんどです。DEMOのJSは「デモページ」にあります。


 

ボタンは、ステージ2に事前に作ってあるとします。(前ページまでの例とほぼ共通)
画像読み込みに成功した分の個数を作るために complete 記載しています。


var btncontainer;
var clickbtn_use="use";
var image_max;
var image_no=0;
var myBtn=[];
var activeBtn;

function init() {

	略す

	//ステージ2ボタンコンテナ、ボタンはあとで作る
	btncontainer=new createjs.Container();
	btncontainer.x=0;
	btncontainer.y=10;
	//ボタンコンテナをステージ2にaddChild
	stage2.addChild(btncontainer);
}

function complete (event) {

	//画像数
	image_max=assets.length;

	略す

	//Activeボタンを作る
	activeBtn=createActivebtn (.............);

	//Create-Bottunボタンを作る
	if (clickbtn_use == 'use') {

		for (var i=0; i < image_max; i++) {
			略す
			myBtn[i]=createGradientbtn (0,0,btnWidth,btnHeight,5,"#FFFFFF",label,"#FFFFFF","#FFFFFF","#DB7093","#FFFFFF","#AAAAAA",no);
			//myBtn addChild
			btncontainer.addChild(myBtn[i]);

		}

		略す

		//activeBtnを乗っける
		btncontainer.addChild(activeBtn);
	}
}

ボタンの「クリックアクション」の変更 [easeljs-0.7より]

▲[ 目次 ]

easeljs-0.7バージョンUPに伴い「クリックアクション」の「イベント処理」が変更になりましたので訂正します。 「親」を目指す書き方になります。他にも有りますがここでは省略します。


//BtnClick
function handleclick (event) {

	//アニメ中は機能しない
	if (!globalflag) {return;}
	//v0.7
	var instance=event.target.parent;
	var hit_no=instance.parent.getChildIndex(instance);

	//idで判定v0.7未使用
	//var hit_no=event.target.parent.id;

	略す

}

ラベル文字色を変える (従来の方法、参考)

▲[ 目次 ]

前ページの例の様に従来の方法で、「activeボタン」を作らずに「ラベル文字色」を変えるだけの簡単な方法です。activeで無いものは元のラベルの色に戻し、activeなものは色を変える方法です。ボタンを全部調べなければ成らないのが欠点です。

中のラベルにアクセスする方法は下記の様にgetChildAt()、getChildByName()、の2通りあります。

現在の表示画像番号を image_no とした場合、下記の様にボタンのラベル色を変えています。(ボタンには事前に name 'btntext' を登録しています)

getChildAt() でアクセスの場合、標準ではラベル位置は getChildAt(1) ですが、ボタン背景など増やしている時は、ラベルの重ね位置を指定します。


function draw() {

	略す

	//activeボタン色変更
	if (clickbtn_use == 'use') {
		for (var i=0; i < image_max; i++) {
			//var target=myBtn[i].getChildAt(1);
			var target=myBtn[i].getChildByName("btntext");
			target.color=(i == image_no) ? "#FF0000":"#FFFFFF";
		}
	}

	略す
}

● Activeボタンを作る

▲[ 目次 ]

Activeボタンを作る。自動的に1番目の上に重なります。ラベル文字の「shadowフィルター」を変えています。

ボタンの陰影はなし。マウスアクション addEventListener() は付けていませんが必要な場合はつけます。

DEMO、JS参照。


//shadowフィルター
var shadow2=new createjs.Shadow("#FFFFFF",1,1,2);


//Activeボタンを作る
activeBtn=createActivebtn (0,0,btnWidth,btnHeight,5,"#FF0000","PHOTO1","#000000","#FFFFFF","#FF0000");

//Create-Bottunボタンを作る
for (var i=0; i < image_max; i++) {
	通常のボタンを複数作る、略す
}

//activeBtnを乗っける
btncontainer.addChild(activeBtn);

● Activeボタンのラベル文字変更と、位置の移動

▲[ 目次 ]

変更の設定をする(手書きで設定変更)

変更の設定をする場所は、スクリプトの構成で違うと思いますが、DEMOでは画像を表示する draw() で行います。


activeボタン作成時ラベルに、name 'btntext' を書き込み(name登録文字名は自由です)、それでアクセスしてラベル文字を変更。上の「ラベル文字色を変える」の様に getChildAt()、でも可能です。

デモでのラベルは簡単にしていますが、ラベル名の配列を利用しても良い、設計は個人の自由です。


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

	略す

	//activeBtn-label
	var label="PHOTO"+(image_no+1);
	//activeボタン色変更
	if (clickbtn_use == 'use') {
		activeBtn.x=myBtn[image_no].x;
		activeBtn.getChildByName("btntext").text=label;
		stage2.update();
	}

	略す

}

btncontainer に tick 設定で変える場合 (参考)

btncontainerにtick設定で変える場合は次ぎの様にしても良い。グローバルに判定用フラグを用意して、1回のみtick設定を実行させるようにする。(activeBtnに設定も可能である)

現在こちらは使用していません。但し動作確認済み。


//グローバルactiveBtn用tickフラグ
var actflag=false;

function complete (event) {

	略す

	//activeBtnを乗っける
	btncontainer.addChild(activeBtn);

	//activeBtn用tick設定
	btncontainer.tick=function (){
		if(actflag) {
			activeBtn.x=myBtn[image_no].x;
			var label="PHOTO"+(image_no+1);
			activeBtn.getChildByName("btntext").text=label;
			stage2.update();
			actflag=false;
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',btncontainer.tick);

	略す
}

//実行
function draw() {
	actflag=true;

	略す
}

注意、addEventListener('tick',function (){...}) は使用しないで下さい。update()で「エラー」最悪停止します。


//この形式は使用しない
btncontainer.addEventListener('tick',function (){
	//処理
	stage2.update();
});

マウスオーバーボタンの変化とサムネールの表示

▲[ 目次 ]

ボタンが在って、画像を表示する場合はボタンに対応する、サムネール画像を表示すれば親切です。サムネールの位置を固定すると簡単ですが、ここではボタン位置に応じてサムネールの位置を変える方法をとります。

1. マウスオーバーボタンの位置算出でサムネールのX位置を計算します。
(localToGlobal()など使用すると作業が早い)
2. サムネールをフェードさせて表示します。
3. サムネールはRoundRectボックスに収容して表示、吹き出し形式のRoundRectボックスも使用可能。
4. ボタンは現在stage2、に配置されていますが、stageに移動することも可能です。 5. サムネール画像をボタンにする方法も有りますが、それは別の機会にします。


 

サムネール画像の表示

▲[ 目次 ]

マウスオーバーボタンにマウスが乗っかれば、サムネール画像がフェードインする様にします。クリックすればその画像を表示します。サムネール画像はBitmap()の方がフェード反応が良いようだ。


※ マウスオーバーボタンの位置算出

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


ボタンの位置をbtncontainerを基準として、localToGlobal()で算出してボタンの中央へX値を修正します。
DEMOでは、各ボタンのrolloverアクションに位置算出を書いています。

DEMOでのボタン「原点は左上」ですが、ボタンの原点位置により修正が必要になります。

DEMO、JS参照。


//rolloverアクション
btn.addEventListener("rollover",function (e) {

	略す

	//Point計算、btncontainer基準localToGlobal
	var point=btncontainer.localToGlobal(e.target.x,e.target.y);
	//Point補正
	thumb_x=point.x+btnWidth/2;

	略す

	//サムネールopen
	openThumbBox(no);
});

 

サムネール画像はBitmap()画像で作るのが簡単

▲[ 目次 ]

近年、サムネール一つ表示するにも工夫を凝らす様になって来ました。一応は Canvas ですからここは面倒な方法を取ってみます。Bitmap()画像はCreateJSのBitmapクラスです。

1. RoundRectボックスに画像を収納する。(RoundRect吹き出しタイプも可能)
2. サムネール表示の際、FadeInさせる。(FadeOutは無い、面倒なので省いている)
3. サムネールは読み込んである画像を縮小して使用する。大きさは全て同一とします。
4. BitmapFill()で画像スケール変更はmatrix処理すると、グラフィックに流し込み出来ますが、少々問題があるので機会を改めて説明します。下の説明[BitmapFill()でグラフィックに流し込む]


2つの形態があります。1つはRoundRectボックスタイプ、1つはRoundRect吹き出しタイプです。共にOperaで壊れない様に、quadraticCurveTo形式でグラフイックを描きます。


サムネールの大きさに画像を縮小する

サムネールの大きさは、htmlと違い width height で決定出来ません。元画像のスケールを変えて縮小して使用します。ここが面倒な所ですが、Bitmap()では以外と簡単です。

DEMOでは、元画像の大きさが判っていますので縮小スケールの計算は簡単です。元画像の大きさがそれぞれ違う場合は大変です。ここでは扱いません。


サムネール画像、元の画像(実際に表示する画像)の大きさ、スケールは事前に決めておく。
thumbImage は Bitmap()サムネールインスタンス


//canvasの大きさ
var canvasWidth=640;
var canvasHeight=300;

//読み込み画像の大きさcanvasと同じ
var imageW=canvasWidth;
var imageH=canvasHeight;

//サムネールの大きさ余白
var thumbW=128;
var thumbH=60;
var margin=2;//余白 R

//縮小
thumbImage.scaleX=thumbW/imageW;
thumbImage.scaleY=thumbH/imageH;

元画像の大きさが判っていない場合、CreateJSでは画像をBitmap()に変換しないと判りませんので注意ください。

CreateJSの loader=new createjs.LoadQueue(false) では、直接画像の大きさは判らない。loader の result値を上同様に Bitmap() に変換すれば判る。


xImage=new createjs.Bitmap('画像URL');
var imageWidth=xImage.image.width;
var imageHeight=xImage.image.height;

Javascriptの new Image() クラスで画像の大きさを知る方法を記載しておきます。

大きさは onload してからでなければ判らない。結構面倒です。


var imageWidth;
var imageHeight;
var img=new Image();
img.onload=function() {
	imageWidth=img.width;
	imageHeight=img.height;
}
img.src='画像URL';

Bitmap()画像サムネール表示処理

▲[ 目次 ]


簡単で問題の出ないタイプです。画像の隅が角になるだけですがマスクをすれば角丸も可能です。ここでは大きな画像を縮小(scaleを変える)してBitmap()インスタンスを交換するようにしています。
サムネールインスタンス thumbImage は事前に縮小されていますので、



thumbImage.image=new createjs.Bitmap(assets[no]).image;

Bitmap().image の参照実行で、大きな画像も交換され簡単に縮小し重なり順も変わりません。Bitmap()処理だから仮に画像データに問題が有っても「エラー」にならないから安心だ(表示しないだけ)。重宝!


ボタン、「マウスオーバー」で画像サムネール表示の openThumbBox(no) に飛び、
サムネールtick設定 thumbBox.tick=function (){...}) で、フェードインします。
ボタン、「マウスアウト」で非表示の処理をします。簡単に thumbBox.visible=false で済ましています。



空のをBitmap()をaddChildしておく
thumbImage=new createjs.Bitmap();

事前に縮小しておく
thumbImage.scaleX=thumbW/imageW;
thumbImage.scaleY=thumbH/imageH;

Bitmap()を交換
画像resultは大きな画像ですが、交換すれば小さくなる
thumbImage.image=new createjs.Bitmap(画像result).image;

------------------------------------------------------------
//サムネール動作判定
var thumb=false;

//ThumbBox表示/update自動
function openThumbBox(no) {
	//サムネール画像書き換え/画像result
	thumbImage.image=new createjs.Bitmap(assets[no]).image;
	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;
	//stage.update();
}
//ThumbBox非表示
function closeThumbBox(no) {
	//サムネール画像クリア空画像挿入
	//thumbImage.image=new createjs.Bitmap().image;
	thumbBox.visible=false;
	thumb=false;
	stage.update();
}

サムネールBOXの外形を作り、空のをBitmap()を収納、Fadeする様にTickerを設定します。透明度0ならFadeInします。変数 thumb で制御されています。
Tickerは、ASでは enterFrame 機能の様なものです。下記の様に使用します簡単ですネ。(Fadeだけだから簡単なだけだが!)、下記ではBitmap()をスケール縮小しています。


サムネールBOXの外形なしでグラフィックで描画したい場合は[BitmapFill()でグラフィックに流し込む]を参照下さい。


DEMO、JS参照。




	//FadeサムネールBOX
	thumbBox=new createjs.Container(0,0,thumbW+margin*2,thumbH+margin*2);
	thumbImage=new createjs.Bitmap();
	thumbImage.x=margin;
	thumbImage.y=margin;
	//縮小
	thumbImage.scaleX=thumbW/imageW;
	thumbImage.scaleY=thumbH/imageH;
	//back
	var thumbback=new createjs.Shape();

	//共通
	thumbback.graphics.s().beginFill("#FFFFFF");
	//通常のRoundRectボックス
	operaRoundRect(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);

	//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
	//roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);

	thumbback.shadow=shadow;

	thumbBox.addChild(thumbback,thumbImage);
	thumbBox.regX=(thumbW+margin*2)/2;
	thumbBox.regY=(thumbH+margin*2)/2;
	thumbBox.x=canvasWidth/2;
	thumbBox.y=canvasHeight-thumbH;
	stage.addChild(thumbBox);
	thumbBox.visible=false;
	//フエード用tick設定
	thumbBox.tick=function (){
		if(thumbBox.alpha < 1 && thumb) {
			thumbBox.alpha+=0.05;
			stage.update();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',thumbBox.tick);

サムネールBOXのY位置は、thumbBox.y=canvasHeight-thumbH の所で調整できます。横は中央揃えになります。


RoundRectボックスタイプ

▲[ 目次 ]

さて次ぎは、サムネールBOXの外形、つまり見栄えデザインです。角丸のボックスに収容されています。この辺は如何様にもアレンジ出来ます。始めは、通常のRoundRectBOXです。
グラフィック部分をoperaRoundRect()で処理します。quadraticCurveToを使用していますので、Operaでも角丸は崩れません。簡単な、RoundRectBOXがお勧めです。


通常のRoundRectBOXの背景グラフィック


	//back
	var thumbback=new createjs.Shape();
	thumbback.graphics.s().beginFill("#FFFFFF");
	//通常のRoundRectボックス//(Shape,x,y,幅,高さ,半径)
	operaRoundRect(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);
	thumbback.shadow=shadow;


//サムネールの大きさ余白
var thumbW=128;
var thumbH=60;
var margin=2;//余白 R

	略す

	//FadeサムネールBOX
	thumbBox=new createjs.Container(0,0,thumbW+margin*2,thumbH+margin*2);

	略す
	
	thumbback.graphics.s().beginFill("#FFFFFF");
	operaRoundRect(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);

	略す

	//フエード用tick設定
	thumbBox.tick=function (){
		if(thumbBox.alpha < 1 && thumb) {
			thumbBox.alpha+=0.05;
			stage.update();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',thumbBox.tick);


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

RoundRect吹き出しタイプ

▲[ 目次 ]

近年、サムネール一つ表示するにも工夫を凝らす様になって来ました(面倒この上無い)。一応は Canvas ですからここは「イヤイヤ」面倒な方法を取ってみます。フキダシBOXは外形の一部が違うだけでその外の構造は同じです。
グラフィック部分をroundRectBalloon()で処理します(operaRoundRect改造)。下方に矢印が付いただけです。


operaRoundRectをroundRectBalloonに変更するだけです。


RoundRectフキダシBOX


	//back
	var thumbback=new createjs.Shape();
	thumbback.graphics.s().beginFill("#FFFFFF");
	//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
	roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);
	thumbback.shadow=shadow;


	略す

	//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
	roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);

	略す

//RoundRectフキダシBOX
function roundRectBalloon(s,x,y,w,h,r,tw,th) {
	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(w/2+tw/2,y+h)
	.lineTo(w/2,y+h+th)
	.lineTo(w/2-tw/2,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);
}

アア 面倒だ!


 

サムネール画像を、BitmapFill()でグラフィックに流し込む

▲[ 目次 ]

Shapeに直接、BitmapFill()でグラフィックに流し込みます。サムネールですので縮小しなければ成りません。画像スケール変更はmatrix処理で行いますがここで下図の様に問題が発生します。(Chromeのバグと思いますが)


 

「shadowフィルター」処理すると図の様に、Chromeで陰影が小さくなり見苦しい物になります。グラフィックを描く場合に位置をずらし描画すると正常になります。

1. 画像スケール変更のmatrix処理をして「shadowフィルター」処理した場合のみ位置をずらす。
( x,y とも -2 ずらして処理する)、下のスクリプト createRoundMatrix() 参照。
2. 「shadowフィルター」処理しないなど、他の場合は、位置をずらさないで通常のグラフィック処理をする。
3. つまりは2つのmatrix処理関数が必要になります。大変面倒になります。(引数、x,y を使用していませんので、1つのmatrix処理関数にすることは可能です)
4. 小さなサムネール画像を用意する場合は、matrix処理しませんので、通常のグラフィック処理になります。


サムネール画像はBitmap()処理がお勧めです。サムネール画像はBitmap()画像で作るのが簡単


背景BOXなし、Shape RoundRectタイプ

▲[ 目次 ]

Shapeに直接、beginBitmapFill(画像result値,matrix) で描画します。画像スケール変更はmatrix処理後、グラフィックに流し込みます。
ここではバック背景 thumbback は使用していない。Shape要素 thumbBox だけを使用しています。


beginBitmapFill()で処理できる画像は、loaderで得られた「result値」です。ここでは assets 配列容器に保存しています。画像データ無し、また、url 等いれますと最悪JSが停止しますので「注意」。Bitmap()推奨の理由


サムネールの部分を、次ぎの様に書き換えれば良い。


function init() {

	略す

	//FadeサムネールBOX2 空Shape thumbbackなし
	thumbBox=new createjs.Shape();
	thumbBox.regX=thumbW/2;
	thumbBox.regY=thumbH/2;
	thumbBox.x=canvasWidth/2;
	thumbBox.y=canvasHeight-thumbH;
	thumbBox.shadow=shadow;
	stage.addChild(thumbBox);
	thumbBox.visible=false;
	//フエード用tick設定
	thumbBox.tick=function (){
		if(thumbBox.alpha < 1 && thumb) {
			thumbBox.alpha+=0.05;
			stage.update();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',thumbBox.tick);

	略す

}

//ThumbBox表示/update自動
function openThumbBox(no) {
	//サムネール画像書き換え/画像result取得
	//Matrixでグラフィック流し込み
	thumbBox.graphics.clear();
	thumbBox.graphics=createRoundMatrix(assets[no],0,0,thumbW,thumbH,margin*2,imageW,imageH).graphics;
	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;
	//stage.update();
}


createRoundMatrix()、matrix処理するものにMatrixの文字を入れ区別しました。

createRoundMatrix()関数、operaRoundRect(s,-2,-2,w,h,r) など数字が見える様に意識的に書いています。それぞれは、(s,x-2,y-2,w,h,r)、(s,x,y,w,h,r)、に成ります


//Matrix処理用1 Chrome陰影修正用
function createRoundMatrix(image,x,y,w,h,r,imgw,imgh) {
	//縮小
	var scale_x=w/imgw;//scaleX
	var scale_y=h/imgh;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	//Shape
	var s=new createjs.Shape();
	s.graphics.s(0).beginBitmapFill(image,"no-repeat",mtx);
	if (window["chrome"]) {
		operaRoundRect(s,-2,-2,w,h,r);
	} else {
		operaRoundRect(s,0,0,w,h,r);
	}
	return s;
}
//Matrix処理用2 通常用
function createRoundMatrix2(image,x,y,w,h,r,imgw,imgh) {
	//縮小
	var scale_x=w/imgw;//scaleX
	var scale_y=h/imgh;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	//Shape
	var s=new createjs.Shape();
	s.graphics.s(0).beginBitmapFill(image,"no-repeat",mtx);
	operaRoundRect(s,0,0,w,h,r);
	return s;
}

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

Matrix設定メソッド
mtx.scale(scale_x,scale_y);

こちら使用しても同じ
//mtx.prependTransform(0,0,scale_x,scale_y,0);//x y scaleX scaleY rot

beginBitmapFill()で処理できる画像は、loaderで得られた「result値」です。ここでは assets 配列容器に保存しています。画像データ無し、また、url 等いれますと最悪JSが停止しますので「注意」。Bitmap()推奨の理由


背景BOX付き、Shape RoundRectタイプ

▲[ 目次 ]

外側に背景BOXを配置してその上に、Shapeをのせ、Shapeに直接、beginBitmapFill(画像result値,matrix) で描画します。画像スケール変更はmatrix処理後、グラフィックに流し込みます。
外側に背景BOXに「shadowフィルター」処理しますので、、Chromeで陰影バグは出ません。ただBitmap()と違って、中も角丸に出来ると言うことです。


Bitmap()をShape()に交換して空のbeginFill()を設定します。空のbeginBitmapFill()はエラーになるので入れる事が出来ません。matrix処理は、Chromeで陰影バグが無いので createRoundMatrix2() を使用します。


thumbImage関連削除

新たにShape用インスタンス設定
var thumbShape;

空のbeginFill()を挿入
thumbShape=new createjs.Shape();
thumbShape.graphics.s(0).beginFill();

thumbShapeの設定にする

コンテナにaddChild
thumbBox.addChild(thumbback,thumbShape);

以下の様になる。2種類が組み合わさった形です。ヤヤこしいですね、疲れるゼ!



	//FadeサムネールBOX
	thumbBox=new createjs.Container(0,0,thumbW+margin*2,thumbH+margin*2);
	thumbShape=new createjs.Shape();
	thumbShape.graphics.s(0).beginFill();
	thumbShape.x=margin;
	thumbShape.y=margin;
	//back
	var thumbback=new createjs.Shape();
	//共通
	thumbback.graphics.s().beginFill("#FFFFFF");
	operaRoundRect(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);

	//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
	//roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);
	thumbback.shadow=shadow;

	thumbBox.addChild(thumbback,thumbShape);

	thumbBox.regX=(thumbW+margin*2)/2;
	thumbBox.regY=(thumbH+margin*2)/2;
	thumbBox.x=canvasWidth/2;//X位置
	thumbBox.y=canvasHeight-thumbH;//Y位置
	stage.addChild(thumbBox);
	thumbBox.visible=false;

	//フエード用tick設定
	thumbBox.tick=function (){
		if(thumbBox.alpha < 1 && thumb) {
			thumbBox.alpha+=0.05;
			stage.update();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',thumbBox.tick);


//ThumbBox表示/update自動
function openThumbBox(no) {
	//サムネール画像書き換え/画像result
	//thumbImage.image=new createjs.Bitmap(assets[no]).image;
	//MatrixでthumbShapeグラフィック流し込み
	thumbShape.graphics.clear();
	thumbShape.graphics=createRoundMatrix2(assets[no],0,0,thumbW,thumbH,margin*2,imageW,imageH).graphics;

	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;
	//stage.update();
}
//ThumbBox非表示
function closeThumbBox(no) {
	//サムネール画像クリア空画像挿入
	//thumbImage.image=new createjs.Bitmap().image;
	thumbBox.visible=false;
	thumb=false;
	stage.update();
}

//Matrix処理用2 未使用
function createRoundMatrix2(image,x,y,w,h,r,imgw,imgh) {
	//縮小
	var scale_x=w/imgw;//scaleX
	var scale_y=h/imgh;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	//Shape
	var s=new createjs.Shape();
	s.graphics.s(0).beginBitmapFill(image,"no-repeat",mtx);
	operaRoundRect(s,0,0,w,h,r);
	return s;
}



オマケ、注意、その他

▲[ 目次 ]

Bitmap()インスタンスに角丸のマスク (オマケ)

大変面倒ですので、Bitmap()インスタンスのthumbImageに角丸のマスク処理した方が簡単かも知れません。

以下の様にテストしてみました。backの前でマスク用のShapeを作ります。マスクはaddChildの必要は有りませんが、「MatrixでthumbShapeグラフィック流し込み」より品質は劣るようです。一応角丸に成ります程度だ。

マスクはブラウザにより描画品質が違います。Chromeはキレイに描画しない。(将来はキレイになるでしょうが?)



	//FadeサムネールBOX

	略す
	//縮小

	thumbImage.scaleX=thumbW/imageW;
	thumbImage.scaleY=thumbH/imageH;

	//mask
	var mask=new createjs.Shape();
	mask.graphics.s().beginFill();
	operaRoundRect(mask,0,0,thumbW,thumbH,4);
	mask.x=margin;
	mask.y=margin;
	thumbImage.mask=mask;

	//back
	var thumbback=new createjs.Shape();

	略す

マスクの場合、createjs.Shape()、createjs.Shape("#000000")、背景色の指定はあっても無くとも同じです。


.graphicsすり替えの注意

サムネール画像の取替えなどで、.graphicsすり替えを行っていますが、注意も必要です。

事前に、縮小サムネールShapeを配列に保存して使う場合、graphics.clear()で参照配列のデータが消滅する場合があります。一旦 clone() でコピーして使用すれば消滅しない。ご注意下さい。


「shadowフィルター」多用の理由

インスタンスを重ねた場合に「分離」「視認性」を高めるのが最大の理由である。が、、、

好みにも拠りますが、最近は面倒でも「角丸 RoundRect」にすることが多いし「ボタン」などは視認性を高めるにも必須です。Canvasはブラウザにより描画品質が違います。特に「Chrome」はキレイに描画しないが「shadowフィルター」でかなり「見栄え」が改善される為に「shadowフィルター」処理をしています。
多用の理由です。その事により問題が発生しては対策に追われている次第だ!。


その他

画像などは各自ご用意ください


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


「角丸RoundRectボタン」「shadowフィルター」などの問題点などは、下記記事を参照下さい。

【参照】当方の記事: CreateJS 「角丸RoundRectボタン」「shadowフィルター」の振る舞いなどを考える

「グラデーション、画像埋め込み、角丸RoundRectマウスオーバーボタン」は、前ページを参照下さい。

【参照】当方の記事: CreateJS Gradient 角丸RoundRectマウスオーバーボタンを考える

【参照】当方の記事: CreateJS 画像埋め込み、角丸RoundRectマウスオーバーボタンを考える


問題点、症状などは「現在時点」での事であり、バージョンアップなどでは将来どうなるかは不明である。
簡単、繁雑ですが以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]