POPSブログ

CreateJS ラベルを中心に配置し、MouseOver で背景を変化させるボタンを考える

249

  Category:  javascript2013/09/21 pops 

一般的な、MouseOver で色が変化するボタンを作る場合、Textクラスに textAlign:center、textBaseline:middle を使用して作ると利便性のあるボタンになります。ブラウザにより文字の上下方向にズレが出ますが、これら問題点の修正と、効率的に作る方法を考えてみた。
easeljs-0.7 でのテストです。

 

CreateJS ラベルを中心に配置し、MouseOver で背景を変化させるボタンを考える


2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。動作など確認してeaseljs-0.7用に更新しています。(2013/10/23)


一般的にボタンの中に文字を配置する場合は中央配置の方がキレイに仕上がります。regX regYを使用せず textAlign、textBaseline で中央に配置なるように設計しました。
多少の問題も出ますが、個人的にボタンはこの方法で作るのが一番良いように思います。
(このページ以前の、ラベル付きのボタンは regX regY で中心補正しての設計で作っています、高さの補正はなし)


[説明図]

 

DEMO


CreateJS テキストを中心に配置したボタンのデモ、(createJS037.js)


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


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.0.min.js"></script>

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


HTML (HTML5)


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

JS

createJS037.js、JS名は任意に変更可。


//日本語
//createJS037.js
//easeljs-0.7ボタンデモ用

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

//ボタンコンテナ、インスタンス配列
var btncontainer;
var myhitBtn=[];
var btncontainer2;
var myhitBtn2=[];
var btncontainer3;
var myhitBtn3=[];
var btncontainer4;
var myhitBtn4=[];
var btncontainer5;
var myhitBtn5=[];

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

	//角丸ボタンcontainer
	btncontainer=new createjs.Container();
	btncontainer.x=60;
	btncontainer.y=40;
	stage.addChild(btncontainer);
	//角ボタンcontainer2
	btncontainer2=new createjs.Container();
	btncontainer2.x=60;
	btncontainer2.y=80;
	stage.addChild(btncontainer2);
	stage.update();
	//楕円ボタンcontainer3
	btncontainer3=new createjs.Container();
	btncontainer3.x=60;
	btncontainer3.y=120;
	stage.addChild(btncontainer3);
	//円ボタンcontainer4
	btncontainer4=new createjs.Container();
	btncontainer4.x=60;
	btncontainer4.y=180;
	stage.addChild(btncontainer4);
	//多角星ボタンcontainer5
	btncontainer5=new createjs.Container();
	btncontainer5.x=60;
	btncontainer5.y=250;
	stage.addChild(btncontainer5);

	//ボタンを作り表示する
	//角丸ボタン
	roundRectBtns();
	//角ボタン
	rectBtns();
	//楕円ボタン
	ellipseBtns();
	//円ボタン
	circleBtns();
	//多角星ボタン
	starBtns();

}

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

//DRAW-roundRectBtn
function roundRectBtns() {

	var btn_width=60;//幅
	var btn_height=20;//高さ
	var c_radius=5;//コーナー半径
	var btn_spc=20;//ボタン間隔スペース
	var center=true;//全体の中央補正

	var labels=["BUTTON1","BUTTON2","BUTTON3","BUTTON4","BUTTON5"];//ラベル
	var num=labels.length;//数

	for (var i=0; i < num; i++) {
		//x,y,w,h,r,c,label,size,lc,overc,outc
		//RoundRect center補正ボタン
		myhitBtn[i]=createRoundRectBtn_center (-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",labels[i],"12px","#FFFFFF","#48D1CC","#20B2AA");
		//myhitBtn[i]=createRoundRectBtn_center (-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",labels[i],"italic bold 12px","#FFFFFF","#48D1CC","#20B2AA");//italic bold
		myhitBtn[i].cursor="pointer";
		myhitBtn[i].x=(btn_width+btn_spc)*i;
		myhitBtn[i].y=0;
		//addChild
		btncontainer.addChild(myhitBtn[i]);
	}

	var btnbox_w=myhitBtn[num-1].x-myhitBtn[0].x;
	//中央配置補正
	if (center) {btncontainer.x=(canvasWidth-btnbox_w)/2;}
	stage.update();
}

//DRAW-rectBtn
function rectBtns() {

	var btn_width=60;//幅
	var btn_height=20;//高さ
	var c_radius=0;//半径、未使用
	var btn_spc=20;//ボタン間隔スペース
	var center=true;//全体の中央補正

	var labels=["BUTTON1","BUTTON2","BUTTON3","BUTTON4","BUTTON5"];//ラベル
	var num=labels.length;//数

	for (var i=0; i < num; i++) {
		//x,y,w,h,r,c,label,size,lc,overc,outc
		//Rect center補正ボタン
		myhitBtn2[i]=createRectBtn_center (-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",labels[i],"12px","#FFFFFF","#FFD700","#FFDAB9");
		myhitBtn2[i].cursor="pointer";
		myhitBtn2[i].x=(btn_width+btn_spc)*i;
		myhitBtn2[i].y=0;
		//addChild
		btncontainer2.addChild(myhitBtn2[i]);
	}

	var btnbox_w=myhitBtn2[num-1].x-myhitBtn2[0].x;
	//中央配置補正
	if (center) {btncontainer2.x=(canvasWidth-btnbox_w)/2;}
	stage.update();
}

//DRAW-ellipseBtn
function ellipseBtns() {

	var btn_width=60;//幅
	var btn_height=20;//高さ
	var c_radius=0;//半径、未使用
	var btn_spc=20;//ボタン間隔スペース
	var center=true;//全体の中央補正

	var labels=["BUTTON1","BUTTON2","BUTTON3","BUTTON4","BUTTON5"];//ラベル
	var num=labels.length;//数

	for (var i=0; i < num; i++) {
		//x,y,w,h,r,c,label,size,lc,overc,outc
		//Ellipse center補正ボタン
		myhitBtn3[i]=createEllipseBtn_center(-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",labels[i],"12px","#FFFFFF","#EE82EE","#D8BFD8");
		myhitBtn3[i].cursor="pointer";
		myhitBtn3[i].x=(btn_width+btn_spc)*i;
		myhitBtn3[i].y=0;
		//addChild
		btncontainer3.addChild(myhitBtn3[i]);
	}

	var btnbox_w=myhitBtn3[num-1].x-myhitBtn3[0].x;
	//中央配置補正
	if (center) {btncontainer3.x=(canvasWidth-btnbox_w)/2;}
	stage.update();
}

//DRAW-circleBtn
function circleBtns() {

	var btn_width=60;//テキスト幅
	var btn_height=20;//高さは未使用
	var c_radius=30;//円の半径テキスト幅の半分
	var btn_spc=20;//ボタン間隔スペース
	var center=true;//全体の中央補正

	var labels=["BUTTON1","BUTTON2","BUTTON3","BUTTON4","BUTTON5"];//ラベル
	var num=labels.length;//数

	for (var i=0; i < num; i++) {
		//x,y,w,h,r,c,label,size,lc,overc,outc
		//Circle center補正ボタン
		myhitBtn4[i]=createCircleBtn_center(0,0,btn_width,btn_height,c_radius,"#FFFFFF",labels[i],"12px","#FFFFFF","#FF1493","#FFC0CB");
		myhitBtn4[i].cursor="pointer";
		myhitBtn4[i].x=(btn_width+btn_spc)*i;
		myhitBtn4[i].y=0;
		//addChild
		btncontainer4.addChild(myhitBtn4[i]);
	}

	var btnbox_w=myhitBtn4[num-1].x-myhitBtn4[0].x;
	//中央配置補正
	if (center) {btncontainer4.x=(canvasWidth-btnbox_w)/2;}
	stage.update();
}

//DRAW-starBtn
function starBtns() {

	var btn_width=60;//幅
	var btn_height=20;//高さ
	var c_radius=30;//円の半径
	var btn_spc=20;//ボタン間隔スペース
	var center=true;//全体の中央補正

	var labels=["BTN1","BTN2","BTN3","BTN4","BTN5"];//ラベル
	var num=labels.length;//数

	for (var i=0; i < num; i++) {
		//x,y,w,h,r,c,label,size,lc,overc,outc
		//Star center補正ボタン
		myhitBtn5[i]=createStarBtn_center(0,0,btn_width,btn_height,c_radius,"#FFFFFF",labels[i],"12px","#FFFFFF","#87CEFA","#6496ED");
		myhitBtn5[i].cursor="pointer";
		myhitBtn5[i].x=(btn_width+btn_spc)*i;
		myhitBtn5[i].y=0;
		//addChild
		btncontainer5.addChild(myhitBtn5[i]);
	}

	var btnbox_w=myhitBtn5[num-1].x-myhitBtn5[0].x;
	//中央配置補正
	if (center) {btncontainer5.x=(canvasWidth-btnbox_w)/2;}
	stage.update();
}

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

//create-RoundRectベタ塗り/center補正
//色cは未使用、outcを使用している
function createRoundRectBtn_center (x,y,w,h,r,c,label,size,lc,overc,outc) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var s=new createjs.Shape();
	s.graphics.s().beginFill(outc);//本来は色cを使用
	operaRoundRect(s,x,y,w,h,r);
	btn.addChild(s);
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";

	//firefox補正
	if (firefox) {tx.y=1;}
//opera漢字補正用
//if (window["opera"]) {tx.y=-1;}

	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	//tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(overc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(outc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	return btn;
}

//create-Rectベタ塗り/center補正
function createRectBtn_center (x,y,w,h,r,c,label,size,lc,overc,outc) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var s=new createjs.Shape();
	s.graphics.s().beginFill(outc).drawRect(x,y,w,h);//本来は色cを使用
	btn.addChild(s);
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";

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

	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(overc).drawRect(x,y,w,h);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(outc).drawRect(x,y,w,h);
		stage.update();
	});
	return btn;
}

//create-Ellipseベタ塗り/center補正
function createEllipseBtn_center (x,y,w,h,r,c,label,size,lc,overc,outc) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var s=new createjs.Shape();
	s.graphics.s().beginFill(outc).drawEllipse(x,y,w,h);//本来は色cを使用
	btn.addChild(s);
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";

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

	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(overc).drawEllipse(x,y,w,h);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(outc).drawEllipse(x,y,w,h);
		stage.update();
	});
	return btn;
}

//create-Circleベタ塗り/center補正
function createCircleBtn_center (x,y,w,h,r,c,label,size,lc,overc,outc) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var s=new createjs.Shape();
	s.graphics.s().beginFill(outc).drawCircle(x,y,r);//本来は色cを使用
	btn.addChild(s);
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";

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

	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(overc).drawCircle(x,y,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(outc).drawCircle(x,y,r);
		stage.update();
	});
	return btn;
}

//create-Starベタ塗り/center補正
function createStarBtn_center (x,y,w,h,r,c,label,size,lc,overc,outc) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var s=new createjs.Shape();
	s.graphics.s().beginFill(outc).drawPolyStar(0,0,r,16,.2,-90);//本来は色cを使用
	btn.addChild(s);
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";

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

	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(overc).drawPolyStar(0,0,r,16,.2,-90);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(outc).drawPolyStar(0,0,r,16,.2,-90);
		stage.update();
	});
	return btn;
}

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


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

//START
init();

注釈文を削除すれば、幾分早くなります。


CSS

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


/*日本語 createJS037.css*/

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

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

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


簡単な説明


テキスト中央配置のボタンの問題点など

デモでは5種類を作りました。汎用性が有りキレイなものは、やはり角丸RoundRectと思います。沢山横に並べるには径の小さい円形のものでしょうか?サンプルはベタ塗りですがグラデーション塗りに変更も容易に可能ですし、これを基本に作りこめば制作も早く済みます。


[説明図] ブラウザ毎のキャプチャー例、漢字部分の数字は通常の数字を入力しています。

 

一応、Firefoxのみ修正しています。Operaは利用されているのが数%に満たない位ですから、そのままでも良いかとも思います?、修正するかは個人の自由判断です。Safari(Mac)、IE10、は未確認です。


テキスト中央配置のボタンを作る


1. 通常ボタンは、TextクラスとShapeクラスをContainerクラスでラップする形式で作ります。
(Shapeクラスにaddする事が出来ないため、Containerクラスが必要になります)
2. Textクラスに textAlign:center、textBaseline:middle を設定すると文字列の中心が原点00(左上に移動)となります。regX regYを使用せずに、文字列の中心(左上に移動するのでここを中心する)に合わせて図形を作るのが特徴。しいて言えばBOX(テキストの大きさ)の左上を中心にして作る様なものです。
fontサイズを変更しても、文字数が変わっても位置は同じ中心で変化が無いので、ボタン専用ならばこちらの作り方が便利と思います。
3. ボタンの背景となる、graphics は中心が 00 に成るように描画します(図形形状によっては面倒な場合あり)。但し、文字ズレが有っても、ボタンインスタンスの中心は図形の中央です。(フシギを感じる所だ)
4. 解釈の違いが原因で、ブラウザにより文字の位置が上下方向に少しズレが出ます。fontの種類によっても多少違ってきますが、Textの位置「y値」で修正可能です。(デモでは Arial を使用しています、図参照)
5. Firefoxで 1-2ピクセル ずれますので(Operaでは漢字で1ピクセルずれます)、デモでは Firefox のみ 1ピクセル 補正しています。fontの大きさ、ボタンの高さによって若干違ってくる場合があります。
ブラウザ違いでの、ズレなど将来修正されるものか?、は不明です。ズレが無ければ修正の必要は無い!。
6. MouseOver (rollover) で陰影が壊れる場合がありますが修正可能です。(最初の図、右側参照)


ズレに対する考えは個人で違いますので、補正しなくとも問題が無い判断なら省略できます。


文字は Arial を使用しています

文字はCSS設定ですので、自由にfontの種類を指定出来ますが、必ず、マシン環境に「指定font」が有るとは限りませんので、問題の少ない Arial にしています。
特に「漢字」を使用する場合はfontの種類によりズレに差異が有るようですので、テキストの「y値」を修正下さい。


事前にfirefoxの判定をしておく

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

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

漢字使用の場合operaは以下で可能

if (window["opera"]) {tx.y=-1;}

テキスト y値 を変更しても、ラベルの位置だけが変わり、図形の中心は変わりません。


Text にマスク処理をしています

ブラウザのText周りの対応がマチマチな事もあり、詳細が判りませんので一応、Textにマスク処理をして文字の食み出しの無いようにしました。個人の判断でこの処理を削除してもかまいません。
また文字を認識し易くするためテキストに陰影処理をしました。shadow形態は変更可能です。


//文字の食み出し防止mask
tx.mask=s;

----------------------------------------------
テキストにMouseOverの影響は無いようです、テキスト以外で使用は注意

btn.shadow=shadow;

TextのmaxWidth設定

TEXTの最大幅指定の、maxWidth 設定をしていますので、本来ボタン幅よりは食み出しませんが、maxWidth に対応していないブラウザの場合に困りますので、上記の様にマスクで対処した訳です。
※ Safari(Win)は、古いのでmaxWidthに対応していない。Chrome台頭により、開発停止で新バージョンは出ない。
※ Safari(Mac)は、当方で確認できない。おそらく大丈夫であろうと思いますが?、
※ IE10は、IE9を踏襲しているものとみなし問題は起きないと推測している。

maxWidth設定はしていますが、原則、ボタン幅に収まる文字数(ラベル)にして下さい。


tx.maxWidth=w;

AS3でも、Safari(Mac)のFont周りが多少違った表示をするので、問題の少なかった Arial 指定にしている。
実際、Safari(Mac)については対応したく無いのがワタシ個人の本音である。


ボタンMouseOver時に陰影が壊れる

easeljs-0.7より mouseover mouseout が rollover rollout になりましたので変更します。
新しい、rollover rollout、が古い、mouseover mouseout、と同様です。


graphics処理の都合だと思いますが、ボタンMouseOver時に陰影が壊れる現象が起きます(図参照)。
下の様に、graphics の流しこみ時に「クリア」すれば起きません。
尚、MouseOver (rollover) 使用時は enableMouseOver() の設定が必要です(忘れ易いので注意)。


rollover rollout

ボタンは rollover rollout を使用した方がマチガイが少ない


//MouseOver設定/必要に応じ設定
stage.enableMouseOver(20);

----------------------------------------------
//rollover
btn.addEventListener("rollover",function () {
	s.graphics.clear();
	s.graphics.s().beginFill(.............

	略す

});
//rollout
btn.addEventListener("rollout",function () {
	s.graphics.clear();
	s.graphics.s().beginFill(.............

	略す

});

rollover rollout のアクションが必要で無い場合は、該当の関数を削除可能です。


mouseover mouseout

従来の mouseover mouseout も使用は出来るがイベント処理が違うので注意が必要です。
「デモ」では、イベント処理はしていません。



//MouseOver
btn.addEventListener("mouseover",function () {
	s.graphics.clear();
	s.graphics.s().beginFill(.............

	略す

});

クリックアクション

「デモ」では、「クリック」イベント処理はしていませんが設定には、easeljs-0.7より、イベント処理等大幅に変わりましたので注意が必要です。


Fontサイズ、太さ、斜体の指定

Fontサイズ、太さ、斜体の指定が出来ます、但しここでは Arial を使用しています。
文字サイズ指定部分に下記の様に、CSS記述で指定します。(表示は図参照)


角丸ボタン

//x,y,w,h,r,c,label,size,lc,overc,outc
//x位置,y位置,幅,高さ,コーナー半径,背景基本色,ラベル,文字サイズ,文字色,over色,out色
ボタンインスタンス=createRoundRectBtn_center (........文字サイズ......

----------------------------------------------
サイズ指定
"12px"

太さ指定
"bold 12px"

斜体太さ指定
"italic bold 12px"

Operaの角丸RoundRect描画について

角丸のgraphicsを描画する場合に、CreateJSでは drawRoundRect() で簡単に描画できる様に関数が用意されていますが、Operaで解釈の違いが原因で正しく描画しません
そのため独自の関数 operaRoundRect() を用意して描画しています。こちらは角丸部分の描画に quadraticCurveTo() を利用していますので問題が起きません。


MouseOverの場合を例に
通常のCreateJS関数で角丸処理する場合、(Operaはだめ)

s.graphics.s().beginFill(overc).drawRoundRect(x,y,w,h,r);

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

Operaのみ別処理するのも非効率的なので全てこちらで処理しています
一旦区切って、Shapeインスタンスを引数にしてRoundRect処理を実行する

s.graphics.s().beginFill(overc);
operaRoundRect(s,x,y,w,h,r);

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

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

始めのころはOperaと分離して処理していたが、現在は、CreateJSの角丸処理 drawRoundRect() を使用せず、全てのブラウザで独自の operaRoundRect() のみで処理しています。


[説明図]

shadowフィルター設定によっては見た目が違う場合も有ります。

 

● 図形の外形にラインを描く

「デモ」の図形は簡単なベタ塗りですが、外側にラインを描く際は次ぎの様、ラインスタイルを設定して、ライン幅、色を指定すれば良い。全ての図形共通になります。
現在、色 c は未使用なのでラインの色に流用しても良い。

陰影(shadow)処理をしていた場合にライン内側にも処理されます。Shadowフィルターの仕様のようです。


s.graphics.ss(ラインの幅).s(ラインの色).beginFill(図形背景色).....

s.graphics.ss(2).s("#FFFFFF").beginFill(overc).drawRoundRect(x,y,w,h,r);

勿論、図形背景もグラデーション塗りにする事も可能ですが、説明は省略します。


● 角丸RoundRectで角丸を作らない (Rectにする)

つまり四角形、Rect処理のみさせたければ、コーナー半径「r値」を 1 にすれば(0より大きい数値)、角丸は見えない。
また、コーナー半径「r値」をボタンの高さの半分にすれば、両端は半円状に成ります。


サンプルは一例である。テスト的なものですので自由に書き換えて遊んで下さい。
ボタン部品など事前に作っておけば、必要な場合に修正して使い回し出来ますので便利です。


「角丸RoundRectボタン」「shadowフィルター」については、重複する部分もありますが、下記記事を参照下さい。
(このページ以前の、ラベル付きのボタンは regX regY で中心補正しての設計で作っています、高さの補正はなし)

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




一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。
また、CreateJSの「仕様」もクルクル変わっていますので、バージョン違い等に充分注意下さい


実際に作らないと説明も意味不明と思う。以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]