2017-09-25
丸いボタンを作りたい！
だって、本来ボタンって、丸いモノでしょ。
・・・それはともかく、画像ボタンとかはあるけど、ボタン自体は結局四角くなってしまうため、丸とか、あと楕円や角丸の形で凹むボタンが欲しいなあと思って、かなり無理矢理系で作ってみたはいいけれど、使いどころが無いまま放置してあったのを、ちょこっと手直しして、なんとなくＵＰしてみる。（なでしこ１）
#----------------------------------------------------------- # イメージボタン #----------------------------------------------------------- # 画像ボタンとかは、ボタン自体は四角になってしまうため、 # 丸や楕円、角丸の形で凹むボタンとして作成したものです。 # 画像も使えますが、周囲にアンチエイリアスのかかってない # 単純形状のものに限ります。（影が変になるんで） #★便利機能としてイメージのサイズに合わせて、図形描画位置と、文字描画位置を取得する関数を追加。 #----------------------------------------------------------------------- ●イメージボタン作成（{数値=$FFFFFF}地色に{グループ=?}OBJから{数値=1}影幅,{数値=$000000}影色で） OBJの白色を$FFFFFEに画像色置換。 #白色は地色に置換されてしまうための措置； マスクをイメージとして作成。マスクの可視はオフ。マスクの画像はOBJ→名前。 処理用をイメージとして作成。処理用の可視はオフ。処理用の画像はOBJ→名前。 #マスク作成 マスクの0,0を点取得。 マスクをそれで画像マスク作成。 #ボタン押下時の画像を作成 #影の部分 マスクを処理用の0,0へ画像コピー。 処理用の黒色を影色に画像色置換。 #ボタン画像を影幅分ずらした位置に合成 マスクを画像ネガポジ。 マスクをOBJの0,0へ画像ANDコピー。 マスクを画像ネガポジ。 マスクを処理用の影幅,影幅へ画像ANDコピー。 OBJを処理用の影幅,影幅へ画像ORコピー。 #ボタンの透明色を地色に変換 マスクをOBJの0,0へ画像ORコピー。 OBJの白色を地色に画像色置換。 #ボタン押下時ようのイメージを作成 ON用=「{OBJ→名前}ON」。 「{ON用}をイメージとして作成。{ON用}の可視はオン。OBJを最前面。 {ON用}の位置はOBJ→位置。{ON用}の幅はOBJ→幅。{ON用}の高さはOBJ→高さ。 #処理用を元のボタンに合わせて切り抜く。 マスクを{ON用}の0,0へ画像ANDコピー。 処理用を{ON用}の0,0へ画像ORコピー。 {ON用}の白色を地色に画像色置換。 #ボタン押下のマウスイベント OBJ→マウス押した時は～自身→可視はオフ。 OBJ→マウス離した時は～自身→可視はオン。」をナデシコする。 #マスクと処理用は壊す。 VCL_FREE(マスク) VCL_FREE(処理用) ●イメージボタン可視設定（{グループ=?}OBJを|OBJのAに|Aで） ON用=「{OBJ→名前}ON」 「もし、A＝オンならば、OBJ→可視はオン。{ON用}→可視はオン。 違えば、OBJ→可視はオフ。{ON用}→可視はオフ。」をナデシコする。 ●イメージボタン位置変更（{グループ=?}OBJを|OBJのx,yに|x,yで） ON用=「{OBJ→名前}ON」 「OBJ→位置は"{x},{y}"。{ON用}→位置は"{x},{y}"」をナデシコする。 #----------------------------------------------------------------------- #----------------------------------------------------------- x1とは整数。y1とは整数。x2とは整数。y2とは整数。 mxとは整数。myとは整数。 ＊イメージボタン描画位置取得（{グループ=?}OBJの） x1=(線太さ/2)。y1=(線太さ/2)。x2=(OBJ→幅-線太さ/2)。y2=(OBJ→高さ-線太さ/2)。 ＊イメージボタンテキスト位置取得（Sで{グループ=?}OBJの） mx=(OBJ→幅/2)-(Sの文字幅取得/2)。my=(OBJ→高さ/2)-(Sの文字高さ取得/2) #----------------------------------------------------------- ＃以下はテスト 丸ボタンとはイメージ これについて 位置は"10,10"。幅は50。高さは50。可視はオン。 緑色で画面クリア。 塗り色は白色。線色は黒色。線太さは2。 丸ボタンのイメージボタン描画位置取得。 x1,y1からx2,y2へ円。 文字色は赤色。文字書体は「|20|太字」 「OK」で丸ボタンのイメージボタンテキスト位置取得。 mx,myへ「OK」を文字描画。 クリックした時は～ 自身の可視はオン。 ＃処理によっては必要。（ダイアログ表示や秒待つ命令でウェイトがかかる時とか、処理が終わるまでボタンが押ささったままになっちゃうんで） 10,10で丸ボタンのイメージボタン位置変更。 「ＯＫ！」と言う。 角丸ボタンとはイメージ これについて 位置は"100,15"。幅は90。高さは40。可視はオン。 緑色で画面クリア。 塗り色はウィンドウ背景色。線色は黒色。線太さは3。 角丸ボタンのイメージボタン描画位置取得。 x1,y1からx2,y2へ20,30で角丸四角 文字色は黒色。文字書体は「|12|」 「ＯＮ／ＯＦＦ」で角丸ボタンのイメージボタンテキスト位置取得。 mx,myへ「ＯＮ／ＯＦＦ」を文字描画。 クリックした時は～ もし、丸ボタンの可視＝オンならば オフで丸ボタンのイメージボタン可視設定。 違えば、 丸ボタンをオンにイメージボタン可視設定。 楕円ボタンとはイメージ。 これについて 位置は"210,10"。幅は80。高さは50。可視はオン。 白色で画面クリア。 塗り色は$FFAAAA。線色は$993333。線太さは2。 楕円ボタンのイメージボタン描画位置取得。 x1,y1からx2,y2へ円 文字色は$660000。文字書体は「|12|」 「↓移動」で楕円ボタンのイメージボタンテキスト位置取得。 mx,myへ「↓移動」を文字描画。 クリックした時は～ 次位置＝丸ボタンのY 次位置＝次位置+10 10,次位置で丸ボタンのイメージボタン位置変更。 母艦を$FFCCCCで画面クリア $FFCCCCに丸ボタンからイメージボタン作成。 $FFCCCCに角丸ボタンからイメージボタン作成。 $FFCCCCに楕円ボタンから2,$660000でイメージボタン作成。
・・・どうかな～？
元の画像から、無理矢理影付きの画像を自動生成してるんだよねぇ～ｗ
なでしこ３は、DOMスタイル設定ができるから、ＣＳＳを使ってもっとカンタンに作れそう！
っとゆうわけで、とりあえずこんな感じ。
http://snowdrops.starfree.jp/wnako3_test/06_maru_button.html
（本当は、もうちょっと丁寧に、マウス乗った時は、ボーダーと影の色も一緒に薄めるようにしたほうがよさそう）
して、そのコードは・・・
こっコードはっ・・・・・・
<style type="text/css"> <!-- #btn { position:relative; /* 相対位置への配置（凹むボタンでtopの位置を変えるのに必要） */ display:table-cell; /* コレを設定しないとwidthとheightの設定が効かない。 */ cursor:pointer; /* カーソルを手の形に。 */ width:50px; /* ボタンの幅。 */ height:50px; /* ボタンの高さ。 */ border-radius:30px; /* 角丸設定（ボタンサイズの半分よりもちょい大きめのほうが綺麗な丸になるっぽい） */ background-color: #FFCCCC; /* ボタンの色。 */ border:1px solid #FF9999; /* ボタンの線色。 */ box-shadow:1px 2px 0 #CC6666; /* ボタンの影設定。 */ color: #FFFFFF; /* 文字色。*/ font-weight:bold; /* 文字太さ。*/ font-size:24px; /* フォントサイズ。*/ text-shadow:0 1px 1px rgba(0,0,0,.3); /* 文字の影設定。*/ text-align:center; /* 横方向文字揃え。 */ vertical-align:middle; /* 縦方向文字揃え。 */ text-decoration:none; /* 装飾無し（aタグには大抵下線とかが付いてるので解除する） */ } #btn:hover { /* マウス乗った時 */ background-color: #FFDDDD; /* ボタンの色を薄くする。 */ } #btn:active { /* マウス押した時 */ top: 2px; /* ボタン位置を下げる。 */ box-shadow:none; /* 影を消す。 */ } --> </style> <!-- 丸いボタン --> <a id="btn">OK</a>
・・・こんだけです。
ええ、こんだけです。なでしこいりません。ＣＳＳだけで出来ましたｗ
ってか、トランジョンとか、アニメーションとかあって、もっと凝ったことがＣＳＳだけでもなんぼでもできるっぽいです。すごいな。
でっでもっ、いちおうコレを全部DOMスタイル設定でやってみようと思ったんです。
だけど、うまく出来ませんでした。しくしくしく。
どうやら、:hoverや:activeは、設定できないっぽくて・・・（？）
それに・・・今回はIDを振っているけど、たぶんボタンって複数あって、みんな同じよーなデザインに揃えるのがふつーだから、classでまとめて設定すると思うんだけど、コレもどうやらDOMスタイル設定ではできないっぽい・・・（？）
ならば、DOM_HTML設定を使えば・・・とも思ったのですが、ココで浮上したのがまた、例の波カッコ閉じが使えない問題です(´д｀； ←0.1.6で対応されました！
前に、背景色設定をした時には、取りあえず閉じなくても通ったんだけど、最低でも:hoverと:activeとで項目が二つとゆうことになると、閉じないわけにはいかないでしょ。
それぞれにstyleタグを用意して別々にDOM_HTML設定する・・・などという方法も考えられましたが、あんまりにもやっつけ感が過ぎる上に、別に背に腹は替えられないって状況でもないんで、試してません；
うまくなでしこで設定できるようなら、いつも使うような定型のボタンを、この見てるだけで具合わるくなるＣＳＳをいちいちやらなくても、日本語だけで色とか文字とかサイズとかを設定して使える関数が作れるんじゃないかと思ったんだけどね。