POPSブログ

CreateJS 3D Carousel もどき、とテキストの組み合わせ

274

  Category:  javascript2014/01/23 pops 

3D Carousel もどき、テキスト挿入形で、「2D」で作成しています。円周上に配置したインスタンスを回転させますが、回転する通常のサークルテキストとしても使用出来ます。
ブラウザにより配置の文字にズレが生じるので簡単に補正処理をしました。
easeljs-0.7 でのテストです。

 

CreateJS 3D Carousel もどき、とテキストの組み合わせテスト


3D Carousel 部分を簡素化しましたので、Reflection (鏡面効果)は有りません。
ブラウザにより文字位置にズレが生じるので、如何に修正するかがポイントになります。
下図の様に円形「放射状」表示も可能です。


 

DEMO


CreateJS 3D Carousel もどき、とテキストの組み合わせ テスト、(createJS059.js)

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


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.0.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

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


//日本語
//createJS059.js
//Carouselテキストデモ4
//easeljs-0.7用

//--------------------------------------------------------------
//firefox opera判定
var userAgent = window.navigator.userAgent.toLowerCase();
var firefox=false;
if (userAgent.indexOf("firefox") > -1) {firefox=true;}
var opera=false;
if (userAgent.indexOf("opera") > -1) {opera=true;}
//--------------------------------------------------------------

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

//ベーステキスト
var basestring="赤マムシ 生タマゴを 世界遺産に! ";
var basetext_color="#FFFFFF";
//文字を虹色にする true false
var rainbowSet=false;
var font_size="30px";//XXpx
var font_name="Arial";//Arial
//半角スペースを非表示にする true false
var spaceHidd=false;//false
//文字を逆順にする true false
var reversalText=false;//false

//itemBOXの大きさ
var itemWidth=40;
var itemHeight=40;
//Circleパーツの場合の半径
var circle_radius=20;

//carouselの色
var carouselbackcolor="#FFFFFF";

//split分割数自動修正 3以上
var carouselsplit=12;

//半径
var radiusX=180;//X方向
var radiusY=80;//Y方向

//回転速度 デグリー値1-5
var angle=2;//DEG
//正転逆転フラグ 右正転=1 左逆転=-1
var carouselflag=-1;
//マウスイベントの使用 true false
var eventUse=true;
//コンテナ角度
var containerAngle=0;
//パーツ角度
var partsAngle=0;
//パーツ角度を放射状に合わせる true false
angleflag=false;
//背景を虹色にする不透明 true false
var rainbowColor=true;
//基本スケール
var stScale=1;

//始点の角度
var startAngle=-Math.PI/2;

//テキスト使用
var textUse=true;

//--------------------------------------------------------------
//split分割補正
carouselsplit=basestring.length;
//文字を逆順に補正/反転.逆順 Reverse order reversal
if (reversalText) {basestring=reverseText(basestring);}
//回転正逆補正
angle *=carouselflag;
//to-RAD
var rotate_angle=angle*createjs.Matrix2D.DEG_TO_RAD;
var plusAngle=-Math.PI/2;
//--------------------------------------------------------------

var stage;
var carouselContainer;
var viewtext;

//matrix
var matrix=new createjs.Matrix2D();
var chip=[];
var innerchip=[];
var textChip=[];
var stopNo=1;

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

function init() {

	stage=new createjs.Stage("mainCanvas");
	//MouseOver設定/必要に応じ設定
	stage.enableMouseOver(20);

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

	//空コンテナインスタンス配置
	carouselContainer=new createjs.Container();
	carouselContainer.x=canvasWidth/2;
	carouselContainer.y=canvasHeight/2;
	stage.addChild(carouselContainer);

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

	//TEXT
	set_text("Carousel Text");

	//画像表示に進む
	carousel_set();

}

//組み立て
function carousel_set() {

	//パーツを配置してBaseを作る/Bitmap画像
	set_baseCircle();

	//コンテナを傾ける
	carouselContainer.rotation=containerAngle;

	//Listener
	createjs.Ticker.setFPS(40);
	createjs.Ticker.addEventListener("tick",carousel_rotate);

	//マウスイベントの使用
	if (eventUse) {
		stage.addEventListener("stagemousemove",setAngle);
	}

}

//マウスアクション
function setAngle(event) {
	var mouseX=event.stageX;
	angle=(mouseX-canvasWidth/2)*1/50;
}

//Ticker
function carousel_rotate(event) {

	var count=carouselsplit;

	//加算
	plusAngle +=(angle*createjs.Matrix2D.DEG_TO_RAD);

	//描画データ
	var cx,cy;
	var cAngle=startAngle;
	var nAngle=0;

	//描画位置
	nAngle=Math.PI*2/count;
	var chipflag=1;
	var parts_angle=0;

	//保存POSITION配列
	var posArr=[];
	//SORT用POSITION配列
	var zArr=[];
	//透明度用配列
	var alphaArr=[];

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

		//回転
		cAngle +=nAngle;

		cx=Math.cos(cAngle+plusAngle)*radiusX;
		cy=Math.sin(cAngle+plusAngle)*radiusY;

		//alpha-Data計算
		alphaArr[i]=(1+cy/radiusY)/2;

		//配置角度取得
		parts_angle=Math.atan2(cy,cx);

		//パーツ角度補正rotateflag
		if (angleflag) {
			//放射状
			var angle_r=Math.PI/2+cAngle+plusAngle+partsAngle*createjs.Matrix2D.DEG_TO_RAD;
		} else {
			//水平
			var angle_r=partsAngle*createjs.Matrix2D.DEG_TO_RAD;
		}

		//伸縮1 Xスケールで向きを変える
		var scl=Math.cos(parts_angle+Math.PI/2)/Math.cos(Math.PI);//Xスケール
		//var scl=Math.cos(parts_angle+Math.PI/2);//Xスケール反対向き
		//伸縮2 遠近感を付ける
		var sclxy=(Math.abs(Math.cos(parts_angle/2-Math.PI/4)/Math.cos(Math.PI))+1)/2;
		//position段階計算
		var a_v=1+(cy*0.25)/radiusY;
		posArr[i]=a_v;

		//sort-DATAを保存
		var id=chip[i].id;
		//オブジェクトで保存
		zArr.push({'id':id, 'position':cy});

		//matrix
		matrix.identity();
		//順序重要
		matrix.rotate(angle_r);

		//伸縮1実行
		//matrix.scale(scl*stScale,stScale);
		//伸縮2実行
		//matrix.scale(sclxy*stScale,sclxy*stScale);
		//position段階スケール実行
		//matrix.scale(posArr[i]*stScale,posArr[i]*stScale);
		//基本スケール実行
		matrix.scale(stScale,stScale);

		//位置をずらす
		matrix.translate(cx,cy);
		matrix.decompose(chip[i]);

	}

	//配列をソート/positionの昇順にsort
	zArr.sort(function(a,b) {
		var x=a.position;
		var y=b.position;
		return x > y ? 1 : -1;}
	);
	//INDEX alpha修正
	for (var i=0; i < zArr.length; i++){
		var idno=zArr[i].id;
		//Index
		carouselContainer.setChildIndex(chip[idno],i);
		//alpha
		//chip[idno].alpha=alphaArr[idno]+0.2;
	}

	//その他の処理 update
	draw_carousel();

}

//update
function draw_carousel() {
	stage.update();
}

//base
function set_baseCircle() {

	//パーツの大きさ
	var parts_w=itemWidth;
	var parts_h=itemHeight;
	//alpha
	var alphaback=1;
	//数
	var count=carouselsplit;

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

		//図形用インスタンス配置
		chip[i]=new createjs.Container();
		chip[i].id=i;
		var space=false;

		//Shape
		innerchip[i]=new createjs.Shape();
		//chip[i].shadow=shadow;//shadow重い

		//RoundRect
		graphicRoundRect2(innerchip[i],-parts_w/2,-parts_h/2,parts_w,parts_h,8,carouselbackcolor,rainbowColor,count,i);
		//Rect
		//graphicRect2(innerchip[i],-parts_w/2,-parts_h/2,parts_w,parts_h,carouselbackcolor,rainbowColor,count,i);
		//Circle
		//graphicCircle2(innerchip[i],0,0,circle_radius,carouselbackcolor,rainbowColor,count,i);

		//文字
		str=basestring.charAt(i);
		if (str == ' '){space=true;}//半角スペース

		//サイズ,フォント,色,虹色,スペース,文字,数,カウント
		textChip[i]=createRingText(font_size,font_name,basetext_color,rainbowSet,str,count,i);

		//addChild
		chip[i].addChild(innerchip[i],textChip[i]);
		carouselContainer.addChild(chip[i]);
		if (spaceHidd) {
			if (space) {chip[i].visible=false;}
		}
	}

}

//テキストインスタンスを作る、ズレ補正
function createRingText(size,font,color,rainbow,str,len,i) {

	if (font=="") {font="Arial"}
	var fontdata=size + " " + font;

	//文字インスタンスを作る
	var t=new createjs.Text("",fontdata,color);
	t.textAlign="center";
	t.textBaseline="middle";
	//1文字入れる
	t.text=str;

	//firefox補正
	if(firefox) {t.y=1;}
	//opera補正、英数字=-1 漢字=-3
	if(opera) {t.y=-2;}

	//shadow2多少重い
	t.shadow=shadow2;

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

//文字を逆順に並び替え
function reverseText (str) {
	var text=str.split("").reverse().join("");
	return text;
}

//RoundRect Graphics
function graphicRoundRect2(s,x,y,w,h,r,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	//s.graphics.clear();
	s.graphics.ss(1).s("#555555");//LINE
	s.graphics.beginFill(c);operaRoundRect(s,x,y,w,h,r);//FILL
}

//Rect Graphics
function graphicRect2(s,x,y,w,h,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	//s.graphics.clear();
	s.graphics.ss(1).s("#555555");//LINE
	s.graphics.beginFill(c).drawRect(x,y,w,h);//FILL
}

//Circle Graphics
function graphicCircle2(s,x,y,r,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	//s.graphics.clear();
	s.graphics.ss(1).s("#555555");//LINE
	s.graphics.beginFill(c).drawCircle(x,y,r);//FILL
}

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

//VIEWTEXT
function set_text(t) {
	if (textUse) {
		viewtext.text=t;
		stage.update();
	}
}

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

init();

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


CSS

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


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

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


簡単な説明


[説明図]

 

3D Carouselにテキストを挿入しています。回転する通常の図形サークルテキストとしても使用できます。インスタンスが重なってもキレイなのが特徴です。
3D Carouselの詳細部分は「前々ページ」等を参照下さい。


1. Reflection は有りません。(作ることは可能だが必要が無い)
2. テキストは原則「Arial」を指定します。
3. ブラウザによりテキスト位置が若干ズレますので、簡単な補正処理をしている。
文字が図形の中心に無いと大変見苦しい
4. インスタンスの大きさの変数が他のものと違っていますので注意下さい。
5. 赤マムシ 生タマゴ を配合しましたので精力的に動いてくれると信じています。
6. 一応 easeljs-0.7.1でも可動します。


【参照】当方の記事: CreateJS 3D Carousel もどき、Matrix2Dで円周上に配置したインスタンスを回転させる


インスタンスの大きさの変数が違います

以前のものは、外周配置インスタンス(画像など)の大きさが imageWidth imageHeight でしたが、都合により
この「デモ」では CarouselBOX の大きさ、itemWidth itemHeight になっていますので注意下さい。
その他テキストに関する設定も追加されています。


水平状と放射状

Carouselは、インスタンス要素を「水平状」にして「だ円形配置」にした方がキレイですが、「円形配置」の場合は「放射状」にする事が可能です(サークルテキスト)。その時の状況に応じて設定出来ます。


1.「水平状」は遠近感を付けた方が3Dらしく表現出来る(段階スケール)。
2.「放射状」は遠近感を付け無い方が見栄えが良い(標準スケール)。
(但し、必ずしも円形とは限らない、横長であれば自由な半径の設定は可能です)
3. インスタンス要素毎に角度を付ける事が出来ますが、文字が読み難く成ります。
4. 色々な設定は全て共通ですが、合う合わないが有りますので、「デモ」で確認下さい。
5.「放射状」は円形のためコンテナの角度を変えても変変化は有りません。


「段階スケール」等の呼称は適当に付けた名前です。



初期は「水平状」です

//パーツ角度を放射状に合わせる true false
angleflag=false;

インスタンス要素の形

インスタンス要素の形は RoundRect Rect Circleの記述をしています。初期状態では RoundRect です。変更は自由ですし別の図形を描画する事も可能です。
RoundRectの赤字の数値はコーナー半径です


//RoundRect
graphicRoundRect2(innerchip[i],-parts_w/2,-parts_h/2,parts_w,parts_h,8,carouselbackcolor,rainbowColor,count,i);
//Rect
//graphicRect2(innerchip[i],-parts_w/2,-parts_h/2,parts_w,parts_h,carouselbackcolor,rainbowColor,count,i);
//Circle
//graphicCircle2(innerchip[i],0,0,circle_radius,carouselbackcolor,rainbowColor,count,i);

● インスタンス要素のLINE

インスタンス要素のLINEは次の様になっていますので、LINE幅、色など変更出来ます。


//RoundRect Graphics
function graphicRoundRect2(s,x,y,w,h,r,color,rainbow,len,no) {

	略す

	s.graphics.ss(1).s("#555555");//LINE
	s.graphics.beginFill(c);operaRoundRect(s,x,y,w,h,r);//FILL
}

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

LINE幅、色など変更

s.graphics.ss(3).s("#FFFFFF");//LINE

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

LINEを付けない

//s.graphics.ss(1).s("#555555");//LINE

文字のShadowフィルター

インスタンス要素の文字は、見え難い場合も有りますので文字にShadowフィルター処理をすれば良い。
多少重くなるので、文字の見え易い範囲で少々のShadowフィルターをかければ良いと思う。


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

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

//テキストインスタンスを作る
function createRingText(size,font,color,rainbow,str,len,i) {

	略す

	//shadow2多少重い
	t.shadow=shadow2;

	略す

}

遠近感を出すためスケール変更

Carouselの場合、遠近感を出すためスケール変更(算出式は自由)を行なっています。
初期設定では、奥は小さく手前は大きく表示します。下記の数値変更で若干は調整可能です。


//position段階計算
var a_v=1+(cy*0.25)/radiusY;
posArr[i]=a_v;

Carousel配置半径の設定

原則、横方向(X方向)を縦方向(Y方向)より大きく半径を設定するように出来ていますので、反対にはしないで下さい。
インスタンス要素の重なり具合が合わなくなる場合があります。原則横長。
縦方向(Y方向)は、0以上の半径の事、マイナスの半径も設定は可能です。


//半径
var radiusX=180;//X方向
var radiusY=80;//Y方向

インスタンス要素数など

インスタンス要素の大きさ、マシン環境などで動作が違って来ますので、ある程度は軽快な数で抑えてください。Flashに比べて処理能力が有りませんので注意下さい。


数が多く、重なりの見栄えが良くない場合は、
● 基本スケールで表示の大きさを小さく調整する。
● 半径を大きくしてゆとりを持たせる、......等の調整を行なってください。


「基本スケール」値を変更した場合の状況を「デモ」で確認できます。


マウスイベントを使用しない場合

テキストが挿入されていますので、読み易くするには回転の方向(左、右)が重要に成ります。
下記、設定を旨く調整します。マウスイベントを使用する場合は関係有りません。


1.回転速度で調整する。(マイナスの値でも逆転する)
2.正転逆転フラグで調整する。原則こちらを使用します。
3.文字を逆順にすることによっても可能です。



//文字を逆順にする true false
var reversalText=false;//false

//回転速度 デグリー値1-5
var angle=2;//DEG
//正転逆転フラグ 右正転=1 左逆転=-1
var carouselflag=-1;

インスタンスのスケール変更など


個別にインスタンスのスケール変更などにより「方向」「透明度」を変えたりが可能です。


初期では、「基本スケール実行」になっています。JS先頭での切り替えはしませんので、必要な設定をして下さい。
計算方法、Matrix2D、の変更などは自由です。伸縮1の2番目はテキストが反対向き(裏返し)になります。
呼称はダイタイの意味です。それぞれの相違は「デモ」で確認下さい。


1.「水平状」は殆んどスケール変更が出来る。
2.「放射状」は「標準スケール」以外は余り合わない。
(但し、必ずしも円形とは限らない自由な半径の設定は可能です、原則横長で)


● スケール関連

スケール等を徐々に変化させて遠近感などを出しています。
「基本スケール」の変更で、インスタンス図形、文字のサイズなどの設定を変えず伸縮可能です。


基本スケール

//基本スケール
var stScale=1.0;

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

計算

//伸縮1 Xスケールで向きを変える
var scl=Math.cos(parts_angle+Math.PI/2)/Math.cos(Math.PI);//Xスケール
//var scl=Math.cos(parts_angle+Math.PI/2);//Xスケール反対向き

//伸縮2 遠近感を付ける
var sclxy=(Math.abs(Math.cos(parts_angle/2-Math.PI/4)/Math.cos(Math.PI))+1)/2;

//position段階計算
var a_v=1+(cy*0.25)/radiusY;
posArr[i]=a_v;


//伸縮1実行
//matrix.scale(scl*stScale,stScale);

//伸縮2実行
//matrix.scale(sclxy*stScale,sclxy*stScale);

//position段階スケール実行
//matrix.scale(posArr[i]*stScale,posArr[i]*stScale);

//基本スケール実行
matrix.scale(stScale,stScale);

計算式の変更などは自由です。


● 透明度関連

最後の数値を変えると、上方(遠方)の透明度を合わせることが可能です。初期状態では設定していません。


	//INDEX alpha修正
	for (var i=0; i < zArr.length; i++){
		var idno=zArr[i].id;
		//Index
		carouselContainer.setChildIndex(chip[idno],i);
		//alpha
		//chip[idno].alpha=alphaArr[idno]+0.2;
	}

● ブラー関連

ぼかし処理も可能と思いますが?、実際に処理はしていません。キャッシュしなければならないので抵抗がある。
そのため「上記」の様に透明度で変化させた。


文字について

文字等の策定はまだ完全ではなく、ブラウザにより解釈の相違で違いが出ます。(将来直るかは不明)
ここで「1文字挿入」の問題点は、ブラウザにより「文字Y位置」が微妙に違うので注意が必要です。
完全に合わせるには、ブラウザ判別をして個々に中心位置を補正する方法で行なうしかないが、このJSでは簡単な補正を行なっています。


文字関係の設定などは以下の通りです。


1. 文字は 漢字 も使用可能です。fontは Arial が無難と思います。
2. 半角スペースは1つの文字といて扱い、図形を描きます。
3. 半角スペース部分を非表示にする事が可能です。
4. Carousel回転に合わない場合は、文字列を反転(逆順)にする事が可能です。
5. 文字の大きさは、図形より小さくして下さい。(ブラウザによりズレが在るため)


簡単なズレ補正処理

ブラウザにより「文字Y位置」が微妙に違うが、通常の「英数字」、「漢字」によっても違ってくるし、Textクラス設定次第でも違いが出る始末であるから面倒である。
図形の上に文字を表示している為、余りにも見苦しいので簡単な補正処理をする


1. 1文字挿入形式なので、textAlign "center"、textBaseline "middle"、を利用して中央補正する。
(注意、regX regY は機能しなくなります)
2. これでも全てのブラウザで正確に中央に配置される訳ではないので、ブラウザ単位でまた補正を行なう。
3. X方向はどのブラウザでも正確であるが、Y方向が狂う。
4.「英数字」「漢字」でも違いがでるが、文字を判別するのは省略する。(参考として方法を記載)
5.「英字」の小文字は補正しても中央には成りませんので了解下さい。
6. インスタンスの中に図形グラフイックを描かない場合はズレ補正無でも使用は可能。


Operaで「英数字」「漢字」で少し違いがあるが、Operaでのアクセスは非常に少ないので暫定的にこれで良しとする。
AS3はブラウザを意識せずにすむが、Canvasではそうは行かない。実に困った事である。

「英数字」「漢字」を判別して修正する場合は、参考として次ぎに記す。


● 簡易補正処理(英数字判別はしない)


//firefox opera判定
var userAgent = window.navigator.userAgent.toLowerCase();
var firefox=false;
if (userAgent.indexOf("firefox") > -1) {firefox=true;}
var opera=false;
if (userAgent.indexOf("opera") > -1) {opera=true;}

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

//テキストインスタンスを作る、ズレ補正
function createRingText(size,font,color,rainbow,str,len,i) {

	if (font=="") {font="Arial"}
	var fontdata=size + " " + font;

	//文字インスタンスを作る
	var t=new createjs.Text("",fontdata,color);
	t.textAlign="center";
	t.textBaseline="middle";
	//1文字入れる
	t.text=str;

	//firefox補正
	if(firefox) {t.y=1;}
	//opera補正、英数字=-1 漢字=-3
	if(opera) {t.y=-2;}

	//shadow2多少重い
	t.shadow=shadow2;

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

Opera補正は「英数字判別」をしないで、暫定値 -2 で補正している。


● 英数字判別ズレ補正(参考)

上記の、Opera補正では 英数字 漢字 の区別をしないで 中間値-2 で補正しているが、「英数字判別」で正確に補正するならば、次の様になる。


//firefox opera判定
var userAgent = window.navigator.userAgent.toLowerCase();
var firefox=false;
if (userAgent.indexOf("firefox") > -1) {firefox=true;}
var opera=false;
if (userAgent.indexOf("opera") > -1) {opera=true;}

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

//テキストインスタンスを作る、英数字判別ズレ補正
function createRingText(size,font,color,rainbow,str,len,i) {

	//英数字判別/trueを返す
	var eisuu=isEisuu(str);

	if (font=="") {font="Arial"}
	var fontdata=size + " " + font;

	//文字インスタンスを作る
	var t=new createjs.Text("",fontdata,color);
	t.textAlign="center";
	t.textBaseline="middle";
	//1文字入れる
	t.text=str;

	//firefox補正
	if(firefox) {t.y=1;}

	//opera補正、英数字=-1 漢字=-3
	if(opera) {
		t.y=-3;
		if(eisuu) {t.y=-1;}
	}

	//shadow2多少重い
	t.shadow=shadow2;

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

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

//英数字判別
function isEisuu(c){
	var unicode=c.charCodeAt(0);
	if (unicode < 256 || (unicode >= 0xff61 && unicode >= 0xff9f)){
	return true;
	} else {return false;}
}

Opera以外でも「英数字判別」するならば同様の処理をすれば全て正確に揃う。


● 補正処理をしない形(参考)

テキストの幅、高さを取得して原点中央に regX regY 補正しているが、ブラウザによりバラバラである。

補正をする場合は、上記の補正より面倒になる。


//テキストインスタンスを作る
function createRingText(size,font,color,rainbow,str,len,i) {

	if (font=="") {font="Arial"}
	var fontdata=size + " " + font;

	//文字インスタンスを作る
	var t=new createjs.Text("",fontdata,color);
	//1文字入れる
	t.text=str;
	//幅高さ取得
	var w=t.getMeasuredWidth();
	var h=t.getMeasuredHeight();
	//受け渡し用
	t.width=w;
	t.height=h;
	//原点中央テキストのみ重要
	t.regX=w/2;
	t.regY=h/2;

	//shadow2多少重い
	t.shadow=shadow2;

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

ズレ補正処理に関しては(若干違うが)、次ぎの記事にも記載しています。

【参照】当方の記事: CreateJS テキスト背景に図形を挿入して(MotionGuide Tween)テキストアニメーションのテスト


これらの改造などは自由です。



 

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

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


文字ズレには悩まされる... 以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]