POPSブログ

CreateJS Graphicsクラスを拡張 コーナー装飾矩形(Rect)描画

292

  Category:  javascript2014/04/22 pops 

矩形(Rect)のコーナー(四隅)を装飾して描画しますが、Graphicsクラスを拡張してメソッドにする事により、通常のCreateJS Graphicsクラスの書式で記述できる。四隅形状は round bevel notch bite の4種類になります。
easeljs-0.7.1 でのテストです。

 

CreateJS Graphicsクラスを拡張 コーナー装飾矩形(Rect)描画 テスト


前ページの星形多角形などの描画の延長で、矩形(Rect)のコーナー(四隅)を装飾して描画しただけである。
easeljs-0.7.1 を使用します。(easeljs-0.7.0でも問題はありません)


 

Graphicsクラスを拡張してメソッドにする事により以下の様な書き方が出来るのが便利です。
例、200x100の四隅が斜めに欠けた(bevel)、赤色着色のFillを描く。



var box=new createjs.Shape();
box.graphics.beginFill("#FF0000").drawCornerRectEx(0,0,200,100,20,"bevel");

Graphicsクラスの drawRect、drawRoundRect、と同様な書き方ができる。


 

DEMO


CreateJS Graphicsクラスを拡張 コーナー装飾矩形(Rect)描画デモ、(createJS076.js)

このページは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>

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


HTML (HTML5)


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

JS

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


//日本語
//createJS076.js
//コーナー装飾Rect
//easeljs-0.7.1デモ用

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

//説明TEXT
var textUse=true;

//画像リスト
var manifest=[
{src:"/main/images/sp_back_640.jpg",id:"back"},
{src:"/main/images/sp_back2_640.jpg",id:"back"},
{src:"/main/images/sp_back3_640.jpg",id:"back"},
{src:"/main/images/lady01.png",id:"back"},
{src:"/main/images/textimg01.png",id:"back"}
];

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

//ステージ
var stage;
var backrect;
//コンテナ
var mainContainer;
var backtextContainer;
//簡易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');

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

	//backImage
	var backImage=new createjs.Bitmap("/main/images/sky_back2.jpg");
	backImage.scaleX=800/640*1.2;
	backImage.scaleY=800/640*1.2;
	stage.addChild(backImage);

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

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

	//1-4コンテナ収容中心補正

	//---------1----------
	set_memo(20,15,"1 CreateJS drawCornerRectEx round");
	//var img=assets[0];
	var img=null;

	var radius=20;
	var width=200;
	var height=100;
	var type="round";//round bevel notch bite

	//コンテナ収容
	var wrap=new createjs.Container();
	var box=new createjs.Shape();
	//Fill
	box.graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawCornerRectEx(0,0,width,height,radius,type);
	box.shadow=shadow;

	//幅、高さ、背景色、文字種、サイズ、文字色、虹色、ストリング
	var title=createTextCanvasB3 (width,height/2,"rgba(0,0,0,0)","Arial","bold 32px","#FF0000",true,'WELCOME');//虹色true
	var titlebox=new createjs.Bitmap(title);
	titlebox.y=50;
	wrap.addChild(box,titlebox);

	//中心補正
	wrap.regX=width/2;
	wrap.regY=height/2;
	wrap.x=120;
	wrap.y=80;
	mainContainer.addChild(wrap);

	//---------2----------
	set_memo(240,15,"2 bevel OutlineText");
	var img=assets[1];

	var radius=20;
	var width=200;
	var height=100;
	var type="bevel";//round bevel notch bite

	//Matrixは随意
	var mtx=new createjs.Matrix2D();
	mtx.translate(0,0);
	mtx.scale(0.75,0.75);

	//コンテナ収容
	var wrap=new createjs.Container();
	var box=new createjs.Shape();

	//Fill
	box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",mtx).drawCornerRectEx(0,0,width,height,radius,type);
	box.shadow=shadow;

	var textimg=null;
	//Logoアウトライン専用/グロー効果
	//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン幅、ライン、陰影色、陰影、パタン画像、ストリング
	var logo=createTextOutlineLogoG (width,height/2,"rgba(0,0,0,0)","Arial","bold 34px","#FFFFFF","#FF0000",2,true,"#00BFFF",true,textimg,'WELCOME');

	var logoimage=new createjs.Bitmap(logo);
	logoimage.y=20;
	wrap.addChild(box,logoimage);

	//中心補正
	wrap.regX=width/2;
	wrap.regY=height/2;
	wrap.x=340;
	wrap.y=80;
	mainContainer.addChild(wrap);

	//---------3----------
	set_memo(460,15,"3 notch Normal Text");
	//var img=assets[0];
	var img=null;

	var radius=20;
	var width=200;
	var height=100;
	var type="notch";//round bevel notch bite

	//コンテナ収容
	var wrap=new createjs.Container();
	var box=new createjs.Shape();
	var line=new createjs.Shape();
	//通常Rect/2.1はラインをはっきりさせるため
	line.graphics.ss(1).s("#FFFFFF").drawRect(radius/2.1,radius/2.1,width-radius,height-radius);

	//Fill
	box.graphics.ss(2).s("#FFFFFF").beginFill("#FFD700").drawCornerRectEx(0,0,width,height,radius,type);
	box.shadow=shadow;

	//通常テキスト
	var text=
	text=new createjs.Text("WELCOME","bold 24px Arial","#FFFFFF");
	text.textAlign="center";
	text.textBaseline="middle";
	text.x=width/2;
	text.y=height/2;
	text.shadow=new createjs.Shadow("#000000",2,2,5);

	wrap.addChild(line,box,text);

	//中心補正
	wrap.regX=width/2;
	wrap.regY=height/2;
	wrap.x=560;
	wrap.y=80;
	mainContainer.addChild(wrap);

	//---------4----------
	set_memo(680,15,"4 bite 虹色Canvasエレメント");
	var img=assets[4];

	var radius=20;
	var width=200;
	var height=100;
	var type="bite";//round bevel notch bite

	//虹色Canvasエレメント、RainbowGradients2/0=横 1=縦 2=斜め
	var elm=createRainbowCanvas2(width,height,0);

	//コンテナ収容
	var wrap=new createjs.Container();
	var box=new createjs.Shape();
	//BitmapFill
	box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(elm).drawCornerRectEx(0,0,width,height,radius,type);
	box.shadow=shadow;

	var logoimage=new createjs.Bitmap(img);
	logoimage.regX=340/2;
	logoimage.regY=50/2;
	logoimage.scaleX=0.6;
	logoimage.scaleY=0.6;
	logoimage.x=width/2;
	logoimage.y=height/2;

	wrap.addChild(box,logoimage);

	//中心補正
	wrap.regX=width/2;
	wrap.regY=height/2;
	wrap.x=780;
	wrap.y=80;
	mainContainer.addChild(wrap);

	//------------------------------------------------------
	//5-8中心補正なし

	//---------5----------
	set_memo(20,145,"5 round BitmapFill");
	var img=assets[3];
	//var img=null;

	//matrix補正用画像の大きさ
	var imgWidth=200;
	var imgHeight=200;

	//Matrixは随意
	//var mtx=new createjs.Matrix2D();
	//mtx.translate(0,0);
	//mtx.scale(0.75,0.75);

	var radius=20;
	var width=200;
	var height=100;
	var type="round";//round bevel notch bite

	var box=new createjs.Shape();
	//BitmapFill
	box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img).drawCornerRectEx(0,0,width,height,radius,type);
	//box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",null).drawCornerRectEx(0,0,width,height,radius,type);
	//box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",mtx).drawCornerRectEx(0,0,width,height,radius,type);

	box.x=20;
	box.y=160;
	box.shadow=shadow;
	mainContainer.addChild(box);

	//---------6----------
	set_memo(240,145,"6 bevel LinearGradient");
	//var img=assets[0];
	var img=null;

	var radius=20;
	var width=200;
	var height=100;
	var type="bevel";//round bevel notch bite

	var box=new createjs.Shape();
	//グラデLinearGradient
	box.graphics.ss(2).s("#FFFFFF").beginLinearGradientFill(["#FF0000","#FFD700"],[0,1],0,height,0,0).drawCornerRectEx(0,0,width,height,radius,type);

	box.x=240;
	box.y=160;
	box.shadow=shadow;
	mainContainer.addChild(box);

	//---------7----------
	set_memo(460,145,"7 notch RadialGradient");
	//var img=assets[0];
	var img=null;

	var radius=20;
	var width=200;
	var height=100;
	var type="notch";//round bevel notch bite

	var box=new createjs.Shape();
	//グラデRadialGradient
	box.graphics.ss(2).s("#FFFFFF").beginRadialGradientFill(["#ADD8E6","#191970"],[0,0.8,1],30,30,10,width/2,height/2,width*0.6).drawCornerRectEx(0,0,width,height,radius,type);

	box.x=460;
	box.y=160;
	box.shadow=shadow;
	mainContainer.addChild(box);

	//---------8----------
	set_memo(680,145,"8 bite Canvasエレメント");

	var radius=20;
	var width=200;
	var height=100;
	var type="bite";//round bevel notch bite

	//LinearGradientBox/Canvasエレメント
	//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
	var img=createLineGradBox (width,height,"#9400D3","#000000","#000000","y",2);

	var box=new createjs.Shape();
	//BitmapFill
	box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img).drawCornerRectEx(0,0,width,height,radius,type);

	box.x=680;
	box.y=160;
	box.shadow=shadow;
	mainContainer.addChild(box);

	//------------------------------------------------------
	//9-12中心補正なし

	//---------9----------
	set_memo(20,275,"9 round [1,0,1,0]");
	var img=assets[0];

	//matrix補正用画像の大きさ
	var imgWidth=640;
	var imgHeight=400;

	var radius=20;
	var width=200;
	var height=100;
	var type="round";//round bevel notch bite

	//Matrixは随意
	var mtx=new createjs.Matrix2D();
	mtx.translate(-imgWidth/2,-imgHeight/2);
	mtx.scale(0.7,0.7);

	//コンテナ収容line分離
	var wrap=new createjs.Container();
	var box=new createjs.Shape();
	var line=new createjs.Shape();
	var line2=new createjs.Shape();

	//BitmapFill
	box.graphics.beginBitmapFill(img,"no-repeat",mtx).drawCornerRectEx(0,0,width,height,radius,type,[1,0,1,0]);
	box.shadow=new createjs.Shadow("#000000",0,0,10);
	line.graphics.ss(2).s("#FFFFFF").drawCornerRectEx(0,0,width,height,radius,type,[1,0,1,0]);
	line2.graphics.ss(1).s("#FFFFFF").drawCornerRectEx(3,3,width-6,height-6,radius-2,type,[1,0,1,0]);

	wrap.addChild(box,line,line2);
	wrap.x=20;
	wrap.y=290;
	mainContainer.addChild(wrap);

	//---------10----------
	set_memo(240,275,"10 bevel Bitmap Mask [1,1,0,0]");
	var img=assets[3];

	var radius=20;
	var width=200;
	var height=100;
	var type="bevel";//round bevel notch bite

	//コンテナ収容
	var wrap=new createjs.Container();
	var box=new createjs.Bitmap(img);
	var mask=new createjs.Shape();

	//Matrixは随意
	var mtx=new createjs.Matrix2D();
	mtx.translate(0,-40);
	mtx.decompose(box);

	//Fill
	mask.graphics.beginFill("#000000").drawCornerRectEx(0,0,width,height,radius,type,[1,1,0,0]);
	box.mask=mask;
	mask.shadow=new createjs.Shadow("#000000",4,4,2);

	wrap.addChild(mask,box);
	wrap.x=240;
	wrap.y=290;
	mainContainer.addChild(wrap);

	//---------11----------
	set_memo(460,275,"11 notch 透過、[0,0,1,1]");
	//var img=assets[0];
	var img=null;

	var radius=10;
	var width=200;
	var height=100;
	var type="notch";//round bevel notch bite

	var box=new createjs.Shape();
	//Fill
	box.graphics.ss(2).s("#FFFFFF").beginFill('rgba(0,0,0,0.2)').drawCornerRectEx(0,0,width,height,radius,type,[0,0,1,1]);

	box.x=460;
	box.y=290;
	box.shadow=shadow;
	mainContainer.addChild(box);

	//---------12----------
	set_memo(680,275,"12 bite [0,1,0,1]");
	var img=assets[2];

	var radius=20;
	var width=200;
	var height=100;
	var type="bite";//round bevel notch bite

	//Matrixは随意
	var mtx=new createjs.Matrix2D();
	mtx.translate(-imgWidth/4,-imgHeight/4);
	mtx.scale(0.5,0.5);

	var box=new createjs.Shape();
	//Fill
	box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",mtx).drawCornerRectEx(0,0,width,height,radius,type,[0,1,0,1]);

	box.x=680;
	box.y=290;
	box.shadow=shadow;
	mainContainer.addChild(box);

}

//CornerEx処理/右周り
createjs.Graphics.prototype.drawCornerRectEx=function(x,y,w,h,radius,t,c){

	//エラー回避
	var corner=[];
	corner=c || [1,1,1,1];
	var r=radius || 1;
	var type=t || "round";
	//タイプミス判定
	if ("round bevel notch bite".indexOf(t) == -1) {type="round";}

	//移動
	this.moveTo(x+r,y);

	//1
	if(corner[1]){
		this.lineTo(x+w-r,y);
		if(type == 'round') {this.arc(x+w-r,y+r,r,-Math.PI/2,0,0);}
		if(type == 'bevel') {this.lineTo(x+w,y+r);}
		if(type == 'notch') {this.lineTo(x+w-r,y+r);this.lineTo(x+w,y+r);}
		if(type == 'bite') {this.arc(x+w,y,r,Math.PI,Math.PI/2,1);}
	} else {
		this.lineTo(x+w,y);
	}
	//2
	if(corner[2]){
		this.lineTo(x+w,y+h-r);
		if(type == 'round') {this.arc(x+w-r,y+h-r,r,0,Math.PI/2,0);}
		if(type == 'bevel') {this.lineTo(x+w-r,y+h);}
		if(type == 'notch') {this.lineTo(x+w-r,y+h-r);this.lineTo(x+w-r,y+h);}
		if(type == 'bite') {this.arc(x+w,y+h,r,-Math.PI/2,Math.PI,1);}
	} else {
		this.lineTo(x+w,y+h);
	}
	//3
	if(corner[3]){
		this.lineTo(x+r,y+h);
		if(type == 'round') {this.arc(x+r,y+h-r,r,Math.PI/2,Math.PI,0);}
		if(type == 'bevel') {this.lineTo(x,y+h-r,r);}
		if(type == 'notch') {this.lineTo(x+r,y+h-r,y+h-r);this.lineTo(x,y+h-r,r);}
		if(type == 'bite') {this.arc(x,y+h,r,0,-Math.PI/2,1);}
	} else {
		this.lineTo(x,y+h);
	}
	//4
	if(corner[0]){
		this.lineTo(x,y+r);
		if(type == 'round') {this.arc(x+r,y+r,r,Math.PI,-Math.PI/2,0);}
		if(type == 'bevel') {this.lineTo(x+r,y);}
		if(type == 'notch') {this.lineTo(x+r,y+r);this.lineTo(x+r,y);}
		if(type == 'bite') {this.arc(x,y,r,Math.PI/2,0,1);}
	} else {
		this.lineTo(x,y);this.lineTo(x+r,y);
	}

}

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

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

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

//MEMOTEXT
function set_memo(x,y,t) {
	var text=new createjs.Text(t,"10px Arial","#FF0000");
	text.x=x;
	text.y=y;
	text.textBaseline="middle";
	stage.addChild(text);
}

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

//LOGO-Canvasテキストアウトライン専用/Safari補正済
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン幅、ライン、陰影色、陰影、パタン画像、ストリング
function createTextOutlineLogoG (w,h,c,font,fsize,fcolor,lcolor,lwidth,line,scolor,shadow,patternimg,text) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	if (!scolor) {scolor="#000000";}//陰影補正

	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);

	var font_v=fsize +" "+ font;

	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//Textに指定色陰影
	if (!scolor) {scolor="#000000";}//陰影補正


//グロー効果/#00BFFF
ctx.strokeStyle=scolor;
ctx.lineWidth=lwidth+1;//大きいとこわれ易い
if (shadow) {set_shadow (ctx,scolor);}
ctx.strokeText(text,w/2,h/2);


	//Safari補正用下層テキスト、重ね塗り
	if(shadow) {
		ctx.strokeStyle=scolor;
		set_shadow (ctx,scolor);
		ctx.strokeText(text,w/2,h/2);
		set_shadow (ctx,scolor);
		ctx.strokeText(text,w/2,h/2);
	}

	//OUTLINE
	if(patternimg) {
		var pattern=ctx.createPattern(patternimg,"repeat");
		ctx.strokeStyle=pattern;
	} else {
		ctx.strokeStyle=fcolor;
	}

	//TEXT-LINE
	ctx.lineWidth=lwidth;
	//陰影a=0で消す
	if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
	ctx.strokeText(text,w/2,h/2);

	return canvas;
}



//虹色TEXT付きcanvasを作る3
//幅、高さ、色、文字種、サイズ、文字色、虹色、ストリング
function createTextCanvasB3 (w,h,c,font,fsize,fcolor,rainbow,text) {

	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.font=font_v;
	ctx.textAlign="left";
	ctx.textBaseline="middle";

	var len=text.length;
	var spc=-5;//-5 0 +2 位の範囲で文字間隔補正狭める/標準0
	var all_tw=ctx.measureText(text).width;//文字全幅
	var tw=Math.floor((w-(all_tw-spc*-1*len))/2);//初期位置中央是正
	//var tw=5;//左指定
	
	var rainbowColor;//虹色
	for(var i=0;i < len;i++) {

		var t=text.charAt(i);
		var tm=ctx.measureText(t).width;
		//虹色
		if (rainbow) {
			rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
			ctx.fillStyle=rainbowColor;
		} else {
			ctx.fillStyle=fcolor;
		}

		//Textに陰影
		set_shadow (ctx,"#000000");

		ctx.fillText(t,tw,h/2);

		tw =tw+tm-spc*-1;

	}

	return canvas;
}

//虹色、RainbowGradients2
function createRainbowCanvas2(w,h,t) {

	var type=0;
	type=t;
	if(t > 2) {type=2;}

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

	var gradient;
	if(type == 0) {gradient=ctx.createLinearGradient(0,0,w,0);}//横
	if(type == 1) {gradient=ctx.createLinearGradient(0,0,0,h);}//縦
	if(type == 2) {gradient=ctx.createLinearGradient(0,0,w,h);}//斜め

	gradient.addColorStop(0,'red');
	gradient.addColorStop(1/7,'orange');
	gradient.addColorStop(2/7,'yellow');
	gradient.addColorStop(3/7,'green')
	gradient.addColorStop(4/7,'aqua');
	gradient.addColorStop(5/7,'blue');
	gradient.addColorStop(6/7,'purple');
	gradient.addColorStop(1,'red');
	ctx.fillStyle=gradient;
	ctx.fillRect(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;
}

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

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

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

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

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

//RadialGradientBoxGradient
//幅、高さ、色1、色2、タイプ0-4
function createRadialGradBox (w,h,color1,color2,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	//タイプ修正
	if(!type){type=0;}
	if(type > 4){type=0;}

	//RadialGradient
	var px=[w/2,0,w,w,0];
	var py=[h/2,0,0,h,h];
	var x=px[type];
	var y=py[type];
	var r=w*0.5;
	if(type > 0) {r=w;}
	var gradient;
	gradient=ctx.createRadialGradient(x,y,20,x,y,r);

    	gradient.addColorStop(0,color1);
	gradient.addColorStop(1,color2);

	ctx.fillStyle=gradient;
	//FILL
	ctx.fillRect(0,0,w,h);

	return canvas;
}

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

//START
init();

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


CSS

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


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

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


簡単な説明


 

 

コーナー装飾矩形(Rect)描画


Graphicsクラスを拡張して、メソッドにする事により、通常のCreateJS Graphicsクラスの書式で記述できる。
下図はデモでのキャプチャーであるが、通常の塗り、グラデーション塗り、画像挿入などもdrawRectの形式で出来る。


[説明図]

 

1. コーナー形状は4種類になります。(通常roundがあれば事は足りる、いくらでも作れるが余り用途がないと思う、notch が使用される事があるか疑問だ)
2. コーナー形状 round bevel notch bite を指定できます。(設定ミスは round になります)
3. それぞれの四隅に形状を適用するか、個別に指定可能です。
4. 画像を埋め込む場合は、完全に画像読み込み完了である事。(ブラウザによっては重大エラーになる)
5. 必要性は感じられないが、前ページの勢いで一応作ってみただけです。
6. バージョン 0.7.0 でも一応動作可能です。


下の例のように記述しますので、分かり易く便利です。


書式

1. x y は原則 0 0 を指定します。( 0 0 以外は面倒になることがある)
2. width height は横幅、高さ。
3. radiusはround bite では半径、bevel notch では大きさになります。
(半径は 1 以上を設定のこと、0 はだめです)
4. コーナー形状タイプ、round bevel notch bite、の4種類。
5. 最後の、[ ] は各々の四隅に適用するかの指定です。省略すれば全てに適用します。
(対応する部分が 1 ならコーナー処理、0 なら直角にする、個別に半径は変えられない)
6. エラーにならない様に条件は正確に記入ください。



Graphicsクラス拡張関数
.drawCornerRectEx(x,y,width,height,radius,type,[])

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

topLeft topRight bottomRight bottomLeft の順に指定する
Topの2つを処理、[1,1,0,0]
Bottomの2つを処理、[0,0,1,1]
対角に2つを処理、[1,0,1,0]

全てを省略は、[1,1,1,1]と同じ
.drawCornerRectEx(x,y,width,height,radius,type)

[]の中が無い場合は[0,0,0,0]と同じ
.drawCornerRectEx(x,y,width,height,radius,type,[])

GraphicsクラスにdrawRoundRectComplexがあり、これと少し似通っていますが、下記は個別に半径を変えることが出来ます。


drawRoundRectComplex ( x  y  w  h  radiusTL  radiusTR  radiusBR  radiusBL ) 

サンプル5の例

大きさ200x100のベースに対して、画像は200x200です。原点は左上 0 0 のために画像の配置を変えたい場合はMatrix処理をします。画像は完全に読み込み完了である事。
中心補正をする場合は regX regY で行ったほうがよいと思います。他のサンプル処理も参考にしてください。

画像挿入の場合は、原点 x y は左上 0 0 のほうがMatrix処理し易い。



//---------5----------
set_memo(20,145,"5 round BitmapFill");
var img=assets[3];
//var img=null;

//matrix補正用画像の大きさ
var imgWidth=200;
var imgHeight=200;

//Matrixは随意
//var mtx=new createjs.Matrix2D();
//mtx.translate(0,0);
//mtx.scale(0.75,0.75);

var radius=20;
var width=200;
var height=100;
var type="round";//round bevel notch bite

var box=new createjs.Shape();
//BitmapFill
box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img).drawCornerRectEx(0,0,width,height,radius,type);
//Matrixなし
//box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",null).drawCornerRectEx(0,0,width,height,radius,type);
//Matrixの場合
//box.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",mtx).drawCornerRectEx(0,0,width,height,radius,type);

box.x=20;
box.y=160;
box.shadow=shadow;
mainContainer.addChild(box);

drawCornerRectEx

biteタイプがあるので、弧の位置形状を反転した、roundタイプを加えました。他のタイプもあるので右周りに処理していますが、arc()だけならarcの性質上の理由で左周りに処理したほうが作り易いようです。
実態は、外周のPathを記述しているだけである。


本来roundタイプはarcTo()で処理すべきとは思いますが、下記の様にarc()で作っていますし効率良いものではありません。何とか処理する程度ですので、書き換えなどは自由です。



//CornerEx処理/右周り
createjs.Graphics.prototype.drawCornerRectEx=function(x,y,w,h,radius,t,c){

	//エラー回避
	var corner=[];
	corner=c || [1,1,1,1];
	var r=radius || 1;
	var type=t || "round";
	//タイプミス判定
	if ("round bevel notch bite".indexOf(t) == -1) {type="round";}

	//移動
	this.moveTo(x+r,y);

	//1
	if(corner[1]){
		this.lineTo(x+w-r,y);
		if(type == 'round') {this.arc(x+w-r,y+r,r,-Math.PI/2,0,0);}
		if(type == 'bevel') {this.lineTo(x+w,y+r);}
		if(type == 'notch') {this.lineTo(x+w-r,y+r);this.lineTo(x+w,y+r);}
		if(type == 'bite') {this.arc(x+w,y,r,Math.PI,Math.PI/2,1);}
	} else {
		this.lineTo(x+w,y);
	}
	//2
	if(corner[2]){
		this.lineTo(x+w,y+h-r);
		if(type == 'round') {this.arc(x+w-r,y+h-r,r,0,Math.PI/2,0);}
		if(type == 'bevel') {this.lineTo(x+w-r,y+h);}
		if(type == 'notch') {this.lineTo(x+w-r,y+h-r);this.lineTo(x+w-r,y+h);}
		if(type == 'bite') {this.arc(x+w,y+h,r,-Math.PI/2,Math.PI,1);}
	} else {
		this.lineTo(x+w,y+h);
	}
	//3
	if(corner[3]){
		this.lineTo(x+r,y+h);
		if(type == 'round') {this.arc(x+r,y+h-r,r,Math.PI/2,Math.PI,0);}
		if(type == 'bevel') {this.lineTo(x,y+h-r,r);}
		if(type == 'notch') {this.lineTo(x+r,y+h-r,y+h-r);this.lineTo(x,y+h-r,r);}
		if(type == 'bite') {this.arc(x,y+h,r,0,-Math.PI/2,1);}
	} else {
		this.lineTo(x,y+h);
	}
	//4
	if(corner[0]){
		this.lineTo(x,y+r);
		if(type == 'round') {this.arc(x+r,y+r,r,Math.PI,-Math.PI/2,0);}
		if(type == 'bevel') {this.lineTo(x+r,y);}
		if(type == 'notch') {this.lineTo(x+r,y+r);this.lineTo(x+r,y);}
		if(type == 'bite') {this.arc(x,y,r,Math.PI/2,0,1);}
	} else {
		this.lineTo(x,y);this.lineTo(x+r,y);
	}

}

 

同じ、Graphicsクラス拡張形式の角丸多角形の描画は前ページに掲載しています。

【参照】当方の記事: CreateJS Graphicsクラスを拡張 Round PolyStar 角丸多角形の描画 2


使用画像

使用画像は「デモ」ページにあります。



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]