POPSブログ

CreateJS Graphicsクラスの beginBitmapFill() を考える

255

  Category:  javascript2013/10/17 pops 

beginBitmapFill()はグラフィックに画像を埋め込む際に便利ですが問題も有ります。画像読み込み完了済みでなければ処理出来ないのが難点だ。問題点と修正方法など考えます。

 

CreateJS グラフィックに画像を埋め込む際の問題

グラフィックで描いた図形の中に、画像を埋め込むのが、beginBitmapFill()メソッドですが幾つかの問題が有ります。
一番困るのは「完全に読み込んだ画像」でなければ処理出来ない事につきます。


[ 目次 ]


 

 

グラフィックに画像を埋め込む問題点など

▲[ 目次 ]

下記の様なボタンの場合を例に考えて見ます。ボタンに画像を使用する事も可能ですが問題も有ります。


[ 説明図 ]

 

1. beginBitmapFill()は、読み込み終了の画像でなければ処理出来ません。
2. 原則、ローダーLoadQueue()で読み込み、保存event.result値を代入します。
3. javascriptのImageオブジェクト( new Image() )でも読み込み可能
3. 画像を埋め込むのは簡単ですが、画像の取得に失敗した場合、表示はブラウザにより違うが図の様になります。キレイな状態では有りませんので何らかの対策が必要。
Firefoxでは「エラー」でJSが停止します。(これは困る、チッチキチー!)
4. 画像の取得に失敗した場合は、以前は「グラフィックベタ塗り」に変更して「エラー」に対処していました。
5. 同じドメイン内部の画像なら読み込み失敗は殆んどないと思うが、外部画像は「画像お休みの日」に注意が必要です。(外部ドメイン画像はなるべく使用しないかエラー処理をする)
6. Bitmap()、beginBitmapFill()、に「Canvas」を参照出来るようなので代替画像に使えないか考えた。こちらの方が利便性が良いようだ。但し、現在使用例をみた事がない。


マニュアルには、下記の様に書いてあるので、「Canvas」を直接参照してもマチガイでは無いと思いますが、使用例が無い。試して問題が出ないようなので良いと思うのだが自信は無い。


Bitmap Class
A Bitmap represents an Image, Canvas, or Video in the display list.
A Bitmap can be instantiated using an existing HTML element, or a string.

 

背景画像を埋め込む beginBitmapFill() について

▲[ 目次 ]

一般に四角形以外のグラフィック図形の中に、背景画像を埋め込む(流し込む)場合に使用されますが、
Bitmap()の様に直接「画像URL」を設定するとエラーになりますので「完全に読み込んだ画像」である保存の、event.result値などを代入します。
一番困る所であり、画像読み込みに失敗すれば何も処理出来ない事態に陥りますので、ここを、どのように解決するかが問題です。


通常の、beginBitmapFill()使用方法

▲[ 目次 ]

Bitmap()の場合と比較しての相違。よく認識しておかないと失敗する。


※ Bitmap()の場合は以下の様に簡単ですが、自由な形にする時はマスクしなければならない。(面倒だ!)


Bitmap()は利便性が良い
var btnImage=new createjs.Bitmap(画像URL又はresult値);

エラーにならない
var btnImage=new createjs.Bitmap();

※ beginBitmapFill()の場合、自由な形に出来るので便利だ。

Bitmap()と違って、設定が違うと画像を表示しないダケではなく、最悪「エラー」に成るのが怖い。


beginBitmapFill()は利便性が悪い
直接、画像URLは、重大なエラーになる

var s=new createjs.Shape();
s.graphics.s().beginBitmapFill(画像URL).drawRoundRect(0,0,60,20,5);//エラー

原則、LoadQueue()で読み込み完了で得られるresult値を使用する

LoadQueue()で読み込み使用するのが原則

画像などは読み込み完了後でなければ処理出来ないことが多いので、原則、LoadQueue()を使用します。それでも不運にも読み込み失敗は有ります。


var overback;//グローバル

事前にローダーLoadQueue()で読み込み、result値を保存して置く
function fileload (event) {
	overback=event.result;
}

var s=new createjs.Shape();
s.graphics.s().beginBitmapFill(画像result値).drawRoundRect(図形データ);

つまり
s.graphics.s().beginBitmapFill(overback).drawRoundRect(0,0,60,20,5);
読み込み済みのものを使用する

javascript new Image()で読み込み使用する


var img=new Image();
img.onload=function() {
	//読み込みのImageオブジェクトは使用できる
	s.graphics.s().beginBitmapFill(img).drawRoundRect(0,0,60,20,5);
};
img.src="画像URL";

これは間違いでエラーになる


...beginBitmapFill()....

画像result値が無い、または意図的に設定しない、間違っている場合はエラーになる

...beginBitmapFill('画像URL')....

Bitmap()と違い、処理できない


※ 初期状態で画像を入れないで、空のグラフィックがほしい場合

初期状態で画像を入れないで、空のグラフィックがほしい場合は、仮にbeginFill("#000000")なりを入れて処理しておく。後で、「画像流し込み beginBitmapFill()」、「グラフィック流し込み beginFill()」どちらでも可能だ。
Shape()のみ作っておいても良い。空のShapeはエラーにならない。


初期
var s=new createjs.Shape();
s.graphics.s().beginFill("#000000").drawRoundRect(0,0,60,20,5);

空白の .beginFill() はエラーになる、必ず色情報を入れる
--------------------------------------------

黒のグラフィックが見えて邪魔なら、消しておけば良い
s.alpha=0;
または
s.visible=false;
--------------------------------------------

後で、グラフィックを換える
s.graphics.clear();
s.graphics.s().beginBitmapFill(画像result値).drawRoundRect(0,0,60,20,5);

または
s.graphics.clear();
var newgraphic=new createjs.Graphics();
newgraphic.beginBitmapFill(画像result値).drawRoundRect(0,0,60,20,5);
s.graphics=newgraphic;

 

別の方法で、beginBitmapFill() に画像を埋め込む方法

▲[ 目次 ]

Bitmap().imageを入れても処理できる。但し画像は読み込み完了である事が条件である。Bitmap()が読み込み完了かは大きさを調べればわかる。ローダーを利用せず簡易に、Bitmap(画像URL)で読み込み、beginBitmapFill()で利用できるが、タイミングの違いで失敗し「エラー」の危険を伴う。


Bitmap().imageを代入する

var overback;//グローバル
overback=new createjs.Bitmap(画像URL).image;
事前に画像が完全に読み込み完了である

処理できる
var s=new createjs.Shape();
s.graphics.s().beginBitmapFill(overback).drawRoundRect(0,0,60,20,5);

テストの結果見つけた。その後の処理は殆んど行える様だが、子細不明。簡単な表示だけならOK。


 

JavaScriptの、new Image()を使用する

▲[ 目次 ]

CreateJSでは(通常のキャンバス処理でも同じ)、画像は完全に読み込み済みでなければ色々な処理の出来ないメソッドが多いので、CreateJSの、ローダーLoadQueue()で読み込みするが準備が大変。そこで、new Image()を旨く使用すると効率が良い。

 

画像を読み込んでから、メインの処理に移動する

画像表示の、Bitmap()処理などを確実にするためにも、JavaScriptの、new Image()が利用される。

下記の様な記述が良くある、画像を読み込んでから、メインの処理に移動している。但し、画像取得に失敗すれば何も実行しない。エラー処理するかしないかの判断には個人差が有ると思う。


var xxximg=new Image();

window.onload=function(){

	xxximg.onload=function(){
		init();
	};

	xxximg.src="images/btnback1.png";
};

早い時期に画像をBitmap()先読みする

早い時期に先読みしておき、少し時間経過のある時点で表示処理させるのがコツ。結構使用されている。

但し、確実とは限らない。画像があれば何時かは表示するでショウ。


早い時期に先読み、
var bitmapimage=new Image();
bitmapimage.src="images/xxxx.png";
.
.
.
少し時間が経過した時点で実行
var bitmap=new createjs.Bitmap(bitmapimage);

当然これでも表示する
var bitmap=new createjs.Bitmap("images/xxxx.png");

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

単純に
スプリクト先頭で早めに実行しても良い、Bitmap()はエラーにならないから安心
var bitmap=new createjs.Bitmap("images/xxxx.png");
.
.
.
あとで利用すれば良い
少し時間が経過した時点で実行
stage.addChild(bitmap);


上の様に、読み込んだ、Bitmap()画像を、beginBitmapFill() で利用する場合は要注意。
少し時間が経過した時点で「完全に画像読み込みが完了」しているかは、その時のLoad条件次第で確実性は無い。
処理できるかも知れないレベルだ。


...beginBitmapFill(bitmap.image)....

● ボタン画像をmanifestリストに登録しないで判定させる方法

参考に記載する。JavaScriptの、new Image() 画像読み込み判定によるもの。かなり繁雑でイイカゲンですが、

但し、読み込み判定中、画面の動きなど止まるので使用しない方が良い。(無理やり作っていますので、実際にテストして表示など確認下さい、通常の manifestリスト.loader の手法のほうがベターです)

早い時期に先読みしておき、少し時間経過のある時点で表示処理させるのがコツ。但しタイミングの違いで失敗する事もある。


var outback;
var overback;
//読み込み
var outimg=new Image();
outimg.src="/main/images/btnback1.png";
outimg.onload=function(){
	outback=new createjs.Bitmap("/main/images/btnback1.png").image;
}
//outimg.onerror=function(){outback=null;}

//
var overimg=new Image();
overimg.src="/main/images/btnback2.png";
overimg.onload=function(){
	overback=new createjs.Bitmap("/main/images/btnback2.png").image;
}
//overimg.onerror=function(){overback=null;}
.
.
.
少し時間が経過した時点で実行
//判定、分岐
if (outback) {
	//処理
}
if (overback) {
	//処理
}

onerror処理は無くとも機能するが、在った方がベターだと思う

画像がロードされたか、outimg、overimg、それぞれ outback、overback、が true かの判定で可能


 

画像の読み込み失敗は何も処理出来ず、最悪である

近年、画像の「読み込失敗」は稀な事と思います。
読み込失敗で、何のコンテンツをも表示出来なくなるから、面倒でもエラーを回避して処理するか考えの分かれる所です。Flashと違い、画像の代わりのグラフイックを作る作業も大変です。

 

 

代替画像などを用意する

▲[ 目次 ]

画像はサーバー状態などの条件により必ず読み込み出来るかは判らない。画像1枚を読み込めずが為に、JSの実行が出来ない場合も発生しますから、どうしても必要なものならドキュメント内にデータの形で記載する方法もある。
「画像お休みの日」は少ないかと思うが、ワタシの場合は画像など読み込み失敗することを前提に処理するようにしているが、面倒であるのでこの辺は個人の判断だ。


画像など読み込み失敗すること無く、動作させるには、以下3通りの方法があると思います。


1. 画像をドキュメントに埋め込むことで確実に画像を得る。
2. グラフイックを描いたキャンバス要素を画像の代用にする。[ キャンバス要素を画像の代用にする ]
3. 趣旨とは異なるが、画像を使用せずに、CreateJS Graphicsクラスの beginFill()で処理する。


 

画像をドキュメントに埋め込む

▲[ 目次 ]

base64形式などで画像データをJS内部に記載しておき、画像に変換すれば確実に画像は獲られることになります。
JSで使用する外部画像を Base64 エンコードで文字列化しドキュメント内に埋め込み、PreloadJSで読み込むことが出来る(PreloadJSを利用して変換処理する)。下記コードは、easeljs-0.7で動作表示確認済み。


1. 画像をドキュメントに埋め込むんでいるので確実に処理できる。
2. 埋め込むか、グラフイックで作るか重要度を考慮して分類する。
3. 準備が大変であり、画像交換も面倒になりがちに成る。


この辺はコンテンツの内容などで異なってくると思います。


以下の記事を参考にさせて戴きました。

【参考】masa_vostok の記事: PreloadJSで読み込む画像をBase64 Data URI schemeで使う


タイプの指定は、type:"image" でなければだめのようだ。訂正して使用している。実際に画像を作り、フリーの「ファイル文字コード変換ソフト」で文字列化した。


読み込みが早く成る様に画像は小さい(10x10)、単にエラー回避の目的で使用する。大型の画像でも処理方法は同じです。どうしても必要な場合はドキュメント内に埋め込みます。
当初はエラー回避の目的で小さい画像を用意したが、現在は次ぎで説明する、「キャンバス要素を画像の代用にする」の方法に変わった。




manifestリストに記載する画像などのsrcにDataURIscheme文字列を書き込む、
typeにPreloadJS.IMAGEでは動作しなかったので、type:"image" に変更した、
typeを指定しないとエラーにな、あとは通常の読み込み処理を実行する、

//png画像埋め込み変換embed
var embedlist=[
{id:"whitepng",type:"image",src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADA1LzI0LzEzOVVsCwAAACB0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgTVi7kSokAAAAFUlEQVR4nGP8//8/A27AhEduBEsDAKXjAxF9kqZqAAAAAElFTkSuQmCC"},
{id:"blackpng",type:"image",src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIHRFWHRTb2Z0d2FyZQBNYWNyb21lZGlhIEZpcmV3b3JrcyBNWLuRKiQAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDUvMjQvMTM5VWwLAAAADUlEQVR4nGNgGAWkAwABNgABVtF/yAAAAABJRU5ErkJggg=="},
{id:"crossgif",type:"image",src:"data:image/gif;base64,R0lGODlhCgAKAPcAAAAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ywAAAAACgAKAAAIIgABBBhIcKBAgQUDIFRYcKHBhwkVOmw4EeJEhwsrHoxoMCAAOw=="}
];
//埋め込み画像Loadder
var embedlistloader;
//埋め込み画像インスタンス
var whiteImage;
var blackImage;
var crossImage;
//Result値保存用
var crossImageResult;


//START
onload=function () {

	//最初は埋め込み画像Load
	embedimageload();
}

//Load処理
function embedimageload() {

	//埋め込み画像Load
	embedlistloader=new createjs.LoadQueue(false);
	embedlistloader.addEventListener('complete',embedcomplete);
	embedlistloader.loadManifest(embedlist);
}
//完了
function embedcomplete() {

	//埋め込み画像Bitmap変換
	whiteImage=new createjs.Bitmap(embedlistloader.getResult("whitepng"));
	blackImage=new createjs.Bitmap(embedlistloader.getResult("blackpng"));
	crossImage=new createjs.Bitmap(embedlistloader.getResult("crossgif"));
	//Result値保存用
	crossImageResult=embedlistloader.getResult("crossgif");

	//Listener削除
	embedlistloader.removeEventListener('complete',embedcomplete);
	//ステージ周りセット
	init();
}

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

	略す

}

埋め込みBitmap画像のグラフイック利用

Bitmap化して保存しておくか、あるいはResult値を保存しておくかはその時の目的で違うとは思うが、 Bitmap画像 crossImage を beginBitmapFill() で利用するには crossImage.image として参照すれば利用できる。
直接利用するならば、Result値を保存しておく、ここではcrossImageResult。beginBitmapFill()は指定しない限り、初期値はリピート状態。


canvasWidth,canvasHeightは大きさとする

var backrect=new createjs.Shape();
//保存Result値利用
backrect.graphics.beginBitmapFill(crossImageResult).drawRect(0,0,canvasWidth,canvasHeight);
stage.addChild(backrect);

斜めの矢来状の壁紙が出来る
-------------------------------------------------------

//Bitmap()利用
backrect.graphics.beginBitmapFill(crossImage.image).drawRect(0,0,canvasWidth,canvasHeight);

これも大変面倒だ、商用目的でなければ出来ないナ!


 

 

キャンバス要素を画像の代用にする

▲[ 目次 ]

キャンバス要素で代替出来るものを作って代用することは可能のようです。画像そのものは無理ですが簡単なグラフイックを作り代用します。代替画像がほしい時は結構有ります。
作ったキャンバス要素は、ローダーLoadQueue()で得られるresult値、またはjavascript Imageオブジェクト値と同様に扱える様です。

「キャンバス要素」と言うより 「画像result値」 と考えた方が良い(Base64)。


[ 説明図 ]

 

代替キャンバス要素の利用


1. Gradient処理してあるから、代替画像でも見栄えが良い。(ベタでも構わない)
2. 大きさ色を指定して直ぐに作れるので便利。(ボタンの場合は最適)
3. 少し作り込めば、さらにキレイに、テキストも挿入可能です。
4. 写真画像読み込み失敗の時の代替画像としても使用可能です。(随時画像読み込みの場合助かる)
5. beginBitmapFill()のエラーが簡単に防げる。
6. 画像ボタンが表示出来なければ機能しない。見た目悪くとも代替があれば機能はする。
7. 見栄えは劣るが、画像埋め込みより簡単に処理できる。
8. CreateJSのグラフィック描画では有りませんから注意下さい。


色々とテストしてみましたが、通常の画像と同じく扱えます。但し処理次第では問題が出る可能性は在るかも知れません。詳細不明です。


[ 例 ] 赤色 200x100 ボックスを描く


//キャンバス要素
var canvas=document.createElement("canvas");
canvas.width=200;
canvas.height=100;
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);

//CreateJS Bitmap()化
var bitmap=new createjs.Bitmap(canvas);
stage.addChild(bitmap);

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

//beginBitmapFill()で使う
var rectbox=new createjs.Shape();
rectbox.graphics.beginBitmapFill(canvas).drawRect(0,0,200,100);

Bitmap()、beginBitmapFill()、共にそのまま利用できる。但し、キャンバス要素はhtml5 Canvasの書式です。
ここでの、canvasは画像そのものと考えた方が理解し易い。ご覧の通り、toDataURL変換はしてイナイ。


 

Canvas要素の代入と表示

▲[ 目次 ]


利用し易いように関数化してみた。
関数内部は、html5 Canvas、の Canvasオブジェクトで記載しています。


w,h,cは幅、高さ、色(例、"#FF0000")

//Bitmapで利用
var box1=new createjs.Bitmap(createColorCanvas(w,h,c));
stage.addChild(box1);

//beginBitmapFillで利用
var box2=new createjs.Shape();
box2.graphics.beginBitmapFill(createColorCanvas(w,h,c)).drawRect(0,0,w,h);
stage.addChild(box2);

//Result値のみ得る
var xxx_result=createColorCanvas(w,h,c);
あとで、Bitmap、beginBitmapFillで利用出来る

//トリミング、分割するも機能する
.drawImage(xxx_result,...................)

--------------------------------------------------------
//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

関係はないのだが、Bitmapクラスに.draw()があるので長い時間混乱した。canvas要素そのものを参照すれば良いのだが、canvas.ctxを参照シタリと作例が見つけられないので今までかかった。最強且つヨレヨレの「アホウ」である。


 

色付きcanvasを作る1、文字なし

▲[ 目次 ]


関数内部は、html5 Canvas、の CanvasGradientオブジェクトで記載しています。


ctx.createLinearGradient
線形グラデーションオブジェクトを生成する、始点と終点、(x0,y0,x1,y1)
grad.addColorStop
グラデーションの色の起点を設定する、offset値は0-1、


上が白で下が、指定色のグラデーション

//Gradient canvas
var canvasImage=createGradientCanvas (幅,高さ,色);


//色付きcanvasを作る
function createGradientCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	var gradient=ctx.createLinearGradient(0,h/2,0,0);
	gradient.addColorStop(0,c);
	gradient.addColorStop(1,"#FFFFFF");
	ctx.fillStyle=gradient;
	ctx.rect(0,0,w,h);
	ctx.fill();

	return canvas;
}

 

色付きcanvasを作る2、文字指定形式

▲[ 目次 ]


工夫すれば色々なグラデーションとかデザインなどに対応できる。


canvasWidth、canvasHeight、は像の幅高さとする
canvasImageはここでの保存の変数

上が白で下が、指定色のグラデーション
var gradient_data={x0:0,y0:canvasHeight/2,x1:0,y1:0};
//幅、高さ、色、色2、DATA、フォント作る、文字種、サイズ、文字色、ストリング
canvasImage=createGradientCanvas2 (canvasWidth,canvasHeight,"#DB7093","#FFFFFF",gradient_data,true,"Arial","bold 30px","#FFFFFF","IMAGE NONE")

上が、指定色で下が黒のグラデーション
//var gradient_data={x0:0,y0:canvasHeight,x1:0,y1:canvasHeight*0.6};
//canvasImage=createGradientCanvas2 (canvasWidth,canvasHeight,"#000000","#DB7093",gradient_data,true,"Arial","bold 30px","#FFFFFF","IMAGE NONE")

第5引数、gradient_dataは、始点と終点、(x0,y0,x1,y1)を {} で記載した
第6引数、フォント作る true 作らない false
第8引数、フォントの 斜体 太さ 大きさ を指定する

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

//幅、高さ、色、フォント作る、文字種、サイズ、文字色、ストリング
function createGradientCanvas2 (w,h,c,c2,data,make,font,fsize,fcolor,text) {

	//data
	var x0=data.x0;
	var y0=data.y0;
	var x1=data.x1;
	var y1=data.y1;
	//
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	var gradient=ctx.createLinearGradient(x0,y0,x1,y1);
	gradient.addColorStop(0,c);
	gradient.addColorStop(1,c2);
	ctx.fillStyle=gradient;
	ctx.rect(0,0,w,h);
	ctx.fill();

	if (make) {

		var font_v=fsize +" "+ font;

		ctx.fillStyle=fcolor;
		ctx.font=font_v;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.fillText(text,w/2,h/2);

	}

	return canvas;
}

 

虹色グラデーション

▲[ 目次 ]


別冊付録、虹色(両端赤色)


//虹色、RainbowGradients
function createRainbowCanvas(w,h) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	var gradient=ctx.createLinearGradient(0,0,w,0);//横
	//var gradient=ctx.createLinearGradient(0,0,0,h);//縦
	//var gradient=ctx.createLinearGradient(0,0,w,h);//斜め

	gradient.addColorStop(0,'red');
	gradient.addColorStop(1/7,'orange');
	gradient.addColorStop(2/7,'yellow');
	gradient.addColorStop(3/7,'green')
	gradient.addColorStop(4/7,'aqua');
	gradient.addColorStop(5/7,'blue');
	gradient.addColorStop(6/7,'purple');
	gradient.addColorStop(1,'red');
	ctx.fillStyle=gradient;
	ctx.fillRect(0,0,w,h);

	return canvas;
}

 

キャンバス要素で作ったほうが利便性が良い

▲[ 目次 ]


beginBitmapFill()が機能しないのだから、beginFill()で修正した方うが良いと思っていましたが、キャンバス要素で作ったほうが利便性が良いことが判りました。


//Gradient
var canvasImage=createGradientCanvas (幅,高さ,色);

使用する場合
....Bitmap(canvasImage).....
....beginBitmapFill(canvasImage).....

beginBitmapFill()で、問題の発生する以前に取り替えておいても使用出来ますし、beginFill()に変更の必要が有りませんので効率的です。


● 画像rolloverボタンの例

画像rolloverボタンの部分を簡単に記述すれば「代替画像をつくる」方が簡単なことが判る。(流れだけみてください)
ボタン用の画像がなければ、beginFill() に変更しているだけですが、実際は3箇所同じく修正処理している。面倒だ!

常に、beginBitmapFill()のエラーを考慮して記述するのも大変であったが、解消されるので安心である。
ボタン画像Load取得の時点で判定して「代替キャンバス画像」に交換しても良い。


画像が無い時 beginBitmapFill() から beginFill() に変更

over=画像result値
overcolor=代替色

//画像rollover
btn.addEventListener("rollover",function () {
	s.graphics.clear();
	s.graphics.s();
	if(over) {
		s.graphics.beginBitmapFill(over).drawRoundRect(x,y,w,h,r);
	} else {
		s.graphics.beginFill(overcolor).drawRoundRect(x,y,w,h,r);
	}
	stage.update();
});

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

画像が無い時 代替画像をつくる
if(over) {over=createGradientCanvas (...);}

//画像rollover
btn.addEventListener("rollover",function () {
	s.graphics.clear();
	s.graphics.s();
	s.graphics.beginBitmapFill(over).drawRoundRect(x,y,w,h,r);
	stage.update();
});

 

その都度ボタンで選択で画像表示する時のエラー処理の例

▲[ 目次 ]


ここではボタンの話では無い。ボタン選択で画像を表示する場合に、画像を読み込めない場合は、代替画像がないために、Loadingを消したりボタン周りの処理が面倒であった。
「画像を読みエラー」があれば「代替キャンバス」を代入すれば良いので簡単になる。(流れだけみてください)


//エラーで代替キャンバス代入
function load_error () {
	//代替キャンバス代入
	画像result値=createGradientCanvas (...);

	//画像表示に進む等の処理
	image_view();
}

キャンバス要素は、ローダーLoadQueue()で得られるresult値、またはjavascript Imageオブジェクト値と同様


 

 

効率化のため等と称し、予告無くJSなど修正訂正してシランフリする習性が有りますので了承下さい。
また、CreateJSの「仕様」もクルクル変わっていますので、バージョン違い等に充分注意下さい


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]