POPSブログ

CreateJS Chromeでの shadowフィルター と、Opera での drawRoundRect の不具合の修正

287

  Category:  javascript2014/03/29 pops 

CreateJSで、以前から Opera での RoundRect が旨く描画出来ない(Opera Nextは除く)、Graphicsクラス drawRoundRectメソッド の不具合の修正を行なっていますが、より効率的な方法に変更します。
また、Matrix2Dで縮小、beginBitmapFill()処理でChrome陰影切れる不具合の修正も新たな方法を考えました。
easeljs-0.7 でのテストです。

 

CreateJS Chromeでのshadowフィルターと、OperaでのdrawRoundRectの不具合の修正


[重要]、「Opera Next」では Google Chromeのレンダリングエンジンを使用していますので、Chromeと同様の症状などが現れます。ただし、RoundRect の問題は解消されています。2014/03/31/追記


1. Operaでの drawRoundRect の不具合は arcTo()、Canvas仕様の解釈の違いで起きているもので、quadraticCurveTo() にすれば概ね直る。(「Opera Next」ではChrome同等ですから解消されています)
2. これは、以前にも言っていますが処理方法が少し書き難かったので、EaselJSを拡張する事でより良い方法に改めます。(createjs.Graphics.prototypeでメソッドを追加して処理する方法)
3. 画像サムネールなどを作る時、Matrix2Dで縮小、beginBitmapFill()処理で「Chrome」および「Opera Next」の陰影切れる不具合がある。構造をかえないでの修正方法も考える。(以前は構造をかえて対処していた)
4. 一応 easeljs-0.7.1でも可動します。


 

▼ [ 簡単な説明に進む ]

 

DEMO


CreateJS shadowフィルター テスト、(createJS072.js)

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



Chrome Firefox Safari(Win) IE9、Opera、で動作確認済み。 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>
<script type="text/javascript" src="js/preloadjs-0.4.0.min.js"></script>

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

このデモでは、tweenjs-0.5.0.min.js は不要です。


HTML (HTML5)


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

JS

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


//日本語
//createJS072.js
//easeljs-0.7デモ用

//------------------------------------------------------
//初期設定
//canvasの大きさ
var canvasWidth=800;
var canvasHeight=400;

//説明TEXT
var textUse=true;

//画像リスト
var manifest=[
{src:"/main/images/textback03.jpg",id:"text"},
{src:"/main/images/textback12.png",id:"text"},
{src:"/main/images/textback13.png",id:"text"},
{src:"/main/images/testImage101.jpg",id:"text"},
{src:"/main/images/testImage102.jpg",id:"text"},
{src:"/main/images/testImage103.jpg",id:"text"}
];

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

//ステージ
var stage;
//コンテナ
var mainContainer;
var subContainer;

//簡易TEXT
var viewtext;
//画像容器
var assets=[];
var image_max;

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

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

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

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

	//Mainコンテナ
	mainContainer=new createjs.Container();
	stage.addChild(mainContainer);

	//Subコンテナ
	subContainer=new createjs.Container();
	stage.addChild(subContainer);

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

	//Ticker設定
	createjs.Ticker.setFPS(20);
	createjs.Ticker.addEventListener('tick',tick);

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

}

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

	set_text("Loading Now!");
	//Loaderを作る
	var loader=new createjs.LoadQueue(false);
	//loader EventListener設定
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//Manifestを使用、Load開始
	loader.loadManifest(manifest);

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

	//result値
	assets.push(event.result);

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

	//画像数確認、再計算
	image_max=assets.length;

	//簡易TEXT
	set_text("Loading End!");

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

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

		//早すぎるので調整
		setTimeout(function() {

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

			//表示に進む
			main();

		},1000);
	}
}

//Main
function main() {

	//--------------------- No7 ------------------------
	//Mainコンテナ
	//html5角丸RoundRectCanvasを作る/内接する形
	//X、Y、幅、高さ、角丸半径、ベース色、ライン色、ライン幅、ライン
	//(x,y,w,h,r,bcolor,lcolor,lineW,line)//rgba(0,0,0,0)
	var mainbox=createRoundRectCanvasBox(0,0,canvasWidth-10,canvasHeight-10,20,"#FFFFFF","#FF0000",4,true);
	//
	var boxImage=new createjs.Bitmap(mainbox);
	boxImage.regX=(canvasWidth-10)/2;
	boxImage.regY=(canvasHeight-10)/2;
	boxImage.x=canvasWidth/2;
	boxImage.y=canvasHeight/2;
	mainContainer.addChild(boxImage);

	//説明画像
	var backs=new createjs.Bitmap("/main/images/dk_zu284.gif");
	mainContainer.addChild(backs);

	//Subコンテナ

	//--------------------- No1 ------------------------
	//1
	var subbox1=new createjs.Shape();
	subbox1.graphics.beginFill("#F8F8FF");
	operaRoundRect(subbox1,0,0,80,80,10);
	subbox1.x=20;
	subbox1.y=50;
	subbox1.shadow=shadow;
	subContainer.addChild(subbox1);

	//2
	var subbox2=new createjs.Shape();
	subbox2.graphics.ss(2).s("#00BFFF").beginFill("#E6E6FA");
	operaRoundRect(subbox2,0,0,80,80,20);
	subbox2.x=115;
	subbox2.y=50;
	subbox2.shadow=shadow;
	subContainer.addChild(subbox2);

	//3
	var subbox3=new createjs.Shape();
	subbox3.graphics.ss(4).s("#BA55D3").beginFill("#D8BFD8").drawRoundRectEx(0,0,80,80,20);
	subbox3.x=210;
	subbox3.y=50;
	subbox3.shadow=shadow;
	subContainer.addChild(subbox3);

/*
	//3 Fill Line分離の例
	var base=new createjs.Container();
	var subbox3=new createjs.Shape();
	subbox3.graphics.beginFill("#D8BFD8").drawRoundRectEx(0,0,80,80,20);
	subbox3.shadow=new createjs.Shadow("#000000",0,0,10);
	var line=new createjs.Shape();
	line.graphics.ss(4).s("#BA55D3").drawRoundRectEx(0,0,80,80,20);
	base.addChild(subbox3,line);
	base.x=210;
	base.y=50;
	subContainer.addChild(base);
*/

	//--------------------- No2 ------------------------
	//WRAP Container
	var testContainer=new createjs.Container();
	testContainer.x=0;
	testContainer.y=160;
	//1B
	var subbox1b=new createjs.Shape();
	subbox1b.graphics.beginFill("#F8F8FF");
	operaRoundRect(subbox1b,0,0,80,80,10);
	subbox1b.x=20;
	subbox1b.y=20;
	testContainer.addChild(subbox1b);
	//2B
	var subbox2b=new createjs.Shape();
	subbox2b.graphics.ss(2).s("#00BFFF").beginFill("#E6E6FA");
	operaRoundRect(subbox2b,0,0,80,80,20);
	subbox2b.x=115;
	subbox2b.y=20;
	testContainer.addChild(subbox2b);
	//3B
	var subbox3b=new createjs.Shape();
	subbox3b.graphics.ss(4).s("#BA55D3").beginFill("#D8BFD8").drawRoundRectEx(0,0,80,80,20);
	subbox3b.x=210;
	subbox3b.y=20;
	testContainer.addChild(subbox3b);
	subContainer.addChild(testContainer);
	//TESTコンテナに陰影
	testContainer.shadow=shadow;

	//--------------------- No4 ------------------------
	//image1
	var subbox4=new createjs.Shape();
	subbox4.graphics.ss(2).s("#FFFFFF").beginBitmapFill(assets[3]).drawRoundRectEx(0,0,100,100,10);
	subbox4.x=305;
	subbox4.y=50;
	subContainer.addChild(subbox4);
	//陰影
	subbox4.shadow=shadow;

	//image2
	var subbox5=new createjs.Shape();
	subbox5.graphics.beginBitmapFill(assets[3]).drawRoundRectEx(0,0,100,100,10);
	subbox5.x=415;
	subbox5.y=50;
	subContainer.addChild(subbox5);
	//陰影
	subbox5.shadow=shadow;

	//image3 Chrome NG
	var subbox7=new createjs.Shape();
	//Matrix縮小75%/Chrome陰影切れる
	var scale_x=0.75;//scaleX
	var scale_y=0.75;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	subbox7.graphics.beginBitmapFill(assets[3],"no-repeat",mtx).drawRoundRectEx(0,0,75,75,10);
	subbox7.x=315;
	subbox7.y=180;
	//陰影
	subbox7.shadow=new createjs.Shadow("#000000",0,0,10);
	subContainer.addChild(subbox7);

	//image4
	//Chrome以外はOKなのだがChrome陰影切れるので陰影層を入れてマスクして修正
	//ChromeのdrawImage()での処理がわるいのが原因みたいだ
	//注意コンテナ
	var subbox8=new createjs.Container();
	var box=new createjs.Shape();
	//Matrix縮小75%/Chrome陰影切れる
	var scale_x=0.75;//scaleX
	var scale_y=0.75;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	box.graphics.beginBitmapFill(assets[3],"no-repeat",mtx).drawRoundRectEx(0,0,75,75,10);
	var maskbox=new createjs.Shape();
	maskbox.graphics.beginFill("#000000").drawRoundRectEx(0,0,75,75,10);
	box.mask=maskbox;//かならず必要ではない
	//陰影
	maskbox.shadow=new createjs.Shadow("#000000",0,0,10);
	subbox8.addChild(maskbox,box);
	subbox8.x=405;
	subbox8.y=180;
	subContainer.addChild(subbox8);

	//image3b Rect Chrome NG
	var subbox9=new createjs.Shape();
	//Matrix縮小75%/Chrome陰影切れる
	var scale_x=0.75;//scaleX
	var scale_y=0.75;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	subbox9.graphics.beginBitmapFill(assets[3],"no-repeat",mtx).drawRect(0,0,75,75);
	subbox9.x=500;
	subbox9.y=180;
	//陰影
	subbox9.shadow=new createjs.Shadow("#000000",0,0,10);
	subContainer.addChild(subbox9);

	//image4b
	//Chrome以外はOKなのだがChrome陰影切れるので陰影層を入れてマスクして修正
	//ChromeのdrawImage()での処理がわるいのが原因みたいだ
	//注意コンテナ
	var subbox10=new createjs.Container();
	var box=new createjs.Shape();
	//Matrix縮小75%/Chrome陰影切れる
	var scale_x=0.75;//scaleX
	var scale_y=0.75;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	box.graphics.beginBitmapFill(assets[3],"no-repeat",mtx).drawRect(0,0,75,75,10);
	var maskbox=new createjs.Shape();
	maskbox.graphics.beginFill("#000000").drawRect(0,0,75,75,10);
	box.mask=maskbox;//かならず必要ではない
	//陰影
	maskbox.shadow=new createjs.Shadow("#000000",0,0,10);
	subbox10.addChild(maskbox,box);
	subbox10.x=590;
	subbox10.y=180;
	subContainer.addChild(subbox10);

	//--------------------- No6 ------------------------

	//image5
	//Bitmapマスク形式 注意コンテナ
	var subbox12=new createjs.Container();
	var box=new createjs.Shape();
	var bmp=new createjs.Bitmap(assets[3]);
	bmp.scaleX=0.75;
	bmp.scaleY=0.75;
	var scale_y=0.75;//scaleY
	box.graphics.beginFill("#000000").drawRoundRectEx(0,0,75,75,10);
	bmp.mask=box;
	//陰影
	box.shadow=new createjs.Shadow("#000000",0,0,10);
	subbox12.addChild(box,bmp);
	subbox12.x=525;
	subbox12.y=50;
	subContainer.addChild(subbox12);

/*
	//参考、画像をMatrix2D処理してBitmap表示/未使用
	//Matrix縮小 Bitmapマスク形式 注意コンテナ Chrome OK
	var subbox12=new createjs.Container();
	var box=new createjs.Shape();
	var bmp=new createjs.Bitmap(assets[3]);
	//Matrix縮小75%
	var scale_x=0.75;//scaleX
	var scale_y=0.75;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	mtx.decompose(bmp);
	box.graphics.beginFill("#000000").drawRoundRectEx(0,0,75,75,10);
	bmp.mask=box;//マスク
	//陰影
	box.shadow=new createjs.Shadow("#000000",0,0,10);
	subbox12.addChild(box,bmp);
	subbox12.x=525;
	subbox12.y=50;
	subContainer.addChild(subbox12);
*/

	//image6
	//Bitmapマスク形式ライン付き 注意コンテナ
	var subbox13=new createjs.Container();
	var box=new createjs.Shape();
	var bmp=new createjs.Bitmap(assets[3]);
	var line=new createjs.Shape();
	line.graphics.ss(2).s("#FFFFFF").beginFill().drawRoundRectEx(0,0,75,75,10);
	bmp.scaleX=0.75;
	bmp.scaleY=0.75;
	var scale_y=0.75;//scaleY
	box.graphics.beginFill("#000000").drawRoundRectEx(0,0,75,75,10);
	bmp.mask=box;
	//陰影
	box.shadow=new createjs.Shadow("#000000",0,0,10);
	subbox13.addChild(box,bmp,line);
	subbox13.x=610;
	subbox13.y=50;
	subContainer.addChild(subbox13);

	//--------------------- No5 ------------------------
	//★image3修正1 Chrome OK
	var subbox15=new createjs.Shape();
	//Canvas画像縮小/サイズを与えると自由な大きさを取れる
	var img=createImgCanvas(75,75,assets[3]);
	subbox15.graphics.beginBitmapFill(img).drawRoundRectEx(0,0,75,75,10);
	subbox15.x=315;
	subbox15.y=300;
	//陰影
	subbox15.shadow=new createjs.Shadow("#000000",0,0,10);
	subContainer.addChild(subbox15);

	//★image3修正2 Chrome OK
	var subbox16=new createjs.Shape();
	//Canvas画像縮小/サイズを与えると自由な大きさを取れる
	var img=createImgCanvas(50,50,assets[3]);
	subbox16.graphics.beginBitmapFill(img).drawRoundRectEx(0,0,50,50,10);
	subbox16.x=405;
	subbox16.y=300;
	//陰影
	subbox16.shadow=new createjs.Shadow("#000000",0,0,10);
	subContainer.addChild(subbox16);

	//★image4修正1 Chrome OK
	var subbox17=new createjs.Shape();
	//Canvas画像縮小/サイズを与えると自由な大きさを取れる
	var img=createImgCanvas(75,75,assets[3]);
	subbox17.graphics.beginBitmapFill(img).drawRect(0,0,75,75);
	subbox17.x=500;
	subbox17.y=300;
	//陰影
	subbox17.shadow=new createjs.Shadow("#000000",0,0,10);
	subContainer.addChild(subbox17);

	//★image4修正2 Chrome OK
	var subbox18=new createjs.Shape();
	//Canvas画像縮小/サイズを与えると自由な大きさを取れる
	var img=createImgCanvas(50,50,assets[3]);
	subbox18.graphics.beginBitmapFill(img).drawRect(0,0,50,50);
	subbox18.x=600;
	subbox18.y=300;
	//陰影
	subbox18.shadow=new createjs.Shadow("#000000",0,0,10);
	subContainer.addChild(subbox18);

	//--------------------- No8 ------------------------
	//No8
	//4
	//ベースW、H、ボックスX、Y、幅、高さ、角丸半径、ボックス色、ライン色、ライン幅、ライン
	//(bw,bh,x,y,w,h,r,bcolor,lcolor,lineW,line)
	var box=createRoundRectCanvasBox_B(100,100,10,10,80,80,10,"#00CED1","#CCCCCC",2,true);
	var subbox20=new createjs.Bitmap(box);
	subbox20.x=690;
	subbox20.y=40;
	subContainer.addChild(subbox20);

	//5
	var img=assets[0];
	//html5角丸RoundRectCanvasを作るC/Chrome外からshadowだめ
	//ベースW、H、ボックスX、Y、幅、高さ、角丸半径、ボックス色、ライン色、ライン幅、ライン、陰影色、陰影X、陰影Y、陰影W、陰影、パタン画像
	//(bw,bh,x,y,w,h,r,bcolor,lcolor,lineW,line,scolor,sx,sy,sw,shadow,patternimg)
	var box=createRoundRectCanvasBox_C (100,100,10,10,80,80,10,"#FFF8DC","#FFD700",2,true,"rgb(0,0,0)",0,0,7,true,img);
	var subbox21=new createjs.Bitmap(box);
	subbox21.x=690;
	subbox21.y=170;
	subContainer.addChild(subbox21);

	//--------------------- No9 ------------------------
	//★image3修正ボタン Chrome OK
	//Canvas画像縮小/サイズを与えると自由な大きさを取れる
	var img=createImgCanvas(60,60,assets[3]);

	//create-RoundRect-ImageBTN
	//X、Y、幅、高さ、角丸半径、陰影、画像
	//(x,y,w,h,r,shadow,img)
	var imagebtn=createRoundRectImageBtn(0,0,60,60,10,true,img);
	imagebtn.regX=30;
	imagebtn.regY=30;
	imagebtn.x=150;
	imagebtn.y=330;
	imagebtn.cursor="pointer";
	subContainer.addChild(imagebtn);

}
//------------------------------------------------------------------------------

//tick
function tick() {
	stage.update();
}
//VIEWTEXT
function set_text(t) {

	if (textUse) {
		viewtext.text=t;
		stage.update();
	}
}

//------------------------------------------------------------------------------
//html5角丸RoundRectCanvasを作る/内接する形
//X、Y、幅、高さ、角丸半径、ベース色、ライン色、ライン幅、ライン
function createRoundRectCanvasBox(x,y,w,h,r,bcolor,lcolor,lineW,line) {

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

	//line中心の補正/内接する形
	if(line) {
	var hosei=lineW*2;
		w -=hosei;
		h -=hosei;
		x +=hosei/2;
		y +=hosei/2;
	}

	//html5RoundRect/Opera OK
	ctx.beginPath();
	ctx.moveTo(x+r,y);
	ctx.lineTo(x+w-r,y);
	ctx.quadraticCurveTo(x+w,y,x+w,y+r);
	ctx.lineTo(x+w,y+h-r);
	ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
	ctx.lineTo(x+r,y+h);
	ctx.quadraticCurveTo(x,y+h,x,y+h-r);
	ctx.lineTo(x,y+r);
	ctx.quadraticCurveTo(x,y,x+r,y);
	ctx.closePath();

	ctx.lineCap="butt";
	ctx.fillStyle=bcolor;
	if(line) {
		ctx.strokeStyle=lcolor;
		ctx.lineWidth=lineW;
	}
	ctx.fill();
	if(line) {ctx.stroke();}

	return canvas;
}

//2
//ベースW、H、ボックスX、Y、幅、高さ、角丸半径、ボックス色、ライン色、ライン幅、ライン
function createRoundRectCanvasBox_B(bw,bh,x,y,w,h,r,bcolor,lcolor,lineW,line) {
	//RoundRectBox
	var canvas=document.createElement("canvas");
	//ベースは大きい
	canvas.width=bw;
	canvas.height=bh;
	var ctx=canvas.getContext("2d");

	//html5RoundRect/Opera OK
	ctx.beginPath();
	ctx.moveTo(x+r,y);
	ctx.lineTo(x+w-r,y);
	ctx.quadraticCurveTo(x+w,y,x+w,y+r);
	ctx.lineTo(x+w,y+h-r);
	ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
	ctx.lineTo(x+r,y+h);
	ctx.quadraticCurveTo(x,y+h,x,y+h-r);
	ctx.lineTo(x,y+r);
	ctx.quadraticCurveTo(x,y,x+r,y);
	ctx.closePath();

	ctx.lineCap="butt";
	ctx.fillStyle=bcolor;
	if(line) {
		ctx.strokeStyle=lcolor;
		ctx.lineWidth=lineW;
	}

	ctx.fill();
	if(line) {ctx.stroke();}

	return canvas;
}

//3
//ベースW、H、ボックスX、Y、幅、高さ、角丸半径、ボックス色、ライン色、ライン幅、ライン、陰影色、陰影X、陰影Y、陰影W、陰影、パタン画像
function createRoundRectCanvasBox_C(bw,bh,x,y,w,h,r,bcolor,lcolor,lineW,line,scolor,sx,sy,sw,shadow,patternimg) {
	//RoundRectBox
	var canvas=document.createElement("canvas");
	//ベースは大きい
	canvas.width=bw;
	canvas.height=bh;
	var ctx=canvas.getContext("2d");

	//html5RoundRect/Opera OK
	ctx.beginPath();
	ctx.moveTo(x+r,y);
	ctx.lineTo(x+w-r,y);
	ctx.quadraticCurveTo(x+w,y,x+w,y+r);
	ctx.lineTo(x+w,y+h-r);
	ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
	ctx.lineTo(x+r,y+h);
	ctx.quadraticCurveTo(x,y+h,x,y+h-r);
	ctx.lineTo(x,y+r);
	ctx.quadraticCurveTo(x,y,x+r,y);
	ctx.closePath();

	ctx.lineCap="butt";
	ctx.fillStyle=bcolor;
	if(line) {
		ctx.strokeStyle=lcolor;
		ctx.lineWidth=lineW;
	}
	//shadow
	if(shadow) {
		ctx.shadowColor=scolor;
		ctx.shadowOffsetX=sx;
		ctx.shadowOffsetY=sy;
		ctx.shadowBlur=sw;
		//IE9画像ズレ対策
		if(patternimg){ctx.fillStyle=scolor;}
	}
	ctx.fill();
	//ラインに影を付けない
	if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}//
	//パタン画像
	if(patternimg){
		var pattern=ctx.createPattern(patternimg,"repeat");
		ctx.fillStyle=pattern;
		ctx.fill();
	}
	if(line) {ctx.stroke();}

	return canvas;
}

//------------------------------------------------------------------------------
//ボタンテスト
//create-RoundRect-ImageBTN
function createRoundRectImageBtn(x,y,w,h,r,shadow,img) {

	//BTNコンテナ
	var btn=new createjs.Container();
	//画像Shape
	var shape=new createjs.Shape();
	shape.name="imagebtn";//name挿入
	shape.graphics.beginBitmapFill(img).drawRoundRectEx(x,y,w,h,r);
	shape.alpha=0.8;//alpha 80%
	//ベースShape
	var base=new createjs.Shape();
	base.graphics.beginFill("#000000").drawRoundRectEx(x,y,w,h,r);
	base.name="base";//name挿入
	if(shadow) {base.shadow=new createjs.Shadow("#000000",0,0,10);}
	btn.addChild(base,shape);

	//ACTION
	//rollover
	btn.addEventListener("rollover",function () {
		shape.alpha=1;
	});
	//rollout
	btn.addEventListener("rollout",function () {
		//alpha 80%
		shape.alpha=0.8;
	});

	return btn;
}

//scaleImageCanvasスケール変換、Chromeはだめだ、未使用
//幅、高さ、縮小、画像
function createScaleImgCanvas(w,h,imgscale,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.scale(imgscale,imgscale);//縮小
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

//ImageCanvas/サイズを与えると自由な大きさを取れる
//Chrome OK
//幅、高さ、画像
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;
}

//------------------------------------------------------------------------------
//RoundRectEx
createjs.Graphics.prototype.drawRoundRectEx=function(x,y,w,h,r){
	this.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);
};

//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);
}
//------------------------------------------------------------------------------
//陰影Blur=5
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=5;//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;
}

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

//START
init();

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


CSS

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


/*日本語 createJS072.css*/

#demo-wrap {
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:800px;
height:400px;
margin:0 auto;
padding:0;
border:1px #CCCCCC solid;
background-color:#FFFFFF;
}

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


簡単な説明


[説明図] Opera と Chrome が「オコケ」遊ばされるご様子です

 

[ 簡単な説明の目次 ]



RoundRectの修正

▲[ 目次 ]

一般的に、Operaに気を使う人はいないが、ワタシとしては見過ごせないので修正する。

(Chrome用描画エンジン使用のOperaでは、振る舞いがChromeと同様になりますので修正の必要はありません。)

Operaでの、arcTo()、Canvas仕様の解釈の違いで起きているもので、quadraticCurveTo()にすれば概ね直る。
異常なのはOperaだけですが、将来、Operaが正常になるかはワタシはわかりません。
arcTo()、quadraticCurveTo()で曲線の描画の質が違うが、単純な角丸処理では相違はわからない。


CreateJSの drawRoundRect 処理

CreateJSのグラフイッククラスで 角丸RoundRect 処理は drawRoundRect()メソッド で簡単に描画できるが、内部的にはarcTo()で処理されているためにOperaで角丸が壊れる
quadraticCurveTo()は全ブラウザで解釈の違いなど無いために同一に描画される。


参考、CreateJSのdrawRoundRect書式


var インスタンス=new createjs.Shape();
インスタンス.graphics.beginFill("#F8F8FF").drawRoundRect(0,0,80,80,10);

以前の修正処理

インスタンスを引数に処理していたので、メソッドチェーンが出来なく少し不便であった。


var インスタンス=new createjs.Shape();
インスタンス.graphics.beginFill("#F8F8FF");
operaRoundRect(インスタンス,0,0,80,80,10);

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

新しい修正処理

Createjs、Graphicsクラスを拡張してメソッドとして処理すれば、メソッドチェーン出来るので便利である。
メソッド名には参考記事と同じく、「明示的にEx」をつけている。この方がどんな処理をしているか自分でも判り易い。


EaselJSを拡張方法は、下記「参考」記事を元に修正しました。

【参考】jsdo.itの記事: EaselJS 拡張 ~ 部分円の描画 ~


参考記事より、拡張する、.prototypeの書式


createjs.Graphics.prototype.メソッド名=function(){
	//処理
}

よって...


var インスタンス=new createjs.Shape();
インスタンス.graphics.beginFill("#F8F8FF").drawRoundRectEx(,0,0,80,80,10);

--------------------------------------------------
//RoundRectEx
createjs.Graphics.prototype.drawRoundRectEx=function(x,y,w,h,r){
	this.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);
};

やっている事は同じだが、これでスッキリした。

 



★ Chrome用描画エンジン使用のOperaでは (2014/04/06追記)


Chrome用描画エンジン使用のOperaでは、振る舞いがChromeと同様ですので、RoundRectの修正はいりません。
現在ほとんど切り替わっているとは思いますが? Operaのシェアは数%ですからこの辺は個人の判断になります。
この場合、CreateJSの drawRoundRect() 処理がそのまま有効になります。



var インスタンス=new createjs.Shape();
インスタンス.graphics.beginFill("#F8F8FF").drawRoundRect(0,0,80,80,10);

その代わり、Operaでの不具合のなかった箇所に、Chromeの不具合が出てきますので注意ください。


 

ChromeのMatrix2D処理とshadowフィルター(陰影)の不具合

▲[ 目次 ]

「デモ」キャプチャー図

角丸RoundRectに陰影処理して、色々な形態での表示状況を確認して見ます。

 

1. Shapeにshadow処理、極一般的
2. ShapeをContainerでラップして、Containerにshadow処理
3. Shape、BitmapFill()画像流し込み、shadow処理
4. Shape、BitmapFill()画像流し込み、Matrix縮小、shadow処理 Chrome NG、OperaNext NG
5. Shape、BitmapFill()にdrawImage()縮小のエレメントを流し込み、shadow処理 Chrome OK
6. Bitmap画像をShapeでマスクして、マスクにshadow処理
7. CanvasエレメントのBox、周囲のライン分エレメントを拡張、shadowなし
8. CanvasエレメントのBox、周囲のラインshadow分エレメントを拡張、shadow処理
9. 5番の形式で作ったサムネール画像ボタン Chrome OK

 

画像サムネールなどを作る場合に、画像を縮小するにMatrix2D処理する。この時 Chrome で陰影を付けると陰影が切れる不具合が起きる。(図参照)
「Opera」では正常ですが、「Opera Next」は Chrome同等ですからこの症状が現れます。


画像サムネール、ボタンなどで角丸陰影処理する場合を考えてみると...


1. 画像Bitmap()を角丸Shape()でマスクする。(2重手間だから一般的ではない)
2. Matrix2Dで画像を縮小、graphics.beginBitmapFill()で画像を流し込み、drawRoundRect()で角丸にする。
(手間が省けるのでこれが一般的な処理方法である、但し陰影を付けると「Chrome」「Opera Next」で不具合有り)
3. 陰影を付けた場合の不具合修正は、一般的に構造を変えるほか方法が無い。(2重手間だ)
4. Matrix2Dを使用しないで画像縮小し、「Chrome」「Opera Next」で陰影の不具合を出さない方法があった...


不具合の状況に応じて、構造を変えるがその時次第で色々と変わり、ブラウザによっては再度不具合が出たり、マスク材が必要になったり大変作業効率が悪くなる。

 

 

Chromeで不具合の出ない処理方法

▲[ 目次 ]

説明など長くなるので結論を先に
Matrix2Dを使用しないで、直接drawImage()で縮小する


一般的な、CreateJSの BitmapFill()で画像流し込みの、Matrix2D の書式は下記の通りである。


.graphics.beginBitmapFill(画像result値,リピート,マトリックス)...

つまり、画像縮小の角丸処理は、画像をマトリックス処理するのが正常な方法である。
将来、Chromeのバグが修正されて正常になるかはワタシはわかりません。


● 実際の「デモ」での例、Chromeで陰影を付けると壊れる。

陰影を付けない場合は正常です。つまりChromeの処理にはバグがあると思って良い。
Chromeのシェアを考慮すれば、どうしてもChrome本位で作らねばなら無い現実がある。


//image3 Chrome NG
var subbox7=new createjs.Shape();
//Matrix縮小75%/Chrome陰影切れる
var scale_x=0.75;//scaleX
var scale_y=0.75;//scaleY
var mtx=new createjs.Matrix2D();
mtx.scale(scale_x,scale_y);
subbox7.graphics.beginBitmapFill(assets[3],"no-repeat",mtx).drawRoundRectEx(0,0,75,75,10);
subbox7.x=315;
subbox7.y=180;
//陰影
subbox7.shadow=new createjs.Shadow("#000000",0,0,10);
subContainer.addChild(subbox7);

● Matrix2D処理しないで、画像を直接 drawImage() で縮小して利用する。

▲[ 目次 ]

前のMatrix2D処理方法でChromeで陰影を付けると壊れるので、他に方法がないかテストしている内に見つけた。

陰影を付けて、不具合が出るから構造を変えて処理するなどの余計な手間は無くなる。

直接、Canvas処理をせず構築出来るのが Createjs の目的ですので、多少は邪道とは思いますが...


var elm=画像を直接 drawImage() で縮小したCanvasエレメント;
...graphics.beginBitmapFill(elm)...

「drawImage()で処理されたCanvasエレメント」は「PNG画像」と同様のものですから beginBitmapFill(画像) を明示的に行なう事に他ならない。


参考、Html5 Canvas、drawImage()メソッド の画像拡大縮小の書式


画像をCanvasの矩形領域に描画

drawImage(image,dx,dy,dw,dh)

CreateJS Bitmapクラスでは、画像の他にCanvasエレメント等を取り込み表示出来ます。また、graphics.beginBitmapFill()に代入して流し込む事も可能です。
CanvasエレメントはCanvas処理の内部的にはPNG画像と同様のものですから、CreateJS Loaderクラスで得られたresult値、またはjavascript Image()クラスで得られたオブジェクト同様に、Bitmap()に取り込み表示できる事になる。


処理の順序

1. 完全に読み込み完了の画像result値を用意する。
2. drawImage()で縮小するが、大きさは整数値である事に注意。
(専用の関数を作れば簡単に処理できる)
3. graphics.beginBitmapFill()に代入して流し込む。
4. どうしても、Matrixで処理する場合は、前項の以前の方法になる。


実際の「デモ」での例

処理の良し悪しは別として、これで問題は解消された。


//★image3修正1 Chrome OK
var subbox15=new createjs.Shape();
//Canvas画像縮小/サイズを与えると自由な大きさを取れる
var img=createImgCanvas(75,75,assets[3]);
subbox15.graphics.beginBitmapFill(img).drawRoundRectEx(0,0,75,75,10);
subbox15.x=315;
subbox15.y=300;
//陰影
subbox15.shadow=new createjs.Shadow("#000000",0,0,10);
subContainer.addChild(subbox15);

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

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

この件については、以前からかなり長い時間をさいてテストしたが解決出来なかった。drawImage()で縮小して入れるなんてキズク訳が無い!
最近、Html5 Canvasの書き方で色々作っていたので、偶然に修正出来ただけである。コッチがコケル!


画像縮小のCanvasで、次ぎの処理では、ChromeはMatrix2D処理と同じ結果であった。Chrome以外は正常である。
よって、上記の、createImgCanvas()関数を利用した。


//scaleImageCanvasスケール変換、Chromeはだめだ、未使用
//幅、高さ、縮小、画像
function createScaleImgCanvas(w,h,imgscale,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.scale(imgscale,imgscale);//縮小
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

参考、画像をMatrix2D処理してBitmap表示

Matrix2D処理してBitmap()表示の場合には問題はでない。下の例では角丸にしている為にマスクをかけている。
これは、サンプル表示にはない。


//Matrix縮小 Bitmapマスク形式 注意コンテナ Chrome OK
var subbox12=new createjs.Container();
var box=new createjs.Shape();
var bmp=new createjs.Bitmap(assets[3]);
//Matrix縮小75%
var scale_x=0.75;//scaleX
var scale_y=0.75;//scaleY
var mtx=new createjs.Matrix2D();
mtx.scale(scale_x,scale_y);
mtx.decompose(bmp);
box.graphics.beginFill("#000000").drawRoundRectEx(0,0,75,75,10);
bmp.mask=box;//マスク
//陰影
box.shadow=new createjs.Shadow("#000000",0,0,10);
subbox12.addChild(box,bmp);
subbox12.x=525;
subbox12.y=50;
subContainer.addChild(subbox12);

ラインに陰影を処理したくない場合

▲[ 目次 ]

通常Graphicsクラスのスタイルの設定は strorke fill が組になっていますし、graphicsに対しての陰影処理ですから、どちらにも陰影が付くことになります。

サンプル1番の3番目を例に取ると


//3
var subbox3=new createjs.Shape();
subbox3.graphics.ss(4).s("#BA55D3").beginFill("#D8BFD8").drawRoundRectEx(0,0,80,80,20);
subbox3.x=210;
subbox3.y=50;
subbox3.shadow=shadow;
subContainer.addChild(subbox3);

ラインに陰影を処理したくないなら、Graphicsクラスを2つに分離して、必要部分に陰影処理すれば良いので、コンテナでラップして表示します。面倒ですね!
このサンプル表示は有りませんが、以下の様になります。


//3 Fill Line分離
var base=new createjs.Container();
var subbox3=new createjs.Shape();
subbox3.graphics.beginFill("#D8BFD8").drawRoundRectEx(0,0,80,80,20);
subbox3.shadow=new createjs.Shadow("#000000",0,0,10);
var line=new createjs.Shape();
line.graphics.ss(4).s("#BA55D3").drawRoundRectEx(0,0,80,80,20);
base.addChild(subbox3,line);
base.x=210;
base.y=50;
subContainer.addChild(base);

複数のGraphicsクラスなどを含むコンテナに陰影処理した場合

基本的に中の要素全てに陰影処理されると考えてよいが、構造及びブラウザにより違いが有ります。
つまり、成り行き任せに成ります。


構造をかえた場合

▲[ 目次 ]

Chromeでの不具合のために、構造を変える例であるが、上記の方法が見つかったので、今後は特別な事情がない限り、余り構造を変えることは無いだろうと思う。
Chromeのバグが無くなれば必要の無いことであるが、.........


構造をかえた場合の「デモ」での例 1

コンテナに収容して、陰影を付ける専用のShape()を下に配置している。graphics.beginBitmapFill()処理。


//image4
//Chrome以外はOKなのだがChrome陰影切れるので陰影層を入れてマスクして修正
//注意コンテナ
var subbox8=new createjs.Container();
var box=new createjs.Shape();
//Matrix縮小75%/Chrome陰影切れる
var scale_x=0.75;//scaleX
var scale_y=0.75;//scaleY
var mtx=new createjs.Matrix2D();
mtx.scale(scale_x,scale_y);
box.graphics.beginBitmapFill(assets[3],"no-repeat",mtx).drawRoundRectEx(0,0,75,75,10);
var maskbox=new createjs.Shape();
maskbox.graphics.beginFill("#000000").drawRoundRectEx(0,0,75,75,10);
box.mask=maskbox;//かならず必要ではない
//陰影
maskbox.shadow=new createjs.Shadow("#000000",0,0,10);
subbox8.addChild(maskbox,box);
subbox8.x=405;
subbox8.y=180;
subContainer.addChild(subbox8);

構造をかえた場合の「デモ」での例 2

画像をBitmap()で表示して、マスクをする例である。Chromeでの問題は出ない。


//image5
//Bitmapマスク形式 注意コンテナ
var subbox12=new createjs.Container();
var box=new createjs.Shape();
var bmp=new createjs.Bitmap(assets[3]);
bmp.scaleX=0.75;
bmp.scaleY=0.75;
var scale_y=0.75;//scaleY
box.graphics.beginFill("#000000").drawRoundRectEx(0,0,75,75,10);
bmp.mask=box;
//陰影
box.shadow=new createjs.Shadow("#000000",0,0,10);
subbox12.addChild(box,bmp);
subbox12.x=525;
subbox12.y=50;
subContainer.addChild(subbox12);

直接にCanvas処理する事が増えた

最近では、直接にCanvas処理する事が増えた。今後、Canvas及びCreateJSが進化すればモット楽になろうが、
現実としては、旨く併用していかざるを得ない重要性を感じる。

 

その他、CanvasエレメントでBoxなどを作る

▲[ 目次 ]

前ページなどでテキストをCanvasエレメントで処理したがその延長である。
Boxなどを作る際は、ライン、陰影処理などを考慮して大きめのCanvasエレメントを作るのがコツのようだ。多少面倒であるが、ある程度細やかな処理が出来るのが特徴と言える。


● 表示の規則

原則、Bitmap()クラスを用いて表示する。


テキストなど挿入する場合には、下記記事などを参照下さい。

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


Canvasエレメントで作るBOX 1

▲[ 目次 ]

ステージに内接する形のBOXであるが、原則、陰影は付けないが外側にラインがはいるのでその分大きなCanvasエレメントを用意する。
Canvasエレメントから食み出した部分は描画されない。


//html5角丸RoundRectCanvasを作る/内接する形
//X、Y、幅、高さ、角丸半径、ベース色、ライン色、ライン幅、ライン
//(x,y,w,h,r,bcolor,lcolor,lineW,line)
var mainbox=createRoundRectCanvasBox(0,0,canvasWidth-10,canvasHeight-10,20,"#FFFFFF","#FF0000",4,true);
//
var boxImage=new createjs.Bitmap(mainbox);
boxImage.regX=(canvasWidth-10)/2;
boxImage.regY=(canvasHeight-10)/2;
boxImage.x=canvasWidth/2;
boxImage.y=canvasHeight/2;
mainContainer.addChild(boxImage);

Canvasエレメントで作るBOX 2

▲[ 目次 ]

陰影などを付ける目的で、大きなCanvasエレメントの中に描画している。ある程度細やかな処理が出来るのが特徴であるが、反面、html5 Canvasの規則で作らねばなら無いので非常に面倒である。


//5
var img=assets[0];
//html5角丸RoundRectCanvasを作るC/Chrome外からshadowだめ
//ベースW、H、ボックスX、Y、幅、高さ、角丸半径、ボックス色、ライン色、ライン幅、ライン、陰影色、陰影X、陰影Y、陰影W、陰影、パタン画像
//(bw,bh,x,y,w,h,r,bcolor,lcolor,lineW,line,scolor,sx,sy,sw,shadow,patternimg)
var box=createRoundRectCanvasBox_C (100,100,10,10,80,80,10,"#FFF8DC","#FFD700",2,true,"rgb(0,0,0)",0,0,7,true,img);
var subbox21=new createjs.Bitmap(box);
subbox21.x=690;
subbox21.y=170;
subContainer.addChild(subbox21);

上の2つは、画面を細やかに装飾するときには便利だが、余り使用されることは無いと思います。
中に配置したものは1枚の画像同然であり、CreateJSでTween等の制御が出来ないのが難点です。


サムネール画像ボタン

▲[ 目次 ]

以前より少し簡略になっている。仕組みは上の「Matrix2D処理しないで、画像を直接 drawImage() で縮小して利用する」を原型にボタンアクションを加えただけである。
「デモ」の例


var img=createImgCanvas(60,60,assets[3]);

//create-RoundRect-ImageBTN
//X、Y、幅、高さ、角丸半径、陰影、画像
//(x,y,w,h,r,shadow,img)
var imagebtn=createRoundRectImageBtn(0,0,60,60,10,true,img);
imagebtn.regX=30;
imagebtn.regY=30;
imagebtn.x=150;
imagebtn.y=330;
imagebtn.cursor="pointer";
subContainer.addChild(imagebtn);

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

//create-RoundRect-ImageBTN
function createRoundRectImageBtn(x,y,w,h,r,shadow,img) {

	//BTNコンテナ
	var btn=new createjs.Container();
	//画像Shape
	var shape=new createjs.Shape();
	shape.name="imagebtn";//name挿入
	shape.graphics.beginBitmapFill(img).drawRoundRectEx(x,y,w,h,r);
	shape.alpha=0.8;//alpha 80%
	//ベースShape
	var base=new createjs.Shape();
	base.graphics.beginFill("#000000").drawRoundRectEx(x,y,w,h,r);
	base.name="base";//name挿入
	if(shadow) {base.shadow=new createjs.Shadow("#000000",0,0,10);}
	btn.addChild(base,shape);

	//ACTION
	//rollover
	btn.addEventListener("rollover",function () {
		shape.alpha=1;
	});
	//rollout
	btn.addEventListener("rollout",function () {
		//alpha 80%
		shape.alpha=0.8;
	});

	return btn;
}

▲[ 目次 ]



使用画像

「デモ」での使用画像は「デモ」ページに表示しています。


以前の古い記事です。今回は少々新しい方式を取り入れました。

【参照】当方の記事: CreateJS 「角丸RoundRectボタン」「shadowフィルター」の振る舞いなどを考える


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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]