POPSブログ

CreateJS 3D風TEXT文字Carousel表示(easeljs-0.8)

343

  Category:  javascript2015/03/10 pops 

円周上に配置したインスタンスを回転させる 3D Carousel もどきですが「2D」で作成し中に図形と文字を挿入しています。回転中に文字がぶれていましたがTEXT文字を画像化して修正しています。
easeljs-0.8でMatrix2Dクラスに変更がありましたので修正します。

 

CreateJS 3D風TEXT文字Carousel表示(easeljs-0.8)テスト


これは、3D風Carouselであり、実際は2Dです。基本的な構造などは「前々ページ」のものを改造したものです。
以前のeaseljs-0.7のものはeaseljs-0.8で一部正常に動作しないので修正しています。
また少々機能なども追加しました。


zu

 

DEMO (easeljs-0.8)


CreateJS 3D風TEXT文字Carousel表示(easeljs-0.8)テスト、(createJS125.js)

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


demo


シミュレーション表示

demo


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.8.0.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.6.0.min.js"></script>

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


HTML (HTML5)


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

JS

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



//日本語
//createJS125.js
//テキスト文字Carousel/position2追加
//easeljs-0.8.0 デモ用

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

//初期設定

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

//ベーステキスト/区切りは半角スペース
var basestring="赤マムシ 生タマゴを 世界遺産に! ";
var basetext_color="#FFFFFF";
//文字を虹色にする true false
var rainbowText=false;

var font_size="30px";//XXpx
var font_name="Arial";//Arial
//半角スペースを非表示にする true表示 false非表示
//true表示でベースを作る
var spaceHidd=true;//true
//文字を逆順にする true false
var reversalText=false;//false
//文字に陰影を付ける true false
var textShadow=true;

//アイテムの大きさ
var itemWidth=40;
var itemHeight=40;

//Baseの形 round rect circle none
//noneはベース無し/round推奨
var baseType="round";
//角丸の半径1以上、0はエラー
var round_radius=10;//4-6
//textを画像に変換して使用する
//文字がぶれない/none以外
var textImageUse=true;

//carouselの色
//ライン
var carousellinecolor="#FFFFFF";
//base/rgba(0,0,0,0.2)
var carouselbackcolor="#48D1CC";
//baseを虹色にする true false
var rainbowColor=true;

//base枠の幅/ラインは1以上の場合
var base_W=2;
//base陰影を付ける true false
var baseShadow=true;

//スタイル
//standerd/xscale1/xscale2/xyscale/position/position2/position3
//position/position2/position3/推奨
var scaleType="position3";
//後を透過する false true
var fadeflag=false;

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

//回転速度 デグリー値1-5
var angle=2;//DEG
//正転逆転フラグ 右正転=1 左逆転=-1
var carouselflag=1;
//マウスイベントの使用 true false
var eventUse=true;
//コンテナ角 度デグリー値
var containerAngle=0;
//パーツ角度 デグリー値
var partsAngle=30;
//基本スケール
var stScale=1;
//始点の角度
var startAngle=-Math.PI/2;

//split分割数、自動修正されます
var carouselsplit=12;
//text
var text_use="use";

//------------------------------------------------------
//回転正逆補正
angle *=carouselflag;
//to-RAD
var rotate_angle=angle*createjs.Matrix2D.DEG_TO_RAD;
var plusAngle=-Math.PI/2;
//------------------------------------------------------

//画像数
var image_max;

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

//ステージ
var stage;

//画像/コンテナ
var welcomeImage,backimage;
var carouselContainer;
//TEXT
var viewtext;

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

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

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

	//ステージ
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	//stage.enableMouseOver(20);

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

	//welcome画像ロード後に表示
	welcomeImage=new createjs.Bitmap();
	stage.addChild(welcomeImage);
	//yakei.png/flower102.jpg
	var bkloader=new createjs.ImageLoader("/main/images/flower102.jpg",false);
	bkloader.addEventListener("complete",function(event) {
		welcomeImage.image=new createjs.Bitmap(event.result).image;
		stage.update();
	});
	bkloader.load();

	//空コンテナを作る/未使用
	container=new createjs.Container();
	stage.addChild(container);

	//空コンテナインスタンス配置
	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);
	//一旦ステージ表示
	stage.update();

	//MAIN-Ticker設定
	createjs.Ticker.setFPS(40);
	createjs.Ticker.addEventListener('tick',tick);

	//delay_speed調整
	setTimeout(function() {

		//DRAW
		draw();

	},1000);

}


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

	//分割数
	carouselsplit=basestring.length;

	//文字を逆順に並び替え
	if(reversalText){
		basestring=reverseText(basestring);
	}

	//簡易TEXTクリア
	set_text("");

	//carousel
	carousel_set();
}

//carousel/パーツを配置してBaseを作る
function carousel_set() {

	//TEXT
	set_text("Carousel");

	///BitmapFill画像
	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=[];
	//scale用配列
	var sclArr=[];
	var sclArr2=[];

	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);
		//スケール、ポジション位置で計算 0-1
		sclArr[i]=(Math.abs(cy)/radiusY);
		sclArr2[i]=(cy/radiusY);
		//伸縮1 Xスケールで向きを変える
		if(scaleType == 'xscale1') {
			var scl=sclArr[i];//Xスケール
		}
		if(scaleType == 'xscale2') {
			var scl=sclArr2[i];//Xスケール2
		}
		//伸縮2 遠近感を付ける
		if(scaleType == 'xyscale') {
			var sclxy=(Math.abs(Math.cos(parts_angle/2-Math.PI/4)/Math.cos(Math.PI))+1)/2;
		}
		//position段階計算
		if(scaleType == 'position') {
			var a_v=1+(cy*0.25)/radiusY;
			posArr[i]=a_v;
		}
		//position段階反転計算
		if(scaleType == 'position2') {
			var a_v=1+(cy*0.25)/radiusY;//position段階
			var scl=sclArr2[i]*a_v;//Xスケール反転
		}
		//position段階反転計算3
		if(scaleType == 'position3') {
			var a_v=1+(cy*0.25)/radiusY;//position段階
			//Xスケール補正
			var scl=Math.abs(sclArr2[i]*a_v);
		}
		//sort-DATAを保存
		var id=chip[i].id;
		//オブジェクトで保存
		zArr.push({'id':id, 'position':cy});

		//matrix
		matrix.identity();
		//順序重要
		//位置をずらす
		matrix.translate(cx,cy);

		//伸縮1実行
		if(scaleType == 'xscale1') {
			matrix.scale(scl*stScale,stScale);
		}
		//伸縮1実行B
		if(scaleType == 'xscale2') {
			matrix.scale(scl*stScale,stScale);
		}
		//伸縮2実行
		if(scaleType == 'xyscale') {
			matrix.scale(sclxy*stScale,sclxy*stScale);
		}
		//position段階スケール実行
		if(scaleType == 'position') {
			matrix.scale(posArr[i]*stScale,posArr[i]*stScale);
		}
		//position段階スケール伸縮反転
		if(scaleType == 'position2') {
			matrix.scale(scl*stScale,a_v*stScale);
		}
		//position段階スケール伸縮反転3
		if(scaleType == 'position3') {
			matrix.scale(scl*stScale,a_v*stScale);
		}
		//基本スケール実行
		if(scaleType == 'standerd') {
			matrix.scale(stScale,stScale);
		}

		//実行
		matrix.decompose(chip[i]);

		//インナーコンテナ回転デグリー
		innerchip[i].rotation=partsAngle;

		//中心からの角度で補正
		//innerchip[i].rotation=Math.atan2(cy,cx)*180/Math.PI;//中心向き1
		//innerchip[i].rotation=(Math.atan2(cy,cx)*180/Math.PI)+90;//中心向き2

	}

	//配列をソート/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
		if(fadeflag) {
			chip[idno].alpha=alphaArr[idno]+0.2;
		}
		if(!fadeflag) {
			chip[idno].alpha=1;
		}
	}

}

//base/BitmapFill
function set_baseCircle() {

	//none補正
	if(baseType=='none'){textImageUse=false;}

	//パーツの大きさ
	var parts_w=itemWidth+base_W*2;
	var parts_h=itemHeight+base_W*2;
	//数
	var count=carouselsplit;
	var color=carouselbackcolor;

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

		//文字虹色
		if(rainbowText) {basetext_color=createjs.Graphics.getHSL(i/count*360,100,50);}//直接
		//Base虹色
		if(rainbowColor) {color=createjs.Graphics.getHSL(i/count*360,100,50);}//直接

		//図形用インスタンス配置
		chip[i]=new createjs.Container();
		chip[i].id=i;
		//インナーコンテナ
		innerchip[i]=new createjs.Container();
		//shape
		var shape=new createjs.Shape();

		//文字先頭から取る
		str=basestring.charAt(i);
		//文字後ろから取る
		//reversalText){str=basestring.charAt(count-1-i);

		var space=true;
		if (str == ' '){space=spaceHidd;}//半角スペース

		if(!textImageUse){
			//サイズ,フォント,色,虹色,陰影,スペース,文字,数,カウント
			textChip[i]=createRingText(font_size,font_name,basetext_color,textShadow,str,count,i);
		}

		//ライン処理
		if(base_W > 0.9) {
			shape.graphics.ss(base_W).s(carousellinecolor);
		}

		//文字を画像に変換
		if(textImageUse){
			//幅、高さ、背景色、文字種、サイズ、文字色、陰影、ストリング
			//w,h,c,font,fsize,fcolor,shadow,text
			var textImage=createImageText(itemWidth,itemHeight,color,font_name,font_size,basetext_color,textShadow,str);
		}

		//Baseの形 round rect circle
		if(baseType=='round'){
			//Fill-RoundRect
			if(textImageUse){shape.graphics.beginBitmapFill(textImage).drawRoundRect(0,0,itemWidth,itemHeight,round_radius);}//画像
			if(!textImageUse){shape.graphics.beginFill(color).drawRoundRect(0,0,itemWidth,itemHeight,round_radius);}
		}
		if(baseType=='rect'){
			//Fill-Rect
			if(textImageUse){shape.graphics.beginBitmapFill(textImage).drawRect(0,0,itemWidth,itemHeight);}//画像
			if(!textImageUse){shape.graphics.beginFill(color).drawRect(0,0,itemWidth,itemHeight);}
		}
		if(baseType=='circle'){
			//Fill-Ellips
			if(textImageUse){shape.graphics.beginBitmapFill(textImage).drawEllipse(0,0,itemWidth,itemHeight);}//画像
			if(!textImageUse){shape.graphics.beginFill(color).drawEllipse(0,0,itemWidth,itemHeight);}

			//Fill-Circle未使用
			//shape.graphics.beginFill(color).drawCircle(itemWidth/2,itemHeight/2,itemWidth/2);
		}
		if(baseType=='none'){
			//NONE
			shape.visible=false;
		}

		//regXY
		shape.regX=itemWidth/2;
		shape.regY=itemHeight/2;

		//半角スペース表示
		if(space){
			//base陰影
			if(baseShadow){shape.shadow=shadow;}
		}
		//半角スペース非表示
		if(!space){
			//base透明
			var shape=new createjs.Shape();
			shape.graphics.beginFill('rgba(0,0,0,0)').drawRect(1,1,2,2);
		}

		imgchip[i]=shape;

		//add
		if(!textImageUse){innerchip[i].addChild(imgchip[i],textChip[i]);}//文字分離
		if(textImageUse){innerchip[i].addChild(imgchip[i]);}//文字背景一体

		chip[i].addChild(innerchip[i]);
		carouselContainer.addChild(chip[i]);

	}

}

//テキストインスタンスを作る、ズレ補正
function createRingText(size,font,color,textshadow,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;}
	//shadow2多少重い
	if(textshadow){t.shadow=shadow2;}

	//戻り
	return t;
}

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

//update/未使用
function draw_carousel() {
	stage.update();
}

//tickステージ
function tick(event) {
	stage.update();
}

//VIEWTEXT
function set_text(t) {
	if (text_use=='use') {
		viewtext.text=t;
	}
}

//幅、高さ、画像
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;
}

//色付き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;
}

//TEXT付きcanvasを作る
//幅、高さ、背景色、文字種、サイズ、文字色、陰影、ストリング
function createImageText (w,h,c,font,fsize,fcolor,shadow,text) {

	var yy=0;
	//firefox補正
	if(firefox) {yy=1;}

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

	var font_v=fsize +" "+ font;

	ctx.fillStyle=fcolor;
	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";

	//Textに陰影
	if (shadow) {set_shadow (ctx,"#000000");}
    	ctx.fillText(text,w/2,h/2+yy);

	return canvas;
}
//Textに陰影
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=3;
}

//変換は配列で返すナントカ使える
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;
}

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

//START
window.onload=function() {
	init();
}

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


CSS

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



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

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


 

簡単な説明


easeljs-0.8用に書き換えました


以前のJSでは、インスタンスのX方向のスケール変更が、easeljs-0.8では壊れて正常に機能しませんのでこの部分を修正します。多少前のものと比較して良くはなっています。
内容などはほぼ同じですが、違いは下記ページのものと比較ください。

easeljs-0.7用の記事です

【参照】当方の記事: CreateJS 3D Carousel もどき、と画像拡大の組み合わせ


 

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

zuzu

 

1. Matrixクラスの変更で合わなくなった部分を修正した。
2. スケール変化など、Math.PIで計算して合わない部分は別の計算にした。
3. matrix2D.rotate()の使用を止めてrotationを使用するように修正した。
4. 画像タイプは軽量化のためBitmapFillタイプに限定します。
5. 放射状のタイプは通常利用しません。(出来ます程度のものです)


スケール変化のスタイル

スケール変化のスタイルを以下の様にセットすれば目的の形に変化する。スタイルは7種類。
(position position2 position3 推奨)
標準スケール、伸縮1(標準)、伸縮1(反転)、伸縮2(遠近感)、段階スケール、段階スケール反転、より選定できます。
その他の設定はJSの先頭を参照ください。多少違いを加えています。


遠近感が強調されなければ効果のバランスが崩れますから「position」「position2」が良いようです。
その他はそれなりの効果になります。動きなどはシミュレーションを参照ください。


zu

 


//スタイル
//standerd/xscale1/xscale2/xyscale/position/position2/position3
var scaleType="position2";

//後を透過する false true
var fadeflag=true;

アイテムの大きさ

アイテムの大きさは自由に変えられますが、文字は中央に配置されます。基本スケールで調整可能です。



//アイテムの大きさ
var itemWidth=40;
var itemHeight=40;

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

文字の画像化

通常はコンテナに図形グラフイックと文字を配置しますが、動かすと文字がぐらつきます。
それを抑えるために、文字を画像化して図形グラフイックの中に埋め込むと、滑らかな動きになりますので修正して使用しています。ただ欠点として画像故に拡大した場合にボケます。



////textを画像に変換して使用する
//文字がぶれない/none以外
var textImageUse=true;

文字の画像化はCanvasエレメントに背景と文字を表示して、画像としてグラフイックBitmapFillで処理しています。
問題は文字の陰影ですが、読みやすくするには陰影処理が欠かせません。但しCanvasエレメントではRGB値で使用しますので16進色を返還して描画しています。直接RGB値で処理しても構いません。



//TEXT付きcanvasを作る
//幅、高さ、背景色、文字種、サイズ、文字色、陰影、ストリング
function createImageText (w,h,c,font,fsize,fcolor,shadow,text) {

	var yy=0;
	//firefox補正
	if(firefox) {yy=1;}

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

	var font_v=fsize +" "+ font;

	ctx.fillStyle=fcolor;
	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";

	//Textに陰影
	if (shadow) {set_shadow (ctx,"#000000");}
    	ctx.fillText(text,w/2,h/2+yy);

	return canvas;
}

//Textに陰影
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=3;
}

//変換は配列で返すナントカ使える
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;
}

文字の中央補正

角度などの調整が必要ですから文字を中央補正して利用しますが、textBaseline、middleがブラウザによってY方向で微妙に違います。
文字の背景に図形などあると1ドットの狂いでも見栄えが良くない。特に「firefox」のズレが大きいので補正しています。
文字の種類によって異なるので、良く確認して微調整を行います。このデモでは「firefox」のみ補正しました。
また文字の種類、日本語、英数字でも中心位置が違ってきますので了承ください。完全に補正する方法はありますが非常に大変ですから適当な所で手を打った方が効率的です。



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

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

function createImageText (w,h,c,font,fsize,fcolor,shadow,text) {

	var yy=0;
	//firefox補正
	if(firefox) {yy=1;}

	途中略す

	return canvas;
}

CreateJSでのブラウザ判定

CreateJSでのブラウザ判定はPreloadJSのBrowserDetectクラスで判定ができますが、IEの判定がまだ有りません。
PreloadJSを読み込んでいないと使用できないので困る。一応このデモでは上記の判定を利用している。




//firefox判定/firefoxならばtrue
if(createjs.BrowserDetect.isFirefox){
	//
}

外周配置のインスタンスは自由に改造出来ますので、好みの形にして下さい。
また、不要な部分は削除も可能です。詳細はJSを参照ください。



「前ページ」Carouselの基本形。easeljs-0.8用の記事です

【参照】当方の記事: CreateJS 3D風Carousel円周配置のインスタンスを回転させる(easeljs-0.8)

過去の、easeljs-0.7用の記事です。easeljs-0.8では正常に動作しません。

【参照】当方の記事: CreateJS 3D Carousel もどき、とテキストの組み合わせ



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]