POPSブログ

CreateJS 日本語WebフォントとSVGの表示

320

  Category:  javascript2014/08/27 pops 

CreateJSで、日本語Webフォントと Inkscapeで作ったSVGをローダーで読み込み表示します。
easeljs-0.7.1 でのテストです。

 

CreateJS 日本語WebフォントとSVGの表示テスト

今までは、Webフォントを表示していましたが、今回はInkscapeで作ったSVG表示します。まだ対応するブラウザなどもマチマチで問題があるようですが、SVGとWebフォントを表示してみます。


 

DEMO


CreateJS 日本語WebフォントとSVGの表示デモ

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



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>

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


デモのWebフォント@font-face読み込み例


<style type="text/css">
@font-face{ 
	font-family:'WebSubsetFont';
	src:url('/main/asset/popsSubFont.woff') format('woff');
}
</style>

HTML (HTML5)


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

JS

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

今回はSVGなどを適当に作ってテストしたほうが良いと思います。一応以下デモのJSです...


//日本語
//createJS103.js
//SVG表示テスト
//easeljs-0.7.1用

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

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

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

//ロゴテキスト
var logostring="ポップスウェブ工房";

//画像manifestリスト
var manifest=[
{src:"/main/images/textback03.jpg",id:"text"},
{src:"/main/images/textback01.jpg",id:"text"},
{src:"/main/images/textback10.png",id:"text"},
{src:"/main/xml/test-svg01.svg",id:"svg"},
{src:"/main/xml/test-svg02.svg",id:"svg"},
{src:"/main/xml/test-svg03.svg",id:"svg"}
];

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

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


//LOGO-TEXT
var logotextcontainer;
var logotext;
//MOVE-TEXT
var textChip=[];
var textPosx=[];
var textPosy=[];

//読み込み画像URL保存容器
var assets=[];
var loader;
var image_max;

//TextMASKコンテナ
var textMaskbox;
//読み込み画像URL保存容器
var backphotos=[];

var svgfiles=[];
var svgcontainer;
var svgcontainer2;
var svgcontainer3;
var svgImage;
var svgImage2;
var svgImage3;

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

//click-btn
var myhitBtn;

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

var font_name;
var familys=['WebSubsetFont'];

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

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

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

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

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

	//ダミーCanvasTEXT
	dmytext_draw2();

	//svg3
	svgcontainer3=new createjs.Container();
	stage.addChild(svgcontainer3);

	//svg2
	svgcontainer2=new createjs.Container();
	stage.addChild(svgcontainer2);

	//svg1
	svgcontainer=new createjs.Container();
	svgImage=new createjs.Bitmap();
	svgcontainer.addChild(svgImage);
	stage.addChild(svgcontainer);

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

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

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

	},2000);

}

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

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

	//loader EventListener設定、この部分修正
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);

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

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

	var id=event.item.id;
	//エラー無しの画像をassets容器に保存
	//画像選別
	if (id == 'text') {
		//result値
		assets.push(event.result);
	}
	if (id == 'photo') {
		//result値
		backphotos.push(event.result);
	}
	var src=event.item.src;
	if (id == 'svg') {
		//src値
		svgfiles.push(src);
	}
}
//全ての画像読み込み完了
function complete (event) {

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

	//loader Listener削除
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);


	//IEはInkscape陰影OK
	svgImage3=new createjs.Bitmap(svgfiles[2]);
	svgImage3.shadow=shadow;
	svgcontainer3.addChild(svgImage3);

	svgImage2=new createjs.Bitmap(svgfiles[1]);
	svgImage2.shadow=shadow;
	svgcontainer2.addChild(svgImage2);

	svgImage=new createjs.Bitmap(svgfiles[0]);
	svgImage.shadow=shadow;
	svgImage.y=canvasHeight;//Slideする、透明度は制御できない
	svgcontainer.addChild(svgImage);

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

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

		},2000);
	}

}

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

	//
	var twn=createjs.Tween.get(svgImage)
	.to({y:0},1500)
	.wait(500)
	.call(function(){

		//テキストアニメに進む
		set_mainanime();
	});

	//調整
	setTimeout(function() {

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

	},prologue_time);

}

//背景色変更
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() {

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

	//ベース表示,アウトライン表示,陰影
	var base=true;//ベース表示
	var line=true;//アウトライン表示
	var lcolor="#FFFFFF";//アウトライン色
	var shadow=true;//陰影
	var scolor="#000000";//陰影色
	var imgshadow=false;//画像陰影

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

	//画像
	var img=assets[2];//アルファチャンネル画像
	var img_alpha=1;
	var fcolors=["#708090","#BBC8E6","#D2B4BC","#FDDEA5","#20B2AA","#CC7EB1","#F4B3C2","#FF69B4"];
	var fcolor=fcolors[Math.floor(Math.random()*fcolors.length)];

	font_name="WebSubsetFont";
	//font_name="Arial";

	var size="55px";
	//var size="bold 55px";//Arial用


	//インスタンス配列取得
	//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
	textChip=createMoveOutlineTextCanvas_D(100,100,size,font_name,fcolor,lcolor,outline_w,true,text_spc,scolor,shadow,img,img_alpha,imgshadow,logostring,base,line);

	var textlen=logostring.length;

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

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

		//移動左右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=logotextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}
		//文字列の中心から
		if (pattern_no == 4) {
			textChip[i].x=logotext_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();
	}

	//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(finshmove);//現在何もしない
	}

}

//MOVE-画像修飾Outlineテキストインスタンスを作る2
//reg原点中央補正コンテナ収容
//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
function createMoveOutlineTextCanvas_D(CanvasW,CanvasH,size,font,fcolor,lcolor,outline_w,rainbow,space,scolor,shadow,img,imgalpha,imgshadow,str,base,line) {

	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 contna=new createjs.Container();

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

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

		//base原点中央
		t.textAlign="center";
		t.textBaseline="middle";
		if (shadow) {t.shadow=new createjs.Shadow(scolor,0,0,4);}//陰影

		//base表示
		if(!base) {t.visible=false;}

		//位置
		tpos_x +=w/2;//half
		contna.x=tpos_x;
		contna.y=tpos_y;//0

		//fill画像
		var canvas=document.createElement("canvas");
		canvas.width=CanvasW;
		canvas.height=CanvasH;
		var ctx=canvas.getContext("2d");

		//トリミング画像、X、Y、幅、高さ、
		var trimming_img=imageTrimmingCanvas(img,tpos_x,0,CanvasW,CanvasH,0,0,CanvasW,CanvasH);//X位置をずらした画像を得る
		var pattern=ctx.createPattern(trimming_img,"repeat");
		ctx.fillStyle=pattern;
		ctx.font=fontdata;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.globalAlpha=imgalpha;

		if (imgshadow) {set_shadow (ctx,scolor);}//陰影
		//fill
		ctx.lineWidth=outline_w;
		ctx.fillText(text,CanvasW/2,CanvasH/2);
		var img_txt=new createjs.Bitmap(canvas);
		img_txt.name="image";
		//原点中央
		img_txt.regX=CanvasW/2;
		img_txt.regY=CanvasH/2;

		//line
		var canvas=document.createElement("canvas");
		canvas.width=CanvasW;
		canvas.height=CanvasH;
		var ctx=canvas.getContext("2d");
		ctx.strokeStyle=lcolor;
		ctx.font=fontdata;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.lineJoin="miter";
		ctx.miterLimit=outline_w/2;

		if (shadow) {set_shadow (ctx,scolor);}//陰影
		//stroke
		ctx.lineWidth=outline_w;
		ctx.strokeText(text,CanvasW/2,CanvasH/2);
		var line_txt=new createjs.Bitmap(canvas);
		line_txt.name="line";
		//原点中央
		line_txt.regX=CanvasW/2;
		line_txt.regY=CanvasH/2;
		//base表示
		if(!line) {line_txt.visible=false;}

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

		contna.width=w;
		contna.height=h;
		//contna.addChild(base_txt,img_txt,line_txt);
		contna.addChild(t,img_txt,line_txt);

		//コンテナ
		chip[i]=contna;
	}
	//戻り配列
	return chip;
}

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

//TEXT陰影処理1
function textshadow() {
	//
}

//色替
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 () {
	//
}

//reset_text
function reset_text() {

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

	//Slideのため移動
	svgImage.y=canvasHeight;
	//コンテナの中を削除
	logotextcontainer.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;
}

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

//Textに陰影Blur4
function set_shadow (ctx,color) {

	//RGB変換
	rgbArr=toRgb(color);

	//Textに陰影
	//影の色オフセット距離ぼかし量
	//ctx.shadowColor="rgb(0,0,0)";

	//Graphics.getRGB利用した
	ctx.shadowColor=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]);//OK
	ctx.shadowOffsetX=0;
	ctx.shadowOffsetY=0;
	ctx.shadowBlur=4;//3-5
}

//変換は配列で返す
function toRgb(bc) {
	bc=bc.replace("#","");
	var rgbArr=[];
	rgbArr[0]=parseInt(bc.slice(0,2),16);
	rgbArr[1]=parseInt(bc.slice(2,4),16);
	rgbArr[2]=parseInt(bc.slice(4,6),16);
	return rgbArr;
}

//トリミング画像、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;
}

//ダミーテキスト処理2
function dmytext_draw2() {

	//canvas用
	var canvas=document.createElement("canvas");
	canvas.width=10;
	canvas.height=10;
	var text="E";
	for (var i=0; i < familys.length; i++) {
		var ctx=canvas.getContext("2d");
		ctx.fillStyle="#FFFFFF";
		ctx.font="1px "+ familys[i];
		ctx.fillText(text,0,0);
	}
}

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

//START
onload=init;

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


CSS

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


/*日本語 createJS103.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;
}
.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

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


 

簡単な説明


[説明図]

 

SVGの読み込み

画像同様ですから、読み込みは簡単ですがSVGの加工(種類と言うべきか)次第では、ブラウザにより表示しませんので其の点が厄介です。


1. SVGはCreateJS Bitmapクラスで表示可能です。
2. SVGのフィルター処理によってはまだ表示出来ないブラウザがあります。確認の必要がある。
3. Inkscapeの陰影処理した、SVGを表示出来ないので(IEは表示する)、 CreateJSで陰影をつけるが、複数要素をまとめると、付き方がブラウザでバラバラなのでこの点旨く対応する。(気になる、なら無いは個人の判断)
4. 原則、SVGを画像化することはセキュリティの関係で出来なくなっています。
(画像化できれば、画像処理や、Fadeなどエフェクトの応用につながる)
5. まだ、SVGを使用するには「時期尚早」の感がイガメマセン。時間経過と共にブラウザでの対応が増え問題が少なくなると思いますが...


SVGをBitmapクラスで表示

htmlでは、SVGを<img>で表示出来ます。CreateJSの内部処理は違いますが、画像表示と同様な訳です。


● CreateJS Bitmapクラス使用
読み込めば表示するが、表示以外に色々な処理など行う場合は「読み込み完全終了」後行う。この点画像読み込みと同じである。

但し、平行するその他の処理で負荷が大きい時は「読み込み表示」が安定しないようです。特にIE系は不安定なので、ローダーを介して「読み込み完全終了」後に表示した方が良いと思われる。



インスタンス=new createjs.Bitmap(SVGのURL);

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

var image_svg=new createjs.Bitmap("svgfolder/xxx.svg");

● JavaScript new Image()使用



ローダー=new Image();
ローダー.src=SVGのURL;

ローダー.onload=function() {
	インスタンス=new createjs.Bitmap(ローダー);
}

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

var svgloader=new Image();
svgloader.src="svgfolder/xxx.svg";

svgloader.onload=function() {
	var svgImage=new createjs.Bitmap(svgloader);
}

LoadQueue()を使用する場合

画像と同様に扱ってローダーで読み込むが「保存値」が画像と若干違いがある。完全に読み込んでからの処理なので問題が出難いと思います。(画像と違い、余り加工処理はしないかな?)
画像は event.result値 を保存するが、SVGは src値 を保存する違いがあるだけです。

画像と共に読み込むなどが多いと考えられるので、以下は「デモ」の例である。


● リストとローダー



//読み込み画像 URL保存容器
var assets=[];
//読み込みSVG URL保存容器
var svgfiles=[];
//ローダー
var loader;

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

//画像manifestリスト
var manifest=[
{src:"/main/images/textback03.jpg",id:"text"},
{src:"/main/images/textback01.jpg",id:"text"},
{src:"/main/images/textback10.png",id:"text"},
{src:"/main/xml/test-svg01.svg",id:"svg"},
{src:"/main/xml/test-svg02.svg",id:"svg"},
{src:"/main/xml/test-svg03.svg",id:"svg"}
];

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

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

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

	//loader EventListener設定、この部分修正
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);

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

}

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

	var id=event.item.id;
	//エラー無しの画像をassets容器に保存
	//画像選別
	if (id == 'text') {
		//result値
		assets.push(event.result);
	}
	var src=event.item.src;
	if (id == 'svg') {
		//src値
		svgfiles.push(src);
	}
}
//全ての画像読み込み完了
function complete (event) {

	//loader Listener削除
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);

	必要な処理を書く

}

「デモ」では「id」で判定しましたが、SVGファイルの判定方法は他にもあります。


● Bitmap()表示

画像で無いため、透明度(Fade)は制御できないがその他は同じのようである。下記では保存値を Bitmap() に代入して addChild している。

画像でないので「加工処理」など制約があると思うが詳細はテストしていない。現在、表示のみのテストです。



svgImage=new createjs.Bitmap(svgfiles[0]);
svgcontainer.addChild(svgImage);

● 画像同様に、先に空のBitmap()を配置しての、以下の記述処理でも表示できる。



var svgcontainer;
var svgImage;

空Bitmap()を配置
svgcontainer=new createjs.Container();
svgImage=new createjs.Bitmap();
svgcontainer.addChild(svgImage);
stage.addChild(svgcontainer);

Bitmap()にSVGを入れる
svgImage.image=new createjs.Bitmap(svgfiles[0]).image;

.svg拡張子の無いファイルの読み込み

PreloadJS LoadQueue()では「.svg拡張子の無いファイル」は読み込めないようですが、JavaScript new Image()を使用すれば読み込めます。



var svgloader=new Image();
svgloader.src="http://jsrun.it/assets/w/f/2/f/wf2fN";

svgloader.onload=function() {
	var svgImage=new createjs.Bitmap(svgloader);
}

この部分、以下記事を参考にしました、アニメSVGは現在 Chrome Firefox でのみ動くようです。

【参考】jsdo.it記事 : animateTransform している SVG 要素を EaselJS で読み込むテスト


Shadowクラスで陰影をつける

Shadowクラスで陰影をつける場合、図の様にSVGをまとめて描画して陰影処理したいのだが、ブラウザによって陰影の付き方が違うので、デモではSVG要素毎に複数に分けて作り、SVG要素毎に陰影処理した。(以外に大変です)
SVGをまとめて、Inkscapeの陰影フィルター処理をした場合は、ブラウザによりフィルターに対応していなく、SVG非表示の状態になってしまう(読み込み失敗かの判断に迷うので非常に困る)。
時間経過と共に、ブラウザで対応して行くとは思うが、履歴など消去してのブラウザ確認作業が大変である。


SVGを画像化することはセキュリティの関係で出来ない

SVGを画像化することはセキュリティの関係で出来ない仕組みになっていますが、ライブラリーJSなど利用すれば、DL形式で画像取得できるようでが省略します。


テスト的に画像化のためにSVG表示のキャッシュを取り、getCacheDataURL() を実行すれば「セキュリティエラー」で処理しません。つまりSVGを画像化出来ないと言う訳です。


ステージを toDataURL() でキャプチャーした場合に Chrome Firefox で画像化出来ますが、セキュリティの関係で今後どうなるかは判りません。

Chrome Firefoxのみ「 ステージ画像化デモ


SVGを読み込まない場合

サーバーによっては、SVGファイルの読み込みを行わない場合がありますので、.htaccessファイルにSVGファイル読み込みを追加する必要があります。当方もそうでしたが、サーバーによっては違いがあるかも知れませんのでその辺は適切に対処ください。


.htaccessファイルに追加


AddType image/svg+xml .svg
AddType image/svg+xml .svgz

一応、SVG表示だけのテストでした、本格的に利用するには何年か先のようです。
まあ、ベクターを扱えるので便利ですが......



日本語Webフォント、テキストアニメーション

ここでは説明など省略します。前ページを参照ください。


● 日本語Webフォントを利用せず、通常の Arial にする場合は以下修正します。



HTML Webフォント@font-face読み込みを削除する

<style type="text/css">
@font-face{ 
	font-family:'WebSubsetFont';
	src:url('/main/asset/popsSubFont.woff') format('woff');
}
</style>

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

修正を無効にする

//ダミーCanvasTEXT
//dmytext_draw2();

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

フォントをArialにする

//font_name="WebSubsetFont";
font_name="Arial";

//var size="55px";
var size="bold 55px";//Arial用

画像

原則、使用者が用意ください。640x100画像1枚、640x300SVG3枚、デモ使用の画像は「デモページ」にあります。


日本語Webフォントの表示は、下記、当方記事を参照ください。

【参照】当方の記事: CreateJS 日本語Webフォントの表示



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

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


 

以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]