色を作る


  1. 目的

    スライダを利用して、赤、緑、青の色を混ぜ合わせ、好みの色を作成します。また、色の16進表示します。

  2. 手法

    1. スライダ

      1. 配置とプロパティ
        スライダはスクロールバーを利用します。配置すると方向が縦のバーになりますから、orientationプロパティを0にして横方向に変更します。また、値の範囲をmaximumを265、minimumを0とします。最後に、スライダのvalu(初期値)を128、backgroundの色を適当な色に設定します。
        注:maximumの最大値を255にすると、読みとる値は245になります。つまみの幅の分値が小さくなるようです。265に設定すると、最大値が255になります。

      2. イベントと処理
        スライダを選択し、イベントタグでイベントメニューに切り替え、先頭のイベント adjustmentValueChanged をダブルクリックして、このイベントを処理行うメソッドを生成します。このメソッドで、まず、スクロールバーの値を読みとります。scrollbar1の値は
         Rv=scrollbar1.getValue();
        で読みとることが出来ます。Rvは255から0の間の整数となります。

    2. 16進表示
      整数の文字列変換は、Integerクラスを利用します。10進文字への変換は
       Integer.toString(Rv)
      また、16進への変換は
       Integer.toHexString(val);
      で行うことが出来ます。ただし、この16進変換は、valが16以下の場合1桁の文字になります。そこで、toHex関数でvalが16以下の場合先頭に0を付記し2桁の文字にする toHex()メソッドを用意します。ms="0"+ms で、文字の先頭の "0" を付加しています。
      これで、htmlで必要な6桁の色表現を作成できます。

  3. プロジェクト

    1. プロジェクト
      applet用のプロジェクトを作成します。

    2. レイアウト
      AWTのコンポーネントを配置します。「設計」タブで、layoutをnullにし、三本のスライダ(スクロールバー)を配置し、directionを変更して、方向を横にします。また、プロパティを設定します。また、スライダの横に、値を表示するラベルを配置します。
       スライダの下に、色を表示するボタンと、16進表示をするテキストフィールドを配置します。ここでは、ボタンはを色を表示するための部品として利用しています。



    3. プログラム
      1. 変数
        先頭で各色の値を記録する変数を、宣言します。
        public class Applet1 extends Applet {
         ...
         int Rv,Gv,Bv,RGBv;

      2. スライダの処理
        各スライダのイベントでadjustmentValueChangedを選択し、ダブルクリックしてメソッドを作成します。このメソッドで以下の処理をします。

        スライダの値を読みとり、現在の赤、緑、青の値で色cvを作成します。
        色の値をラベルで表示します。
        各色の16進表示(各色2桁の文字)を作成し、buttonの背景色として表示します。

        1. スライダ処理関数
            void scrollbar1_adjustmentValueChanged(AdjustmentEvent e) {
              Rv=scrollbar1.getValue();
              Color cv=new Color(Rv,Gv,Bv);
              label1.setText(Integer.toString(Rv));
              textField1.setText(toHex(Rv)+toHex(Gv)+toHex(Bv));
              button1.setBackground(cv);
            }

      3. 初期設定 init()
        スライダの初期値に対応する、色と16進文字を表示します。init()関数の最後に以下の処理を追加します。
        label1.setText(Integer.toString(Rv));
        textField1.setText(toHex(Rv)+toHex(Gv)+toHex(Bv));

      4. 16進変換の処理:toHex(int val)
        標準の16進変換では、16以下のとき1文字で表示されます。この場合、先頭に "0"を付加するのが目的です。
          String toHex(int val){
           String ms;
           ms=Integer.toHexString(val);
           if (val<16) ms="0"+ms;
           return ms;
         }

  4. 実行
    次のアプレットで、スライダをマウスでドラッグし、動作を確認してください。





  5. ダウンロード
    このプロジェクトをダウンロードできます。次の行をクリックして、rgb.exeファイルを適当なフォルダに保存します。
    ダウンロード開始

    このファイルは自己解凍型の圧縮ファイルです。このファイルを実行すると指定したフォルダに必要なファイルが生成されます。

トップに戻る