POPSブログ

CreateJS Graphicsクラスを拡張 Round PolyStar 角丸多角形の描画 2

291

  Category:  javascript2014/04/18 pops 

角丸多角形(Round PolyStar)の描画をGraphicsクラスを拡張して、メソッドにする事により、通常のCreateJS Graphicsクラスの書式で記述できるのが便利である。角丸の描画形式、arcTo()、quadraticCurveTo()、の2つの形式で3種作ってみました。
easeljs-0.7.1 でのテストです。

 

CreateJS Round PolyStar 角丸多角形の描画 2 テスト


drawPolyStarの書式に近い形で設定できるため、前ページのcreate方式と違って結構便利と思います。
easeljs-0.7.1 を使用します。(easeljs-0.7.0でも問題はありません)


 

つまり、以下の様な書き方が出来ると言う事です。


var star=new createjs.Shape();
star.graphics.beginFill("#FF0000").drawRoundPolyStarEx(0,0,100.....);

▼ [ 簡単な説明の目次に進む ]

 

DEMO


CreateJS Round PolyStar 角丸多角形の描画2デモ、(createJS075.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

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


//日本語
//createJS075.js
//RoundPolyStar2
//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"},
];

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

//ステージ
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/最下位色背景層、無くとも良い"#B0C4DE"
	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() {

	//---------------.drawRoundPolyStarEx--------------------

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

	var radius=90;
	var radius2=5;
	var sides=9;
	var pointSize=0.4;
	var angle=0;//デグリー値

	var starEx=new createjs.Shape();
	//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
	//Fill
	starEx.graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

	starEx.x=80;
	starEx.y=120;
	starEx.shadow=shadow;
	mainContainer.addChild(starEx);

	//---------2----------
	set_memo(200,15,"2 RadialGradient");
	var img=assets[1];
	//img=null;

	var radius=80;
	var radius2=5;//10
	var sides=12;//5
	var pointSize=0.8;//1 0.6
	var angle=0;//デグリー値

	var starEx=new createjs.Shape();
	//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
	//beginRadialGradientFill(colors ratios x0 y0 r0 x1 y1 r1)
	starEx.graphics.ss(2).s("#FFFFFF").beginRadialGradientFill(["#ADD8E6","#191970"],[0,0.8,1],-30,-30,10,0,0,100).drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

	starEx.x=240;
	starEx.y=120;
	starEx.shadow=shadow;
	mainContainer.addChild(starEx);

	//---------3----------
	set_memo(340,15,"3 BitmapFill画像");
	var img=assets[3];
	//img=null;

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

	var radius=90;
	var radius2=10;//10
	var sides=5;//5
	var pointSize=0.5;//1- 0.2
	var angle=0;//デグリー値

	//正多角形にする
	//pointSize=Math.cos(Math.PI/sides);

	var mtx=new createjs.Matrix2D();
	mtx.translate(-imgWidth/2,-imgHeight/2);
	mtx.scale(0.75,0.75);

	var starEx=new createjs.Shape();
	//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
	//BitmapFill
	//Matrix/Matrixはimgが無いとエラーになる
	if(img) {
		starEx.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",mtx).drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

	}

	starEx.x=410;
	starEx.y=120;
	starEx.shadow=shadow;
	mainContainer.addChild(starEx);

	//---------4----------
	set_memo(480,15,"4 LinearGradient正多角形");
	var img=assets[0];
	//img=null;

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

	var radius=70;
	var radius2=10;//10
	var sides=5;//5
	var pointSize=1;
	var angle=0;//デグリー値
	
	var mtx=new createjs.Matrix2D();
	mtx.translate(-imgWidth/2,-imgHeight/2);

	var starEx=new createjs.Shape();
	//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
	//GradientFillグラデ
	starEx.graphics.ss(2).s("#FFFFFF").beginLinearGradientFill(["#FFD700","#FF0000"],[0,1],-100,0,0,100).drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

	starEx.x=540;
	starEx.y=120;
	starEx.shadow=shadow;
	mainContainer.addChild(starEx);

	//---------5----------
	set_memo(640,15,"5 透過Fill");
	var img=assets[0];
	img=null;

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

	var radius=90;
	var radius2=5;
	var sides=24;
	var pointSize=0.6;//1 0.6
	var angle=0;//デグリー値

	var starEx=new createjs.Shape();
	//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
	//Fill
	starEx.graphics.ss(1).s("#FFFFFF").beginFill('rgba(0,0,0,0.1)').drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

	starEx.x=680;
	starEx.y=120;
	starEx.shadow=new createjs.Shadow("#000000",4,4,2);
	mainContainer.addChild(starEx);

	//---------6----------
	set_memo(800,15,"5 Bitmap MASK");
	var img=assets[2];
	//img=null;

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

	var radius=90;
	var radius2=10;//10
	var sides=5;//5
	var pointSize=0.4;//1-0.1
	var angle=0;//デグリー値

	//コンテナ
	var wrap=new createjs.Container();
	//IMAGE
	var imageBox=new createjs.Bitmap(img);
	imageBox.regX=imgWidth/2;
	imageBox.regY=imgHeight/2;
	var star=new createjs.Shape();

	//Fillマスク材
	star.graphics.beginFill("#000000").drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);
	imageBox.mask=star;
	//star.visible=false;//陰影のため表示
	star.shadow=new createjs.Shadow("#000000",4,4,2);
	wrap.x=830;
	wrap.y=120;
	wrap.addChild(star,imageBox);

	mainContainer.addChild(wrap);

	//---------------.drawRoundStarEx--------------------

	//---------7----------
	set_memo(20,220,"7 CreateJS drawRoundStarEx");
	var img=assets[0];
	//img=null;

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

	var radius=100;
	var radius2=50;
	var sides=5;
	var angle=0;//デグリー値

	var mtx=new createjs.Matrix2D();
	mtx.translate(-imgWidth/2,-imgHeight/2);

	var star=new createjs.Shape();

	//X、Y、外半径、内半径、分割数、角度補正
	//Matrix/Matrixはimgが無いとエラーになる
	if(img) {
		star.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",mtx).drawRoundStarEx(0,0,radius,radius2,sides,angle);
	}

	star.x=80;
	star.y=300;
	star.shadow=shadow;
	mainContainer.addChild(star);

	//---------8----------
	set_memo(170,220,"8 LinearGradient");
	var img=assets[0];
	//img=null;

	var radius=80;
	var radius2=60;
	var sides=13;
	var angle=0;//デグリー値

	//コンテナ
	var wrap=new createjs.Container();
	var star=new createjs.Shape();
	var line=new createjs.Shape();

	//グラデ
	star.graphics.beginLinearGradientFill(["#FFD700","#FF0000"],[0,1],-100,0,0,100).drawRoundStarEx(0,0,radius,radius2,sides,angle);
	line.graphics.ss(2).s("#FFFFFF").drawRoundStarEx(0,0,radius,radius2,sides,angle);

	star.shadow=new createjs.Shadow("#000000",4,4,8);
	wrap.addChild(star,line);
	wrap.x=220;
	wrap.y=300;
	mainContainer.addChild(wrap);

	//---------9----------
	set_memo(300,220,"9 Canvasエレメント画像");
	//var img=assets[0];

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

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

	var mtx=new createjs.Matrix2D();
	mtx.translate(-imgWidth/2,-imgHeight/2);

	var radius=70;
	var radius2=70;
	var sides=3;
	var angle=0;//デグリー値

	//コンテナ
	var wrap=new createjs.Container();
	var star=new createjs.Shape();
	var line=new createjs.Shape();

	//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
	//カンバス画像
	if(img){
		star.graphics.beginBitmapFill(img,"no-repeat",mtx).drawRoundStarEx(0,0,radius,radius2,sides,angle);
		line.graphics.ss(2).s("#FFFFFF").drawRoundStarEx(0,0,radius,radius2,sides,angle);
	}

	star.shadow=new createjs.Shadow("#000000",0,0,8);
	wrap.addChild(star,line);
	wrap.x=360;
	wrap.y=300;
	mainContainer.addChild(wrap);

	//---------------.drawDoubleRoundPolyStarEx--------------------

	//---------10----------
	set_memo(440,220,"10 CreateJS drawDoubleRoundPolyStarEx");
	var img=assets[0];
	img=null;

	var radius=80;
	var radius2=10;
	var sides=5;
	var pointSize=0.4;
	var angle=0;//デグリー値

	var starEx=new createjs.Shape();
	//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
	//Fill
	starEx.graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawDoubleRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

	starEx.x=540;
	starEx.y=300;
	starEx.shadow=shadow;
	mainContainer.addChild(starEx);

	//---------11----------
	set_memo(650,220,"11 Double 画像");
	var img=assets[1];
	//img=null;

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

	var mtx=new createjs.Matrix2D();
	mtx.translate(-imgWidth/2,-imgHeight/2);

	var radius=70;
	var radius2=5;//10
	var sides=9;//5
	var pointSize=0.7;//0.8-0.5
	var angle=0;//デグリー値

	var starEx=new createjs.Shape();
	//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
	//Fill
	//starEx.graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawDoubleRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);
	if(img) {
		starEx.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",mtx).drawDoubleRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);
	}

	starEx.x=660;
	starEx.y=300;
	starEx.shadow=shadow;
	mainContainer.addChild(starEx);

	//---------------createPSCanvas_B--------------------

	//---------12----------
	set_memo(780,220,"12 Canvas arcTo 改造");
	var img=assets[2];
	img=null;
	var angle=0;//デグリー値

	//ベース幅、ベース高さ、ベース色、分割数、先端半径、外半径、内部色、パタン画像、ライン色、ライン幅、ライン、陰影色、陰影、角度補正
	//(bw,bh,bscolor,division,radius,innerR,outerR,pcolor,patternimg,lcolor,linewidth,line,scolor,shadow,angle)
	var star=createPSCanvas_B(200,200,'rgba(0,0,0,0)',5,20,60,'rgba(0,0,0,0.2)',img,'#FFFFFF',1,true,'#000000',true,angle);

	var starBox3=new createjs.Bitmap(star);//Canvasエレメント表示
	starBox3.regX=100;
	starBox3.regY=100;
	starBox3.x=840;
	starBox3.y=300;
	mainContainer.addChild(starBox3);

}

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

//arcTo
//drawRoundPolyStarEx
createjs.Graphics.prototype.drawRoundPolyStarEx=function(x,y,radius,radius2,sides,pointSize,angle){

		var innerR=radius;
		var outerR=radius*pointSize;

		//outerRを中間に強制変更
		if(!pointSize) {pointSize=1;}
		if(pointSize == 1) {
			outerR=Math.cos(Math.PI/sides)*innerR;
		}

		var base_x=x;
		var base_y=y;

		//描画データ
		var cx,cy,cx2,cy2,cx3,cy3;
		cAngle=angle*createjs.Matrix2D.DEG_TO_RAD;
		nAngle=0;

		//ライン描画
		nAngle=Math.PI*2/sides;
		hfAngle=nAngle/2;

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

			//回転補正
			cAngle +=nAngle;

			//位置計算
			cx=Math.cos(cAngle)*outerR;
			cy=Math.sin(cAngle)*outerR;
			cx2=Math.cos(cAngle+hfAngle)*innerR;
			cy2=Math.sin(cAngle+hfAngle)*innerR;
			cx3=Math.cos(cAngle+hfAngle*2)*outerR;
			cy3=Math.sin(cAngle+hfAngle*2)*outerR;


			if(i == 0) {this.moveTo(cx+base_x,cy+base_y);}

			//Path
			this.arcTo(cx2+base_x,cy2+base_y,cx3+base_x,cy3+base_y,radius2);
			this.lineTo(cx3+base_x,cy3+base_y);

		}

}

//ダブルarcTo
//drawDoubleRoundPolyStarEx
createjs.Graphics.prototype.drawDoubleRoundPolyStarEx=function(x,y,radius,radius2,sides,pointSize,angle){

		var innerR=radius;
		var outerR=radius*pointSize;

		//outerRを中間に強制変更/1ではエラーになるので.99補正
		if(!pointSize) {pointSize=1;}
		if(pointSize == 1) {
			outerR=Math.cos(Math.PI/sides)*innerR*0.99;
		}

		var base_x=x;
		var base_y=y;

		//描画データ
		var cx,cy,cx2,cy2,cx3,cy3,cx4,cy4,cx5,cy5,cx6,cy6,cx7,cy7;
		cAngle=angle*createjs.Matrix2D.DEG_TO_RAD;
		nAngle=0;

		//ライン描画
		nAngle=Math.PI*2/sides;
		hfAngle=nAngle/2;
		qAngle=nAngle/4;

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

			//回転補正
			cAngle +=nAngle;

			//位置計算
			cx=Math.cos(cAngle)*outerR;
			cy=Math.sin(cAngle)*outerR;
			cx2=Math.cos(cAngle+hfAngle)*innerR;
			cy2=Math.sin(cAngle+hfAngle)*innerR;
			cx3=Math.cos(cAngle+hfAngle*2)*outerR;
			cy3=Math.sin(cAngle+hfAngle*2)*outerR;
			cx4=Math.cos(cAngle+hfAngle*3)*innerR;
			cy4=Math.sin(cAngle+hfAngle*3)*innerR;
			//中間点
			cx5=(cx2+cx)/2;
			cy5=(cy2+cy)/2;
			cx6=(cx2+cx3)/2;
			cy6=(cy2+cy3)/2;
			cx7=(cx4+cx3)/2;
			cy7=(cy4+cy3)/2;

			if(i == 0) {this.moveTo(cx5+base_x,cy5+base_y);}
			//Path
			this.arcTo(cx2+base_x,cy2+base_y,cx3+base_x,cy3+base_y,radius2);
			this.lineTo(cx6+base_x,cy6+base_y);
			this.arcTo(cx3+base_x,cy3+base_y,cx4+base_x,cy4+base_y,radius2);
			this.lineTo(cx7+base_x,cy7+base_y);

		}

}

//quadraticCurveTo
//drawRoundStarEx
createjs.Graphics.prototype.drawRoundStarEx=function(x,y,radius,radius2,sides,angle){

		var innerR=radius;
		var outerR=radius2;

		var base_x=x;
		var base_y=y;

		//描画データ
		var cx,cy,cx2,cy2,cx3,cy3;
		cAngle=angle*createjs.Matrix2D.DEG_TO_RAD;
		nAngle=0;

		//ライン描画
		nAngle=Math.PI*2/sides;
		hfAngle=nAngle/2;

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

			//回転補正
			cAngle +=nAngle;

			//位置計算
			cx=Math.cos(cAngle)*outerR;
			cy=Math.sin(cAngle)*outerR;
			cx2=Math.cos(cAngle+hfAngle)*innerR;
			cy2=Math.sin(cAngle+hfAngle)*innerR;
			cx3=Math.cos(cAngle+hfAngle*2)*outerR;
			cy3=Math.sin(cAngle+hfAngle*2)*outerR;

			if(i == 0) {this.moveTo(cx,cy);}
			this.quadraticCurveTo(cx2,cy2,cx3,cy3);

		}

}

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

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

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

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

//参考createPolyStarArcToCanvasB
//ベース幅、ベース高さ、ベース色、分割数、先端半径、外半径、内部色、パタン画像、ライン色、ライン幅、ライン、陰影色、陰影、角度補正
//(bw,bh,bscolor,division,radius,innerR,outerR,pcolor,patternimg,lcolor,linewidth,line,scolor,shadow,angle)
function createPSCanvas_B (bw,bh,bscolor,division,radius,innerR,pcolor,patternimg,lcolor,linewidth,line,scolor,shadow,angle) {

	if(!angle) {angle=0;}

	//outerRを中間に強制変更
	var outerR=Math.cos(Math.PI/division)*innerR;

	//Box
	var canvas=document.createElement("canvas");
	canvas.width=bw;
	canvas.height=bh;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=bscolor;
	ctx.fillRect(0,0,bw,bh);

	ctx.lineCap="butt";
	ctx.lineWidth=linewidth;
	ctx.strokeStyle=lcolor;
	ctx.fillStyle=pcolor;

	//中心補正
	var base_x=bw/2;
	var base_y=bh/2;

	//1 FILL
	//パタン画像
	if(patternimg){
		var pattern=ctx.createPattern(patternimg,"repeat");
		ctx.fillStyle=pattern;
	} else{
		ctx.fillStyle=pcolor;
	}
	//描画データ
	var cx,cy,cx2,cy2,cx3,cy3;
	var cAngle=angle*createjs.Matrix2D.DEG_TO_RAD;
	var nAngle;

	nAngle=Math.PI*2/division;
	hfAngle=nAngle/2;

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

		//回転補正
		cAngle +=nAngle;

		if(i == 0) {
			cx=Math.cos(cAngle)*outerR;
			cy=Math.sin(cAngle)*outerR;
			ctx.moveTo(cx+base_x,cy+base_y);
		}

		cx2=Math.cos(cAngle+hfAngle)*innerR;
		cy2=Math.sin(cAngle+hfAngle)*innerR;
		cx3=Math.cos(cAngle+hfAngle*2)*outerR;
		cy3=Math.sin(cAngle+hfAngle*2)*outerR;

		//Fill
		ctx.arcTo(cx2+base_x,cy2+base_y,cx3+base_x,cy3+base_y,radius);
		if(i == division-1) {
			ctx.lineTo(cx+base_x,cy+base_y);
		}

	}
	if(shadow) {set_shadow (ctx,scolor);}
	ctx.fill();//透明度一律

	//2 LINE
	if(line) {
		//描画データ
		cAngle=angle*createjs.Matrix2D.DEG_TO_RAD;
		nAngle=0;

		//ライン描画
		nAngle=Math.PI*2/division;
		hfAngle=nAngle/2;

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

			//回転補正
			cAngle +=nAngle;

			//ctx.strokeStyle=lcolor;
			//ctx.beginPath();

			if(i == 0) {
				ctx.strokeStyle=lcolor;
				ctx.beginPath();
				cx=Math.cos(cAngle)*outerR;
				cy=Math.sin(cAngle)*outerR;
				ctx.moveTo(cx+base_x,cy+base_y);
			}

			cx2=Math.cos(cAngle+hfAngle)*innerR;
			cy2=Math.sin(cAngle+hfAngle)*innerR;
			cx3=Math.cos(cAngle+hfAngle*2)*outerR;
			cy3=Math.sin(cAngle+hfAngle*2)*outerR;

			//Line
			ctx.arcTo(cx2+base_x,cy2+base_y,cx3+base_x,cy3+base_y,radius);
			if(i == division-1) {
				ctx.lineTo(cx+base_x,cy+base_y);
			}

		}

		//陰影a=0で消す
		if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
		ctx.stroke();

	}

	return canvas;
}

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

//START
init();

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


CSS

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


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

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


簡単な説明


[ 簡単な説明の目次 ]



 

 

Round PolyStar 角丸多角形の描画 2

▲[ 目次 ]


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


[説明図]

 

1. 同じ半径でも先端が角丸のため大きさなどが違ったりする所が大きな相違点です。
2. 3種類ありますので、それぞれの設定書式の少々の違いがあります。
3. 中心を図形の中央にしていますので、画像の挿入にはMatrix処理が必要になります。
4. 通常の描画などの使用にはテスト結果においては問題はない様です。(正式なものではなく拡張していますので、何らかの問題が出る可能性はあると思います?)
5. quadraticCurveTo()、arcTo()、の2つの形式、3種類で描画します。
6. バージョン 0.7.0 でも一応動作可能です。


3種類の角丸処理形式

▲[ 目次 ]


 

Graphicsクラスを拡張し、メソッドとして利用できるようにしていますので便利です。
角丸の形状の違う3種用意しました、drawPolyStar()と同じ様に処理できるのが特徴です。

 

createjs.Graphics.prototype.xxxXxxxx=function() {........}、の形式でつくりました。
拡張ですので明示的にdrawRoundPolyStarExとEx文字をいれましたが、関数名などは自由に変更できます。
実態は、単に外形のパスを記載しているだけです。


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



var star=new createjs.Shape();
star.graphics.beginFill("#FF0000").drawRoundPolyStarEx(....);

//drawRoundPolyStarEx関数
createjs.Graphics.prototype.drawRoundPolyStarEx=function(x,y,radius,radius2,sides,pointSize,angle){
	略す
}

1. シングルarc()処理、drawRoundPolyStarEx()、山の部分が角丸になります。
2. ダブルarc()処理、drawDoubleRoundPolyStarEx()、山、谷、2箇所が角丸になります。
3. 2次ベジェ曲線処理、drawRoundStarEx()、星型というよりも花型というべきでしょうか。


角丸処理のため、一般的に半径より小さめに描かれますし、設定次第では崩れたり仕易いので描画状況を確認しながら作業を進めます。


1. drawRoundPolyStarEx()

▲[ 目次 ]


drawPolyStarとほぼ同様にしました。arc()処理のために角丸の適用状態が変わりますから、設定の角丸半径でないように見える時もあります。


1. x y 原則 0 0 を指定ください。
2. radius 図形の半径、角丸のため通常半径より小さく描写されます。
3. radius2 先端角丸の半径、分割数によっては形状に違いがあります。
4. sides 分割数、原則3分割以上。(2でも描画可能)
5. pointSize 0.2-1 の値、1 で正多角形になります。(1以上も入力出来るが形状が変わる)
6. angle 図形の回転修正値、デグリー値で指定します。



サンプル1の例
//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
.drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle)

.drawRoundPolyStarEx(0,0,90,5,9,0.4,0)

● 実際の処理
Shapeをつくり、2ドット幅のline、#20B2AA 色のFillを描き、陰影処理をしています。


var radius=90;
var radius2=5;
var sides=9;
var pointSize=0.4;
var angle=0;//デグリー値

var starEx=new createjs.Shape();
starEx.graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

starEx.x=80;
starEx.y=120;
starEx.shadow=shadow;
mainContainer.addChild(starEx);

正多角形にするには、pointSize を 1 に設定すれば「強制的に正多角形に」しますが、計算で求めるなら下記の計算値でなる。


//正多角形にする
//pointSize=Math.cos(Math.PI/sides);

2. drawDoubleRoundPolyStarEx()

▲[ 目次 ]


上記のシングルと同様の設定にしました。あまり大きな角丸半径の時は図形が崩れやすい。


1. x y 原則 0 0 を指定ください。
2. radius 図形の半径、角丸のため通常半径より小さく描写されます。
3. radius2 先端角丸の半径、分割数によっては形状に違いがあります。
4. sides 分割数、原則3分割以上。(2でも描画可能)
5. pointSize 0.2-1の値、1 で正多角形になります。(1以上も入力出来るが形状が変わる、
正多角形の場合は、谷部分の角丸は無くなる)
6. angle 図形の回転修正値、デグリー値で指定します。



サンプル10の例
//X、Y、外半径、先端半径、分割数、ポイントサイズ、角度補正
.drawDoubleRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle)

.drawDoubleRoundPolyStarEx(0,0,80,10,5,0.5,0)

● 実際の処理
Shapeをつくり、2ドット幅のline、#20B2AA 色のFillを描き、陰影処理をしています。


var radius=80;
var radius2=10;
var sides=5;
var pointSize=0.4;
var angle=0;//デグリー値

var starEx=new createjs.Shape();
starEx.graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawDoubleRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

starEx.x=540;
starEx.y=300;
starEx.shadow=shadow;
mainContainer.addChild(starEx);

3. drawRoundStarEx()

▲[ 目次 ]


外側の半径、 内側半径を旨く調整します、2次ベジェ曲線処理ですから角丸の半径指定はありません。形状は成り行き任せになります。


1. x y 原則 0 0 を指定ください。
2. radius 図形の外側の半径、角丸のため通常半径より小さく描写されます。
3. radius2 内側半径。(原則、外側の半径より小さくなります、逆転すれば形状が変わります)
4. sides 分割数、原則3分割以上。(2でも描画可能)
5. angle 図形の回転修正値、デグリー値で指定します。



サンプル7の例
//X、Y、外半径、内半径、分割数、角度補正
.drawRoundStarEx(0,0,radius,radius2,sides,angle);

.drawRoundStarEx(0,0,100,50,5,0);

● 実際の処理
Shapeをつくり、2ドット幅のline、#20B2AA 色のFillを描き画像を挿入しているので、Matrix処理が必要である。最後に陰影処理をしています。

Matrix処理での画像位置の移動は、原則画像の大きさを基準として計算する。XY方向ともマイナス方向に移動させれば良い。画像が確実あるならば、if(img)文はいらないが、画像がないと「エラー」になり易いので注意が必要。
とかく、beginBitmapFill()にも、画像がないと問題が起きるので注意が必要です。


var img=assets[0];
//matrix補正用画像の大きさ
var imgWidth=640;
var imgHeight=400;

var radius=100;
var radius2=50;
var sides=5;
var angle=0;//デグリー値

var mtx=new createjs.Matrix2D();
mtx.translate(-imgWidth/2,-imgHeight/2);

var star=new createjs.Shape();
if(img) {
	star.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img,"no-repeat",mtx).drawRoundStarEx(0,0,radius,radius2,sides,angle);
}
star.x=80;
star.y=300;
star.shadow=shadow;
mainContainer.addChild(star);

図形の染めと画像の挿入

▲[ 目次 ]


図形の染め、グラデーション、画像の挿入処理などは、Graphicsクラス同様で違いはありません。
ただし、画像の挿入はMatrix処理が必要です。


グラデーションで染める

▲[ 目次 ]


 

グラデーションで染めるには、グラデーション塗りのメソッドを使用すればよい、サンプルでは、以下のように設定している。通常のグラデーション塗りそのままです。

● LinearGradient
原点が図形の中央にあることを考慮して設定する。


...beginLinearGradientFill(["#FFD700","#FF0000"],[0,1],-100,0,0,100)..

● RadialGradient
原点が図形の中央にあることを考慮して設定する。


...beginRadialGradientFill(["#6496ED","#ADD8E6"],[0,1],50,50,10,100,100,200)..

Canvasエレメントの挿入

▲[ 目次 ]


他の人はあまりしないが、私は頻繁に「Canvasエレメント」を利用する。画像と扱いが同じであるからMatrix処理が必要である。

画像をLOAD出来ない場合の、代替画像としても利用できるので以外と便利である。
例では、グラデーションCanvasエレメント(画像)をつくり挿入している。Fill部分とLine部分を分離してコンテナ収容の形にしてみた。


//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
var img=createLineGradBox (200,200,"#9400D3","#000000","#000000","y",2);

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

var mtx=new createjs.Matrix2D();
mtx.translate(-imgWidth/2,-imgHeight/2);

//コンテナ
var wrap=new createjs.Container();
var star=new createjs.Shape();
var line=new createjs.Shape();

//カンバス画像
if(img){
	star.graphics.beginBitmapFill(img,"no-repeat",mtx).drawRoundStarEx(0,0,radius,radius2,sides,angle);
	line.graphics.ss(2).s("#FFFFFF").drawRoundStarEx(0,0,radius,radius2,sides,angle);
}

star.shadow=new createjs.Shadow("#000000",0,0,8);
wrap.addChild(star,line);
wrap.x=360;
wrap.y=300;
mainContainer.addChild(wrap);

JSには未使用の「Canvasエレメント用関数」もあります。使用方法などは「前ページ」を参照ください。


画像の挿入処理

▲[ 目次 ]


中心を図形中央に描画していますので、画像挿入の場合初期リピート設定は「repeat」でもあり、図のように壊れた状態で表示される。修正にはMatrixを利用します。

 

 

BitmapFill書式


beginBitmapFill(画像,リピート,マトリックス)


img=result値;

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

var mtx=new createjs.Matrix2D();
mtx.translate(-imgWidth/2,-imgHeight/2);

インスタンス=new createjs.Shape();
インスタンス.graphics.beginBitmapFill(img,"no-repeat",mtx).drawXxxx(0,0,...);

画像は読み込み完了の事。Matrixの設定は状況に応じて、書き方は自由です。


Graphicsクラスの書き方

▲[ 目次 ]


大体2種類の書き方がありますが、好みの問題でありどちらも同じ結果になります。サンプル 1 を例にしますと.....


Shapeクラスのgraphicsプロパティで処理

var starEx=new createjs.Shape();
starEx.graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);

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

新たにGraphicsクラスのインスタンスを作って処理

var graphics=new createjs.Graphics();
graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);
var starEx=new createjs.Shape(graphics);

画像のマスク処理

▲[ 目次 ]


画像のマスク処理も通常通り行えますが、原則、画像の中心を、図形の中心に合わせます。
サンプルでは、画像をBitmapにして、Shapeでマスクを作り処理します。位置を完全に合わせるため共にコンテナに収容した。(必要によってはマスクは非表示にする)


var img=assets[2];

//画像の大きさ
var imgWidth=640;
var imgHeight=400;

var radius=90;
var radius2=10;//10
var sides=5;//5
var pointSize=0.4;//1-0.1
var angle=0;//デグリー値

//コンテナ
var wrap=new createjs.Container();
//IMAGE
var imageBox=new createjs.Bitmap(img);
imageBox.regX=imgWidth/2;
imageBox.regY=imgHeight/2;
var star=new createjs.Shape();

//Fillマスク材
star.graphics.beginFill("#000000").drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);
imageBox.mask=star;
star.shadow=new createjs.Shadow("#000000",4,4,2);
wrap.x=830;
wrap.y=120;
wrap.addChild(star,imageBox);
mainContainer.addChild(wrap);

マスク材を直下に配置して位置を合わせれば、マスク材に陰影を付けれるが多少「クセ」がある。
マスク以外の用途に用いる場合は、この辺は十分確認してください。(さほどの問題はないと思うが?)
上記サンプルでは「ラップ」しているので「ラップ」に陰影処理しても良いが「ブラウザ」毎に確認してください。


着色する
.beginFill("#000000").

半透明にすれば陰影も透過する
.beginFill('rgba(0,0,0,0.5)').

役に立たない
.beginFill().

陰影がつかない
star.visible=false;

arcToでの描画

▲[ 目次 ]


角丸図形の描画は下図のように arcTo で行っています。

 

arcToでの描画
分割数分、ループを繰り返して外周の形に沿ったパスをつくります。


ctx.moveTo(始点X,始点Y);//描画始点に移動
ctx.arcTo(交差点X,交差点Y,終点X,終点Y,角丸半径);//角丸の終点まで描画
ctx.lineTo(終点X,終点Y);//終点までラインを描画

● 角丸シングル、arcToでの描画

内径の位置を始点として、図のように描いた。


●角丸ダブル、arcToでの描画

内径と外形位置を結ぶ斜線の中間点を始点としてarcToで、図のように描いた。中間点各座標位置の半分の値であるから容易に算出できる。(2番目の中間点を考慮せずarcToで繋いで処理することも可能)
詳細は 関数drawDoubleRoundPolyStarEx を参照ください。


● 正多角形での描画

原則多角形での描画は星形です。正多角形にするには内径の位置を、中間点にくるように合わせれば良い。
関数では、pointSize を 1 に設定すれば「強制的に正多角形に」しますが、計算で求めるなら下記の計算値でなる。



pointSize=Math.cos(Math.PI/sides);

Math.cos(Math.PI/sides)で求められる数値を 1 として補正する方法もあるかと思うが、対処していない。


図形配置角度の補正

▲[ 目次 ]


上図の様に谷の部分から描画されていますので、常に図形は傾いた状態なので、描画の際回転角度を与えれば好みの角度になります。
初期の傾き = 360 / (分割数 x 4) になっていますので、補正するならば分割が奇数偶数デモ違いますが、下記の値を angleに与えればほぼ傾きの無い状態になります。
分割数が多ければ、傾きはさほど気にはなりません。



var sides=分割数;
var angle=180/(sides*2);//デグリー値

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

または
var angle=90;

陰影処理

▲[ 目次 ]


階層構造、陰影処理するインスタンス条件の違いなどで、ブラウザにより多少相違がありますので、ご了承ください。
制御するならそれに適した構造を作る必要があります。下に2つの例を記す。


● starとlineを一緒にしている例、サンプル1他
1つのShapeに陰影処理しているのでどちらにも陰影がつく。


//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
------------------------------------------------------
var starEx=new createjs.Shape();
starEx.graphics.ss(2).s("#FFFFFF").beginFill("#20B2AA").drawRoundPolyStarEx(0,0,radius,radius2,sides,pointSize,angle);
starEx.shadow=shadow;
mainContainer.addChild(starEx);

● starとlineを分離している例、サンプル8
starにのみ陰影処理している。


//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
------------------------------------------------------
//コンテナ
var wrap=new createjs.Container();
var star=new createjs.Shape();
var line=new createjs.Shape();

//グラデ
star.graphics.beginLinearGradientFill(["#FFD700","#FF0000"],[0,1],-100,0,0,100).drawRoundStarEx(0,0,radius,radius2,sides,angle);
line.graphics.ss(2).s("#FFFFFF").drawRoundStarEx(0,0,radius,radius2,sides,angle);

star.shadow=new createjs.Shadow("#000000",4,4,8);
wrap.addChild(star,line);
mainContainer.addChild(wrap);

正多角形描画の pointSize 変更

▲[ 目次 ]


この部分、2014/04/19 追記します。

関数では、pointSize を 1 に設定すれば「強制的に正多角形に」しますが、drawPolyStar関数と同様に、pointSize=0 で「正多角形に」したい場合は下記の様に変更ください。


あくまでも、ベースなどの図形を描く目的のためです。 角丸があるために、Tween の途中などで pointSize を変更する様な用途には向きませんので、この辺は自己責任で解決するようにしてください。



//arcTo
//drawRoundPolyStarEx
createjs.Graphics.prototype.drawRoundPolyStarEx=function(x,y,...){

		略す

		//outerRを中間に強制変更
		if(!pointSize) {pointSize=0;}
		if(pointSize == 0) {
			outerR=Math.cos(Math.PI/sides)*innerR;
		}

		略す

}

//ダブルarcTo
//drawDoubleRoundPolyStarEx
createjs.Graphics.prototype.drawDoubleRoundPolyStarEx=function(x,y,...){

		略す

		//outerRを中間に強制変更
		if(!pointSize) {pointSize=0;}
		//1ではエラーになるので.99補正
		if(pointSize == 0) {
			outerR=Math.cos(Math.PI/sides)*innerR*0.99;
		}

		略す

}

 

 

その他

▲[ 目次 ]


createPolyStarArcToCanvasB (createPSCanvas_B)


前ページ掲載のcreatePolyStarArcToCanvas関数を強制的に正多角形専用にしたものである。arcToでの描画で一気に書き上げてみる。上記のものとは違いますし、どうしても必要なものでもない。
内半径を無視して外半径のみで計算します。ここではテスト的に透過してみる。サンプル 12 になります。


 

1. 中間点を計算してループでそこからarcToで描画して、最後はlineToで終了する。
2. 状況にもよるが、ループを抜けてから、fill()などを実行するときれいになる。(ほんの少しの処理違いで見た目が違ってくる、意図するものをつくるには結構大変、上図参照)
3. 透明度を与えると情況の判断になるので、旨く修正する。(癖があるので、何回もいろいろと作らないとわからない。moveTo()、beginPath()などの使い方がキーポイントのようです)
4. 透明度を与えることはあまり無いので、多少不具合はあっても通常は影響は無い。
5. 透明度を与えると陰影も薄くなる。


参考、ループを抜けてから、fill()などを実行 (状況にもよりますが...)


function createXxxx (....) {

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

		略す
		//ctx.fill();

	}
	ctx.fill();//ここで実行した方がよい

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

		略す
		//ctx.stroke();

	}
	ctx.stroke();//ここで実行した方がよい

	return canvas;
}

● 書式


//ベース幅、ベース高さ、ベース色、分割数、先端半径、外半径、内半径、内部色、パタン画像、ライン色、ライン幅、ライン、陰影色、陰影、角度補正
//(bw,bh,bscolor,division,radius,innerR,outerR,pcolor,patternimg,lcolor,linewidth,line,scolor,shadow,angle)
createPSCanvas_B (bw,bh,bscolor,division,radius,innerR,outerR,pcolor,patternimg,lcolor,linewidth,line,scolor,shadow,angle);

● 実際例
Canvasエレメントでつくり表示するので、Bitmap()に挿入している。


var img=assets[2];
var angle=0;//デグリー値

//ベース幅、ベース高さ、ベース色、分割数、先端半径、外半径、内部色、パタン画像、ライン色、ライン幅、ライン、陰影色、陰影、角度補正
//(bw,bh,bscolor,division,radius,innerR,outerR,pcolor,patternimg,lcolor,linewidth,line,scolor,shadow,angle)
var star=createPSCanvas_B(200,200,'rgba(0,0,0,0)',5,20,60,'rgba(0,0,0,0.2)',img,'#FFFFFF',1,true,'#000000',true,angle);

var starBox3=new createjs.Bitmap(star);//Canvasエレメント表示
starBox3.regX=100;
starBox3.regY=100;
starBox3.x=840;
starBox3.y=300;
mainContainer.addChild(starBox3);

中間までの半径の計算は、以下の様になる。


var division=5;
var innerR=60;
//outerRを中間に強制変更
var outerR=Math.cos(Math.PI/division)*innerR;

▲[ 目次 ]


前ページ掲載の同じcreate形式のものです。

【参照】当方の記事: CreateJS Round PolyStar 角丸多角形の描画


使用画像

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


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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]