Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/09/25 (月)

丸いボタンを作りたい!

| 09:11 | 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 だって、本来ボタンって、丸いモノでしょ。

 服のボタンなら、四角い方が珍しいくらい。

 ・・・それはともかく、画像ボタンとかはあるけど、ボタン自体は結局四角くなってしまうため、丸とか、あと楕や角丸の形で凹むボタンが欲しいなあと思って、かなり無理矢理系で作ってみたはいいけれど、使いどころが無いまま放置してあったのを、ちょこっと手直しして、なんとなくUPしてみる。(なでしこ1)

#-----------------------------------------------------------
# イメージボタン
#-----------------------------------------------------------
#  画像ボタンとかは、ボタン自体は四角になってしまうため、
# 丸や楕、角丸の形で凹むボタンとして作成したものです。
#  画像も使えますが、周囲にアンチエイリアスのかかってない
# 単純形状のものに限ります。(影が変になるんで)
#★便利機能としてイメージのサイズに合わせて、図形描画位置と、文字描画位置を取得する関数追加。
#-----------------------------------------------------------------------
●イメージボタン作成({数値=$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で丸ボタンイメージボタン位置変更。
    「OK!」と言う。

角丸ボタンとはイメージ
これについて
  位置は"100,15"。幅は90。高さは40。可視はオン。
  緑色画面クリア。
  塗り色ウィンドウ背景色線色黒色線太さは3。
  角丸ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ20,30で角丸四角
  文字色黒色文字書体は「|12|」
  「ON/OFF」で角丸ボタンイメージボタンテキスト位置取得。
  mx,myへ「ON/OFF」を文字描画。
  クリックした時は~
    もし、丸ボタンの可視=オンならば
      オフで丸ボタンイメージボタン可視設定。
    違えば、
      丸ボタンオンイメージボタン可視設定。

楕ボタンとはイメージこれについて
  位置は"210,10"。幅は80。高さは50。可視はオン。
  白色画面クリア。
  塗り色は$FFAAAA。線色は$993333。線太さは2。
  楕ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ
  文字色は$660000。文字書体は「|12|」
  「↓移動」で楕ボタンイメージボタンテキスト位置取得。
  mx,myへ「↓移動」を文字描画。
  クリックした時は~
    次位置=丸ボタンのY
    次位置=次位置+10
    10,次位置で丸ボタンイメージボタン位置変更。

母艦を$FFCCCCで画面クリア
$FFCCCCに丸ボタンからイメージボタン作成。
$FFCCCCに角丸ボタンからイメージボタン作成。
$FFCCCCに楕ボタンから2,$660000でイメージボタン作成

 ・・・どうかな~?

 元の画像から、無理矢理影付きの画像を自動生成してるんだよねぇ~w



 なでしこ3は、DOMスタイル設定ができるから、CSSを使ってもっとカンタンに作れそう

 っとゆうわけで、とりあえずこんな感じ。

http://www.geocities.jp/snowdrops890/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>

 ・・・こんだけです。

 ええ、こんだけです。なでしこいりません。CSSだけで出来ましたw

 ってか、トランジョンとか、アニメーションとかあって、もっと凝ったことがCSSだけでもなんぼでもできるっぽいです。すごいな。

 でっでもっ、いちおうコレを全部DOMスタイル設定でやってみようと思ったんです。

 だけど、うまく出来ませんでした。しくしくしく。

 どうやら、:hover:activeは、設定できないっぽくて・・・(?)

 それに・・・はIDを振っているけど、たぶんボタンって複数あって、みんな同じよーなデザインに揃えるのがふつーだから、classでまとめて設定すると思うんだけど、コレもどうやらDOMスタイル設定ではできないっぽい・・・(?)

 ならば、DOM_HTML設定を使えば・・・とも思ったのですが、ココで浮上したのがまた、例の波カッコ閉じが使えない問題です(´д`; ←0.1.6で対応されました!

 前に、背景色設定をした時には、取りあえず閉じなくても通ったんだけど、最低でも:hover:activeとで項目が二つとゆうことになると、閉じないわけにはいないでしょ。

 それぞれにstyleタグを用意して別々にDOM_HTML設定する・・・などという方法も考えられましたが、あんまりにもやっつけ感が過ぎる上に、別に背に腹は替えられないって状況でもないんで、試してません;

 うまくなでしこで設定できるようなら、いつも使うような定型のボタンを、この見てるだけで具合わるくなるCSSをいちいちやらなくても、日本語だけで色とか文字とかサイズとかを設定して使える関数が作れるんじゃないかと思ったんだけどね。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170925