POPSブログ

CreateJS Canvasエレメント描画のOUTLINEテキストアニメーション

312

  Category:  javascript2014/07/15 pops 

CreateJS Textクラスで作ったOUTLINEテキストにCanvasエレメント描画の画像などで、テキストを装飾してアニメーション(Tween)させます。OUTLINEテキストはアウトラインの幅だけ大きくなりますので其の点を考慮して作ります。
easeljs-0.7.1 でのテストです。

 

CreateJS Canvasエレメント描画のOUTLINEテキストアニメーション テスト

テキストの中心補正を textBaseline middleで、Canvasエレメントを使用して画像をテキストに描画します。画像と同じものですから、拡大すると粗がでますが、現時点では唯一のテキスト装飾方法です。
将来は、これらの装飾なども簡単に描画できるようになると予測しますが、それまでの代替手段として有効と思います。


 

 

DEMO


CreateJS Canvasエレメント描画OUTLINEテキストアニメーションのデモ、(createJS096.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


1. 画像埋め込みテキストの表示のデモ


2. 画像埋め込みテキストのシミュレーション


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.7.1 使用)


<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.1.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box" class="radius"><canvas id="mainCanvas" width="640" height="300"></canvas></div>
</div>

JS

createJS096.js、JS名は任意に変更可。注意、easeljs-0.7.1用です。


//日本語
//createJS096.js
//デモ用Canvasエレメント描画OUTLINEテキストアニメーション
//easeljs-0.7.1用

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

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

//prologue表示時間
var prologue_time=12000;

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//メインテキスト表示位置
var mtcontainer_x=100;//中央補正しない場合
var mtcontainer_y=55;//

//ロゴテキスト
var logostring="WELCOME";
//ロゴテキスト2
var logostring2="POPS-WEB-COM";

//サブテキスト
var substring="Syousyuu-Rikiii Welcome to my site. thanks";

//画像manifestリスト
var manifest=[
{src:"/main/images/textback01.jpg",id:"PHOTO1"},
{src:"/main/images/textback02.jpg",id:"PHOTO2"},
{src:"/main/images/textback03.jpg",id:"PHOTO3"},
{src:"/main/images/textback04.jpg",id:"PHOTO4"},
{src:"/main/images/textback05.jpg",id:"PHOTO5"},
{src:"/main/images/textback06.jpg",id:"PHOTO6"},
{src:"/main/images/textback07.jpg",id:"PHOTO7"},
{src:"/main/images/textback08.jpg",id:"PHOTO8"},
{src:"/main/images/textback09.jpg",id:"PHOTO9"},
{src:"/main/images/textback10.png",id:"PHOT10"},
{src:"/main/images/textback11.png",id:"PHOT11"},
{src:"/main/images/textback12.png",id:"PHOT12"},
{src:"/main/images/textback13.png",id:"PHOT13"},
{src:"/main/images/textback14.jpg",id:"PHOT14"},
{src:"/main/images/textback15.png",id:"PHOT15"}
];

//------------------------------------------------------
//変数、未使用もあり

//ステージ
var stage;
//コンテナなど
var backrect;
var container;
var btncontainer;
//TEXT
var viewtext;

//MAIN-TEXT
var maintextcontainer;
var maintext;
//MOVE-TEXT
var textChip=[];
var textPosx=[];
var textPosy=[];

//LOGO-TEXT
var logotextcontainer;
var logotext;
//MOVE-TEXT2
var textChip2=[];
var textPosx2=[];
var textPosy2=[];

//LOGO-TEXT2
var logotextcontainer2;
var logotext2;
//MOVE-TEXT2
var textChip2b=[];
var textPosx2b=[];
var textPosy2b=[];

//SUB-TEXT
var subtextcontainer;
//MOVE-TEXT3
var textChip3=[];
var textPosx3=[];
var textPosy3=[];

//読み込み画像URL保存容器
var assets=[];
var loader;
var image_max;
//------------------------------------------------------
//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);

//click-btn
var myhitBtn;

//var textlen=0;
//var textcount=0;
var backchg_no=0;
var backcolors=["#000000","#FFFFFF","#BC8F8F","#4682B4","#6B8E23","#888888","#333333"];

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


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

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	backrect=new createjs.Shape();
	backrect.graphics.beginFill("#000000").drawRect(0,0,canvasWidth,canvasHeight);

	//クリック
	backrect.addEventListener("click",backchg);
	stage.addChild(backrect);

	//簡易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!");

	//LOGO-TEXT
	logotextcontainer=new createjs.Container();
	//表示位置
	logotextcontainer.x=150;
	logotextcontainer.y=80;
	stage.addChild(logotextcontainer);

	//LOGO-TEXT
	logotextcontainer2=new createjs.Container();
	//表示位置
	logotextcontainer2.x=150;
	logotextcontainer2.y=120;
	stage.addChild(logotextcontainer2);

	//MAIN-TEXT
	maintextcontainer=new createjs.Container();
	//表示位置
	maintextcontainer.x=mtcontainer_x;
	maintextcontainer.y=mtcontainer_y;
	stage.addChild(maintextcontainer);

	//SUB-TEXT
	subtextcontainer=new createjs.Container();
	stage.addChild(subtextcontainer);

	//btncontainer
	btncontainer=new createjs.Container();
	btncontainer.y=270;
	stage.addChild(btncontainer);
	set_btn();
	myhitBtn.visible=false;

	stage.update();

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

	//調整
	setTimeout(function() {

		//画像一括ロードに進む
		bulkload();

	},1000);

}

//bulk-load、画像一括ロード
function bulkload() {

	//Loader
	loader=new createjs.LoadQueue(false);

	//loader EventListener設定、この部分修正
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//error関数を追加
	loader.addEventListener("error",loaderror);

	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}
//各画像読み込み完了
function fileload (eventObject) {

	//エラー無しの画像をassets容器に保存
	assets.push(eventObject.result);

}
//全ての画像読み込み完了
function complete (event) {

	set_text("LOADING END!");
	//画像数確認、再計算
	image_max=assets.length;

	//loader Listener削除 こちら使用に修正
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);
	//追加error関数を削除
	loader.removeEventListener("error",loaderror);

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

			set_text("");
			
			//プロローグ表示に進む
			set_prologue();

		},2000);
	}

}
//エラー処理
function loaderror(eventObject) {

	//エラーの場合代替画像を作りassets容器に格納
	//var img=createColorCanvas (canvasWidth,canvasHeight,"#FFFFFF");//ベタ
 	var img=createLineGradBox (canvasWidth,canvasHeight,"#FFFFFF",d_color[assets.length],"#FFFFFF","y",2);//登録色グラデーション
	assets.push(img);
}

//プロローグ
function set_prologue() {

	//MAINテキストアニメ
	set_mainanime();
	//LOGOテキストアニメ
	set_logoanime();

	//調整
	setTimeout(function() {

		//LOGOテキストアニメ2
		set_logoanime2();
		//SUBテキストアニメ
		set_subanime();

		//調整
		setTimeout(function() {

			//案内
			set_text("テキストアニメーションが終了したら「ボタン」を押してください。");
			//ボタン表示
			myhitBtn.visible=true;
			//自動
			//reset_text();

		},prologue_time);

	},2000);
}

//背景色変更
function backchg() {
	backchg_no ++;
	if (backchg_no > backcolors.length-1) {backchg_no=0;}
	var color=backcolors[backchg_no];
	backrect.graphics.beginFill(color).drawRect(0,0,canvasWidth,canvasHeight);
}

//MAINアウトラインテキストアニメ/現在使用
function set_mainanime() {

	//MAINテキストアニメーション
	var maintext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;
	var outline_w=2;//アウトライン幅

	//インスタンス配列取得
	//サイズ,フォント,色,アウトライン幅,虹色,スペース,文字
	textChip=createMoveOutlineText("40px","Arial","#FFFFFF",outline_w,true,text_spc,mainstring);
	var textlen=mainstring.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		maintext_W +=textChip[i].width;
		if(i < textlen) {maintext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//移動
	var delay_st=[];
	//パターン番号
	var pattern_no=Math.floor(Math.random()*6);
	//多目的判定用フラグ
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	var chgflag2=Math.floor(Math.random()*3);
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//回転
	var rotate_no=chgflag*chg_v;
	//スケール
	var sclsdata=[1,1,1,.5,4,8];
	var scls=sclsdata[Math.floor(Math.random()*sclsdata.length)];
	//delay番号
	var delay_no=Math.floor(Math.random()*3);

	var sh=textlen-1;
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		maintextcontainer.addChild(textChip[i]);
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		//全幅計算は上で行っている
		//maintext_W +=textChip[i].width;
		//if(i < textlen) {maintext_W +=text_spc;}

		//移動左右1、X方向のみ
		if (pattern_no == 0) {
			textChip[i].x=canvasWidth*chg_v;
			textChip[i].y=textPosy[i];
		}
		//移動左右2、Y方向ズレ
		if (pattern_no == 1) {
			textChip[i].x=canvasWidth/2*chg_v;
			textChip[i].y +=100*flag*chg_v*(chgflag2-1);
		}
		//移動上下
		if (pattern_no == 2) {
			textChip[i].x=textPosx[i];//その場
			textChip[i].y=canvasHeight/2*chg_v*(chgflag+1);
			if (chgflag == 1) {
				textChip[i].y *=flag;//上下交互
			}
		}
		//ランダム
		if (pattern_no == 3) {
			//globalToLocal
			var point=maintextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}
		//文字列の中心から
		if (pattern_no == 4) {
			textChip[i].x=maintext_W/2;
			textChip[i].y=textPosy[i];//その場
		}
		//その場所から
		if (pattern_no == 5) {
			textChip[i].x=textPosx[i]+20*(chgflag-1);//その場少しずらす
			textChip[i].y=textPosy[i];//その場
		}

		textChip[i].rotation=rotate_no*180*(chgflag2-1);
		textChip[i].alpha=0;
		textChip[i].scaleX=scls;
		textChip[i].scaleY=scls;

		//delay
		delay_st[i]=100*i;//標準
		if (delay_no == 1) {delay_st[i]=20*i*i;}
		if (delay_no > 1) {delay_st[i]=Math.abs(i-sh/2)*150;}//150-200

		//交互遅延
		if (chgflag2 == 1) {
			if (flag == 1) {delay_st[i] +=1500;}
		}

		k ++;
		flag *=-1;
	}
	//delay逆転
	if (chgflag == 0) {
		delay_st.reverse();
	}

	//コンテナ中央補正は上で行っている
	//if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(delay_st[i])
		.to({x:textPosx[i],y:textPosy[i],scaleX:1,scaleY:1,alpha:1,rotation:0},1000)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200)
		.wait(500).call(textshadow)
		.call(finshmove);//現在何もしない
	}

}

//LOGOアウトラインテキストアニメ
function set_logoanime() {

	//LOGOテキストアニメーション
	var logotext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;
	var outline_w=2;//アウトライン幅

	//ベース表示,アウトライン表示,陰影
	var base=true;//ベース表示
	var line=true;//アウトライン表示
	var shadow=true;//陰影
	var imgshadow=false;//画像陰影

	//色替え
	var colorChg=false;
	var colortype="rainbow";//rainbow rondam #FF0000

	//画像
	var backimage=assets[14];//アルファチャンネル画像
	//var backimage=assets[1];//普通画像

	//インスタンス配列取得
	//サイズ,フォント,色,アウトライン幅,アウトライン色,虹色,スペース,文字,ベース表示,アウトライン表示,陰影,画像,画像透明度,画像陰影
	textChip2=createMoveLogoText3("80px","Impact","#FF1493",outline_w,"#FFFFFF",true,text_spc,logostring,base,line,shadow,backimage,1,imgshadow);

	var textlen=logostring.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		logotext_W +=textChip2[i].width;
		if(i < textlen) {logotext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {logotextcontainer.x=(canvasWidth-logotext_W)/2;}

	//パターン番号
	var pattern_no=Math.floor(Math.random()*3);
	var alpha_no=1;
	var scale_no=1;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		logotextcontainer.addChild(textChip2[i]);
		//ポジション取得
		textPosx2[i]=textChip2[i].x;
		textPosy2[i]=textChip2[i].y;

		//全幅計算は上で行っている
		//logotext_W +=textChip2[i].width;
		//if(i < textlen) {logotext_W +=text_spc;}

		//移動
		//左右
		if (pattern_no == 0) {
			textChip2[i].x=canvasWidth*flag;
			textChip2[i].y=textPosy2[i];//その場
			alpha_no=1;
			scale_no=1;
		}
		//ランダム
		if (pattern_no == 1) {
			//globalToLocal
			var point=logotextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip2[i].x=point.x;
			textChip2[i].y=point.y;
			alpha_no=0;
			scale_no=Math.floor(Math.random()*3)+1;//1-3
		}
		//その場
		if (pattern_no == 2) {
			textChip2[i].x=textPosx2[i];
			textChip2[i].y=textPosy2[i];
			alpha_no=0;
			scale_no=3;
		}

		//alpha scale
		textChip2[i].alpha=alpha_no;
		textChip2[i].scaleX=scale_no;
		textChip2[i].scaleY=scale_no;

		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {logotextcontainer.x=(canvasWidth-logotext_W)/2;}
	logotextcontainer.y=90;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn2=createjs.Tween.get(textChip2[i])
		.wait(200*i+1000)
		.to({x:textPosx2[i],y:textPosy2[i],scaleX:1,scaleY:1,alpha:1},1000);
		if(colorChg) {twn2.wait(500).call(color_chg,[colortype]);}
		twn2.wait(500).call(textshadow2)
		.call(finshmove2);//現在何もしない
	}

}

//-----------------------------------------------------------------------------------
//アウトライン
//LOGOアウトラインテキストアニメ2
function set_logoanime2() {

	//LOGOテキストアニメーション
	var logotext_W=0;
	var text_spc=0;//テキストスペース/画像欠け補正
	var center=true;
	var tcount=0;
	var outline_w=2;//アウトライン幅/0はだめ

	//画像
	var backimage2=assets[12];
	//var backimage2=createLineGradBox(640,80,"#FFFFFF","#000000","#FFFFFF","y",3);

	//インスタンス配列取得
	//サイズ,フォント,色,アウトライン幅,スペース,文字,陰影色,陰影,画像
	textChip2b=createMoveLogoText4b("Bold 50px","Arial","#FF1493",outline_w,text_spc,logostring2,"#000000",shadow,backimage2);

	var textlen=logostring2.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		logotext_W +=textChip2b[i].width;
		if(i < textlen) {logotext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {logotextcontainer2.x=(canvasWidth-logotext_W)/2;}

	//パターン番号
	var pattern_no=Math.floor(Math.random()*3);
	var alpha_no=1;
	var scale_no=1;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		logotextcontainer2.addChild(textChip2b[i]);
		//ポジション取得
		textPosx2b[i]=textChip2b[i].x;
		textPosy2b[i]=textChip2b[i].y;

		//移動
		//左右
		if (pattern_no == 0) {
			textChip2b[i].x=canvasWidth*flag;
			textChip2b[i].y=textPosy2b[i];//その場
			alpha_no=1;
			scale_no=1;
		}
		//ランダム
		if (pattern_no == 1) {
			//globalToLocal
			var point=logotextcontainer2.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip2b[i].x=point.x;
			textChip2b[i].y=point.y;
			alpha_no=0;
			scale_no=Math.floor(Math.random()*3)+1;//1-3
		}
		//その場
		if (pattern_no == 2) {
			textChip2b[i].x=textPosx2b[i];
			textChip2b[i].y=textPosy2b[i];
			alpha_no=0;
			scale_no=3;
		}

		//alpha scale
		textChip2b[i].alpha=alpha_no;
		textChip2b[i].scaleX=scale_no;
		textChip2b[i].scaleY=scale_no;

		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {logotextcontainer2.x=(canvasWidth-logotext_W)/2;}
	logotextcontainer2.y=170;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn2b=createjs.Tween.get(textChip2b[i])
		.wait(200*i+1000)
		.to({x:textPosx2b[i],y:textPosy2b[i],scaleX:1,scaleY:1,alpha:1},1000)
		.call(finshmove2b);//現在何もしない
	}

}

//SUBテキストアニメ
function set_subanime() {

	//SUBテキストアニメーション
	var text_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip3=createMoveText("16px","Arial","#CCCCCC",false,text_spc,substring);
	var textlen=substring.length;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		subtextcontainer.addChild(textChip3[i]);
		//ポジション取得
		textPosx3[i]=textChip3[i].x;
		textPosy3[i]=textChip3[i].y;

		//全幅
		text_W +=textChip3[i].width;
		if(i < textlen) {text_W +=text_spc;}

		//移動
		textChip3[i].x=canvasWidth*flag;
		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {subtextcontainer.x=(canvasWidth-text_W)/2;}
	subtextcontainer.y=240;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn3=createjs.Tween.get(textChip3[i])
		.wait(200*i)
		.to({x:textPosx3[i]},500)
		.call(finshmove3);//現在何もしない
	}

}

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

//MOVE-Outlineテキストインスタンスを作る1
//reg原点中央補正
function createMoveOutlineText(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;//TEXT
	}
	//戻り配列
	return chip;
}

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

//LOGO-テキストインスタンスを作る3
//複数テキストのためtextBaseline中心補正/画像埋め込み
//サイズ,フォント,色,アウトライン幅,アウトライン色,虹色,スペース,文字,ベース表示,アウトライン表示,陰影,画像,画像透明度,画像陰影
function createMoveLogoText3(size,font,color,outline_w,linecolor,rainbow,space,str,base,line,shadow,img,alpha,imgshadow) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//1文字取り出し
		var text=str.charAt(i);

		//コンテナを作る
		var box=new createjs.Container();

		//ベース文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=text;
		t.name="base";
		t.colorno=""+parseInt(i/len*360);//虹色番号文字
		//幅高さを先に取得する
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//base文字の表示
		if(!base) {t.text="";}
		if(shadow) {t.shadow=new createjs.Shadow("#000000",0,0,4);}//陰影

		//トリミング画像、X、Y、幅、高さ、
		var trimming_img=imageTrimmingCanvas(img,tpos_x,0,w,h,0,0,w,h);//X位置をずらした画像を得る

		//画像埋め込みTEXTcanvasを作る
		//幅、高さ、文字種、サイズ、パタン画像、透明度、ストリング
		var img_canvas=createImageTextCanvas(w,h,font,size,trimming_img,alpha,text);
		//Bitmap表示
		var img_txt=new createjs.Bitmap(img_canvas);
		img_txt.regX=w/2;
		img_txt.regY=h/2;

		//陰影画像が汚くなる場合あり
		if(imgshadow) {img_txt.shadow=new createjs.Shadow("#000000",0,0,3);}

		//虹色
		if (rainbow) {
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//ライン文字インスタンスを作る
		var l=new createjs.Text("",fontdata,linecolor);
		l.name="line";
		l.outline=outline_w;

		//1文字入れる
		//line文字の表示
		if(line) {l.text=text;}

		//中心補正
		l.textAlign="center";
		l.textBaseline="middle";

		if(shadow) {l.shadow=new createjs.Shadow("#000000",0,0,3);}//陰影

		//BOX位置
		tpos_x +=w/2;//half
		box.x=tpos_x;
		box.y=h/2;
		//大きさ重要
		box.width=w;
		box.height=h;

		//位置加算
		tpos_x +=(w/2+space);//half+space

		//addChild/2層
		box.addChild(t,img_txt,l);

		chip[i]=box;

	}
	//戻り配列
	return chip;
}

//LOGO-テキストインスタンスを作る4/textBaseline中心補正/画像埋め込み
//サイズ,フォント,色,アウトライン幅,スペース,文字,陰影色,陰影,画像
function createMoveLogoText4b(size,font,color,outline_w,space,str,shadowcolor,shadow,img) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//1文字取り出し
		var text=str.charAt(i);

		//コンテナを作る
		var box=new createjs.Container();

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=text;
		t.name="base";
		//幅高さを先に取得する
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//トリミング画像、X、Y、幅、高さ、
		var trimming_img=imageTrimmingCanvas(img,tpos_x+outline_w/2,0,w+outline_w/2,h+outline_w/2,0,0,w+outline_w*2,h+outline_w);//X位置をずらした画像を得る/W文字欠け補正

		//画像埋め込みTEXTcanvasを作る
		//幅、高さ、文字種、サイズ、パタン画像、ストリング
		var img_canvas=createImageTextCanvas2b(w+outline_w,h+outline_w,font,size,outline_w,trimming_img,text);
		//Bitmap表示
		var img_txt=new createjs.Bitmap(img_canvas);

		img_txt.name="image";
		img_txt.regX=(w+outline_w)/2;
		img_txt.regY=(h+outline_w)/2;

		//陰影
		if(shadow) {t.shadow=new createjs.Shadow(shadowcolor,0,0,4);}

		//BOX位置
		tpos_x +=w/2;//half
		box.x=tpos_x;
		box.y=h/2;
		//大きさ重要
		box.width=w;
		box.height=h;

		//位置加算
		tpos_x +=(w/2+space);//half+space

		box.addChild(t,img_txt);

		chip[i]=box;

	}
	//戻り配列
	return chip;
}

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

//MOVEテキストインスタンスを作る
function createMoveText(size,font,color,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			t.color=rainbowColor(i,len,100,50);//rainbow
			//t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}
		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;
	}
	//戻り配列
	return chip;
}

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

//TEXT陰影処理1
function textshadow() {
	//this.shadow=new createjs.Shadow("#000000",0,0,5);//黒
	this.shadow=new createjs.Shadow("#FFFFFF",-1,-1,2);//白ハイライト
}
//TEXT陰影処理2
function textshadow2() {
	//this.shadow=new createjs.Shadow("#000000",0,0,5);//黒
}
//TEXT陰影処理2b
function textshadow2b() {
	//
}
//色替
function color_chg(colortype) {

	if(!colortype) {return}//指定なし
	//保存虹色番号
	var no=this.getChildByName("base").colorno*1;
	if(colortype == 'rainbow'){this.getChildByName("base").color=createjs.Graphics.getHSL(no,100,50);
	} else if(colortype == 'random'){this.getChildByName("base").color=createjs.Graphics.getHSL(Math.floor(Math.random()*360),100,50);
	} else {this.getChildByName("base").color=colortype;}//指定色
}

//終了
function finshmove () {
	//
}
//終了2
function finshmove2 () {
	//
}
//終了2b
function finshmove2b () {
	//
}
//終了3
function finshmove3 () {
	//
}
//reset_text
function reset_text() {

	set_text("クリア");
	myhitBtn.visible=false;

	//コンテナの中を削除
	maintextcontainer.removeAllChildren();
	logotextcontainer.removeAllChildren();
	logotextcontainer2.removeAllChildren();
	subtextcontainer.removeAllChildren();

	//調整
	setTimeout(function() {
		set_text("ランダムアニメ実行中");
		set_prologue();
	},1000);

}

//tickステージ
function tick() {
	stage.update();
}
//VIEWTEXT
function set_text(t) {
	viewtext.text=t;
}

//rainbow-Color
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

//create-text未使用
function create_text(size,font,color,string) {

	var fontdata=size + " " + font;
	var t=new createjs.Text("",fontdata,color);
	t.text=string;
	var w=t.getMeasuredWidth();
	var h=t.getMeasuredHeight();
	//大きさ設定、受け渡しに重要
	t.width=w;
	t.height=h;
	//原点中央
	t.regX=w/2;
	t.regY=h/2;
	return t;

}
//Create-Bottunボタンを作る
function set_btn() {

	//ラベル文字生成
	var label="CLICK";
	//x,y,w,h,r,c,label,lc,overc,outc
	myhitBtn=createbtn (0,0,60,20,5,"#FFFFFF",label,"#FF0000","#48D1CC","#FFFFFF");
	myhitBtn.cursor="pointer";
	myhitBtn.x=(canvasWidth-60)/2;
	myhitBtn.y=0;
	//クリック
	myhitBtn.addEventListener("click",reset_text);
	//addChild
	btncontainer.addChild(myhitBtn);

}

//create-bottunベタ塗り
function createbtn (x,y,w,h,r,c,label,lc,overc,outc) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸
	s.graphics.s(0).beginFill(outc).drawRoundRect(x,y,w,h,r);
	btn.addChild(s);
	//myBtn shadow onMouseOverでupdate()すると濃くなる
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.x=w/2;
	tx.y=3;
	tx.maxWidth=w;
	//tx.lineWidth=w;
	tx.textAlign="center";
	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginFill(overc).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginFill(outc).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	return btn;
}

//RGB数値を#000000形式に変換/下と同じ
function getHexString(r,g,b) {
	var color="#"+("0"+parseInt(r).toString(16)).slice(-2)+("0"+parseInt(g).toString(16)).slice(-2)+("0"+parseInt(b).toString(16)).slice(-2);
	return color;
}

//RGB数値を#000000形式に変換
function getHexStringX(r,g,b) {

	var data=[r,g,b];
	var color="#";
	for (var i=0; i < 3; i++) {
		color +=hexstr(data[i]);
	}
	return color;

	function hexstr(v) {
		var txt=v.toString(16);
		txt="00"+txt;
		var str=txt.substring(txt.length-2);
		return str;
	}

}

//--------------------------------------------------------------------------------------
//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

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

	//LinearGradient
	var gradient;
	if(direction == 'x') {
		gradient=ctx.createLinearGradient(0,h,w,h);
	}
	if(direction == 'y') {
		gradient=ctx.createLinearGradient(w,0,w,h);
	}
	if(direction == 'xy') {
		gradient=ctx.createLinearGradient(0,0,w,h);
	}
	if(type == 2) {
    		gradient.addColorStop(0,color1);
    		gradient.addColorStop(1,color2);
	}
	if(type == 3) {
    		gradient.addColorStop(0,color1);
		gradient.addColorStop(0.5,color2);
    		gradient.addColorStop(1,color3);
	}
	ctx.fillStyle=gradient;
	//FILL
	ctx.fillRect(0,0,w,h);

	return canvas;
}
//--------------------------------------------------------------------------------------
//画像埋め込みTEXTcanvasを作る
//幅、高さ、文字種、サイズ、パタン画像、透明度、ストリング
function createImageTextCanvas (w,h,font,fsize,patternimg,alpha,text) {

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

	var font_v=fsize +" "+ font;

	if(patternimg) {
		var pattern=ctx.createPattern(patternimg,"repeat");
		ctx.fillStyle=pattern;
	} else {
		ctx.fillStyle="#000000";
	}

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

	return canvas;
}

//画像埋め込みアウトラインTEXTcanvasを作る
//幅、高さ、文字種、サイズ、アウトライン、パタン画像、ストリング
function createImageTextCanvas2b (w,h,font,fsize,outline_w,patternimg,text) {

	var margin=outline_w;//大きさ拡張

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

	var font_v=fsize +" "+ font;

	//画像
	if(patternimg) {
		var pattern=ctx.createPattern(patternimg,"repeat");
		ctx.strokeStyle=pattern;
	}else{
		ctx.strokeStyle="#000000";
	}
/*
ctx.lineJoin="miter";
ctx.miterLimit=outline_w/2;
*/
	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//stroke
	ctx.lineWidth=margin;
	ctx.strokeText(text,(w+margin)/2-margin/2,(h+margin)/2-margin/2);

	return canvas;
}

//トリミング画像、X、Y、幅、高さ、
function imageTrimmingCanvas(patternimg,sx,sy,sw,sh,dx,dy,dw,dh) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=sw;
	canvas.height=sh;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,sx,sy,sw,sh,dx,dy,dw,dh);

	return canvas;
}

//幅、高さ、画像
function createImgCanvas(w,h,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

//色背景つき画像
//全幅、全高さ、背景色、画像幅、画像高さ、画像
function createColorImgCanvas(w,h,c,imgw,imgh,img) {
	//Box
	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);
	ctx.drawImage(img,0,0,imgw,imgh);

	return canvas;
}

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

//START
init();

注釈文を削除すれば、幾分早くなります。
画像使用の場合、登録画像パスは当方の例です。使用の際は環境に合わせて下さい。


CSS

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


/*日本語 createJS096.css*/

#demo-wrap {
position:relative;
width:auto;
height:320px;
text-align:center;
}

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:640px;
height:300px;
padding:0;
margin:0 auto;
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:#000000;
}

#image-box #mainCanvas {
border-radius:10px;
}
#btn-box {
width:640px;
height:50px;
margin:10px auto;
padding:0;
}

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

当方のサンプルの例です。


 

簡単な説明


[説明図]

上から、サンプル1、サンプル2(画像装飾テキスト1)、サンプル3(画像装飾テキスト2)、サンプル4、の順にアニメーションさせています。


 

CreateJS Canvasエレメント描画のOUTLINEテキストアニメーション

OUTLINEテキストのサンプルを2種類、掲示します。最終段はOUTLINEでは無い通常のものです。小さな文字はOUTLINEには適していません。


ここでの方法は、テキスト(文章)を1文字毎に分解して、文字間隔が綺麗に揃う処理です。


1. 前ページのJSを基本に装飾画像を挿入する部分を追加しました。
2. 原点を中央補正は、textAlign="center"、textBaseline="middle"、での方式、構成される「複数要素のテキスト」とBitmap画像をコンテナでラップする構造になります。
Bitmap()で表示している、画像装飾テキスト単体ではChrome(ChromeエンジンのOpera)で陰影がつかないので注意。
3. 装飾部分は画像同様ですから、拡大した場合の品質は粗くなります。
4. 原則、文字は一行であるが、間隔が綺麗にそろう。勿論日本語をも使用できる。
5. FONT、ブラウザによっては、OUTLINEが壊れる場合がありますので確認が必要です。
(防げないので「アウトライン幅」を余り太くしないか、別のFONTを使用する)
6. その他設定の詳細は、JS上部を参照ください。


TEXTの大きさを取得する (重要)

TEXTの大きさを取得する場合は、textAlign="left"、textBaselineは未設定、の状態で取得する事が重要です。(設定なしで textAlign 初期値はleftである)。
横幅は正確であるが、高さはブラウザによりほんの僅かの差異がある(無視できる範囲)。
大きさ取得後に設定する、textBaseline middle も若干の差異があるために、背景グラフイックなど入れると中心よりずれる(1-2ピクセル、Fontにより違いあり、Firefoxのズレは大きい)。


画像装飾テキストの相違

テキスト装飾部分は「Canvasエレメント」の中でテキストfillStyleをパターン化してfillText()またはstrokeText()でテキストを描画して、Bitmap画像として表示しています。


● Canvasエレメント描画例

「Canvasエレメント」の中でテキストを装飾します。出来上がりは画像同様のものです。下記はアウトラインの文字に画像を入れる場合の例です。画像はcanvasの左上を原点としたテキスト文字の部分に染められます。グラデーション塗りも可能ですが、Safariで描画できないバグがあります。



//Canvasエレメントを作る
var canvas=document.createElement("canvas");
canvas.width=幅;
canvas.height=高さ;
var ctx=canvas.getContext("2d");
//画像
var pattern=ctx.createPattern(画像,"repeat");
ctx.strokeStyle=pattern;
//描画
ctx.font=フォント名;
ctx.textAlign="center";
ctx.textBaseline="middle";
//stroke
ctx.lineWidth=太さ;
ctx.strokeText(文字,X位置,Y位置);

CreateJS Textクラスで画像で染める事が出来ないので、「Canvasエレメント」で染めたテキスト画像を利用する理屈です。ここで陰影も付けられますが、今回は付けていません。
尚、下図のような装飾を一気に全てをCanvasエレメントに描画できますが、ctxは1つですから個別に変更できないために(全て書き替えはできる)、今回は中の要素毎に制御したい為テキスト装飾は部分的に利用しています。


それを適当な位置に他のテキストと共にコンテナでラップしました。


● 画像装飾テキスト1 : OUTLINEでは無いテキストをBitmap()画像化。他のテキストと共にコンテナでラップ。
● 画像装飾テキスト2 : OUTLINEテキストをBitmap()画像化。単体をコンテナでラップ。


通常テキストの上に装飾テキストを配置しているので、画像の種類、透明度などでデザインを少し変化させることが出来る。但し画像なので、色関連の変化は余り行っていない。

余り変化を付けられないので、画像の種類などで旨く性質を利用しての変化をつける。この辺は個人のアイデア次第。


 

トリミングしてテキストに描画

CreateJS「Textクラス」でテキストを画像などで染める機能はまだありませんので、上記の例のごとく「Canvasエレメント」で加工しています。将来は「Textクラス」でも出来るようになると思います。

文章を1文字毎に分解しているので、表示位置で1枚の画像をトリミングしてテキストに描画するが、OUTLINEテキストが大きくなるので其の分修正して合わせる必要がある。


画像のトリミングは原則「整数値」でおこないますが、文字間隔を整数化すると文字の並びが乱れますので、あえて「整数値」でない数値でトリミングしています。その原因でズレが出来る場合があります。


 

画像装飾テキスト1

 

中が3層構造になっているがそれぞれ表示の切り替えが可能です。但し、ブラウザ、FONT、によりますがBitmap()画像と少々のズレが発生します(複合的な原因のためか、背景色によっては余り気にならない事もある)。上のOUTLINEテキストを表示すればズレが隠れて見えなくなります。

ズレ無いように「Canvasエレメント」で2層を合成して描画する方法はありますが、それぞれの層を制御できるように、あえて合成していません。


● LOGOアウトラインテキスト1の初期設定
下記の様に、設定を変更できます。 「色替え」は、アニメーション(Tween)後にテキストの色を変更します。非表示の場合は当然変化はありません。
画像装飾テキストはChromeで陰影がつかないので注意ください。



//LOGOアウトラインテキストアニメ
function set_logoanime() {

	//LOGOテキストアニメーション
	var logotext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;
	var outline_w=2;//アウトライン幅

	//ベース表示,アウトライン表示,陰影
	var base=true;//ベース表示
	var line=true;//アウトライン表示
	var shadow=true;//陰影
	var imgshadow=false;//画像陰影

	//色替え
	var colorChg=false;
	var colortype="rainbow";//rainbow rondam #FF0000

	//画像
	var backimage=assets[14];//アルファチャンネル画像
	//var backimage=assets[1];//普通画像

	//インスタンス配列取得
	//サイズ,フォント,色,アウトライン幅,アウトライン色,虹色,スペース,文字,ベース表示,アウトライン表示,陰影,画像,画像透明度,画像陰影
	textChip2=createMoveLogoText3("80px","Impact","#FF1493",outline_w,"#FFFFFF",true,text_spc,logostring,base,line,shadow,backimage,1,imgshadow);

	略す

}

● 色替え
Tween終了後に「ベーステキスト層」の色を変更します。但し、テキスト層が表示されていなければなりません。
詳細は「前ページ」を参照ください。


画像装飾OutlineテキストLOGOのアニメ、シミュレーションを実行できます。

 

 

画像装飾テキスト2

OUTLINEテキストをBitmap()画像化した1-2層構造で、「画像装飾テキスト1」と違い非常に簡単なものです。
OUTLINEテキストですので、取得できるテキストの大きさより大きく描画されるため其の分、画像を大きくトリミングしてあわせています。

また「W」文字のような場合はFONTの種類によっても違いますが、取得の大きさより、より幅広く描画されるものもありますのでそのための補正も行いました。(画像装飾テキスト1は補正していません)


createMoveLogoText4b()関数、LOGO-テキストインスタンスを作リますが、OUTLINEテキストなので大きく補正しています。(ダミー文字インスタンスで大きさ取得し、リストに加えなければ非表示可能)
「W」文字のための補正は、より画像幅を広げて取得しました。

createImageTextCanvas2b()関数、「Canvasエレメント」で画像を文字に塗りこみます。これもOUTLINEテキストなので大きくしています。



//インスタンス配列取得
//サイズ,フォント,色,アウトライン幅,スペース,文字,陰影色,陰影,画像
textChip2b=createMoveLogoText4b("Bold 50px","Arial","#FF1493",outline_w,text_spc,logostring2,"#000000",shadow,backimage2);

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

//LOGO-テキストインスタンスを作る4/textBaseline中心補正/画像埋め込み
//サイズ,フォント,色,アウトライン幅,スペース,文字,陰影色,陰影,画像
function createMoveLogoText4b(size,font,color,outline_w,space,str,shadowcolor,shadow,img) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//1文字取り出し
		var text=str.charAt(i);

		//コンテナを作る
		var box=new createjs.Container();

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=text;
		t.name="base";
		//幅高さを先に取得する
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//トリミング画像、X、Y、幅、高さ、
		var trimming_img=imageTrimmingCanvas(img,tpos_x+outline_w/2,0,w+outline_w/2,h+outline_w/2,0,0,w+outline_w*2,h+outline_w);//X位置をずらした画像を得る/W文字欠け補正

		//画像埋め込みTEXTcanvasを作る
		//幅、高さ、文字種、サイズ、パタン画像、ストリング
		var img_canvas=createImageTextCanvas2b(w+outline_w,h+outline_w,font,size,outline_w,trimming_img,text);
		//Bitmap表示
		var img_txt=new createjs.Bitmap(img_canvas);

		img_txt.name="image";
		img_txt.regX=(w+outline_w)/2;
		img_txt.regY=(h+outline_w)/2;

		//陰影
		if(shadow) {t.shadow=new createjs.Shadow(shadowcolor,0,0,4);}

		//BOX位置
		tpos_x +=w/2;//half
		box.x=tpos_x;
		box.y=h/2;
		//大きさ重要
		box.width=w;
		box.height=h;

		//位置加算
		tpos_x +=(w/2+space);//half+space

		box.addChild(t,img_txt);

		chip[i]=box;

	}
	//戻り配列
	return chip;
}

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

//画像埋め込みアウトラインTEXTcanvasを作る
//幅、高さ、文字種、サイズ、アウトライン、パタン画像、ストリング
function createImageTextCanvas2b (w,h,font,fsize,outline_w,patternimg,text) {

	var margin=outline_w;//大きさ拡張

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

	var font_v=fsize +" "+ font;

	//画像
	if(patternimg) {
		var pattern=ctx.createPattern(patternimg,"repeat");
		ctx.strokeStyle=pattern;
	}else{
		ctx.strokeStyle="#000000";
	}

	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//stroke
	ctx.lineWidth=margin;
	ctx.strokeText(text,(w+margin)/2-margin/2,(h+margin)/2-margin/2);

	return canvas;
}

アルファチャンネル画像

アルファチャンネル画像を使用すればグラデーション状に透過しますので、下の色テキストなどと重ねると綺麗です。
アルファチャンネル画像がなくとも、「Canvasエレメント」で透過グラデーション画像をつくれますので、装飾が多様になります。(通常画像の透明度を変えた場合の効果は少ない)


透過グラデーション画像(透過白黒)
createLineGradBox()関数を使用すれば、下記の様に「透過グラデーション画像」が作れますので便利です。



var backimage=createLineGradBox(画像幅,画像高さ,"rgba(255,255,255,0)","rgba(0,0,0,1)","rgba(255,255,255,0)","y",2);

画像の使用される領域

テキストが中央よりに表示されても、取り込む画像の位置は、図の様に右上から左方向に使用されます。


 

画像の使用される領域は、画像の右上から左方向に使用されますので、図の様に「テキストが表示される大きさ」の画像が必要になります(少し大きめのほうが良い、使用する位置の調整は可能です)。
画像が小さい場合は文字が欠けたり、表示されませんので注意ください(Safariではエラーになる)。
トリミングは下記の様に行っています。Bitmap()で処理するため、X位置0、Y位置0にします。



createMoveLogoText4b()関数

imageTrimmingCanvas(画像,トリミングX位置,トリミングY位置,トリミング幅,トリミング高さ,X位置0,Y位置0,出来幅,出来高さ)

----------------------------------------------------------------
outlineの幅で大きさを修正する

//トリミング画像、X、Y、幅、高さ、
var trimming_img=imageTrimmingCanvas(img,tpos_x+outline_w/2,0,w+outline_w/2,h+outline_w/2,0,0,w+outline_w*2,h+outline_w);//X位置をずらした画像を得る/W文字欠け補正

画像の透過

テキストに埋め込まれる画像に透明度を設定できますが。効果の程は疑わしいので適当に使用ください。


画像装飾テキストChromeで陰影がつかない

Bitmap()で表示している、画像装飾テキスト単体ではChrome(ChromeエンジンのOpera)で陰影がつかない(他のブラウザはOK、其のうち修正されると思うのですが....)。
但し、下にテキスト層があれば陰影はつくので、本来はテキスト層なしにしたいのが出来ない。


● Chromeで陰影がつかなくとも良い場合はリストからはずす(addChildしない)。



createMoveLogoText4b()関数

box.addChild(t,img_txt);

テキスト層なし
box.addChild(img_txt);

● あるいは、非表示にしておいて後で、表示すればよい。
対象のテキストを簡単に識別できる様に名前をつけておくと簡単である。コンテナ内要素の識別の方法は複数あります。



陰影を付けて一旦非表示にする
//陰影
if(shadow) {t.shadow=new createjs.Shadow(shadowcolor,0,0,4);}
t.visible=false;

表示のためtextshadow2bをコールする
//Tween
for (var i=0; i < textlen; i++) {
	//Tween
	var twn2b=createjs.Tween.get(textChip2b[i])
	.wait(200*i+1000)
	.to({x:textPosx2b[i],y:textPosy2b[i],scaleX:1,scaleY:1,alpha:1},1000)
	.call(textshadow2b)
	.call(finshmove2b);//現在何もしない
}

Tween途中または完了後に表示する
//TEXT陰影処理2b
function textshadow2b() {
	this.getChildByName("base").visible=true;
}

単純に変化させるだけですが、色々な方法があると思います。


OUTLINEテキストの壊れの修正

 

OUTLINEの幅を大きくすれば、「M」などの文字がこわれて「トンガリコーン」状態になりますが、直接「Canvasエレメント」でText描画する際は補正できるようです(「CreateJS Textクラス」はまだ対応していない)。
lineJoinを使用すると、「トンガリ」部分をカットできます。



//画像埋め込みアウトラインTEXTcanvasを作る
//幅、高さ、文字種、サイズ、アウトライン、パタン画像、ストリング
function createImageTextCanvas2b (w,h,font,fsize,outline_w,patternimg,text) {

	var margin=outline_w;//大きさ拡張

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

	var font_v=fsize +" "+ font;

	//画像
	if(patternimg) {
		var pattern=ctx.createPattern(patternimg,"repeat");
		ctx.strokeStyle=pattern;
	}else{
		ctx.strokeStyle="#000000";
	}

	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//stroke
/*
ctx.lineJoin="miter";
ctx.miterLimit=outline_w/2;
*/
	ctx.lineWidth=margin;
	ctx.strokeText(text,(w+margin)/2-margin/2,(h+margin)/2-margin/2);

	return canvas;
}

但し、下のテキストを「CreateJS Textクラス」で作っていて、lineJoin 修正できませんので利用してはいません。


Fontをグラフイックで描画する

Fontアウトラインをグラフイックのパスに変換できれば、色々な問題が解決しますが、現在ブラウザが対応していませんけどCanvas仕様にはありますので、将来は出来る事と思います。
さすれば、マスクも描画も楽になるし、ブラウザ違いの文字の表示位置の違いなども解消されます。(Androidは対応しているのかな?)


まだまだ問題が多い

テキストを画像で装飾することは、CreateJS標準の現在の機能では出来ませんのでまだまだ問題が多い。
細部に色々と粗がありますが、完全に修正など行うにはかなりの期間を要すると思います。
大変と面倒ではあるが、多少は画像で装飾できることは便利です。


使用画像

原則、画像は使用者が用意します。640x100 使用画像はデモページにあります。


当方の参照記事など

「前ページ」画像装飾の無い、OUTLINEテキストアニメーションです。

【参照】当方の記事: CreateJS OUTLINEテキストアニメーション

 

アウトラインではない、通常文字のテキストアニメーションです。

【参照】当方の記事: CreateJS テキストアニメーション ランダム設定のテスト レインボー色(虹色)

Canvasエレメント描画のテキストに関する記事です。画像同様なため拡大した場合の品質はよくない。

【参照】当方の記事: CreateJS Canvasエレメント描画のテキストをBitmapクラスで表示する

【参照】当方の記事: CreateJS Canvasエレメント描画のOutlineテキストをBitmapクラスで表示する



一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


品質が良くありませんが、以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]