


 
 
 
 
 
 
 |
DelphiXE3 [FMX] 3色グラデーション色選択(ColorQuad)2013/11/14 |
前回は [Colors]内の濃淡色トラックバー(BWTrackBar)について見ました。今回はその次の3色グラデーション色選択(ColorQuad)について見ていきます。
[Colors]内
FMX |  |
ヘルプより。
3 色グラデーションの色選択コンポーネントを表します。
TColorQuad コンポーネントは、3 色グラデーション(黒、白、指定の色)として描画された色スペクトルを表示する色選択コンポーネントで、これを使って色の選択を微調整することができます。TColorQuad は、TColorPicker コンポーネントに取り付けることができます。 |


 |
Alpha
選択された色に適用するアルファ チャンネル(透明度)を示します。
Alpha プロパティを 0 から 1 の範囲の値に変更すると、選択された色に対するアルファ チャンネル(透明度)を設定することができます。 |
ColorBox
このカラー クワッド コンポーネントに付けられたカラー ボックスを示します。
カラー ボックスは、四角形の光学インジケータとして表されるビジュアル コンポーネントで、このカラー クワッド コンポーネントで選択される色に応じて、色を変更します。 |
Hue
HSL 色座標における、選択された色の色相を示します。
このカラー クワッド コンポーネント内で選択される色を、変更または取得するには、Sat および Lum と組み合わせて、 Hue を設定または読み取ります。 |
Lum
HSL 色座標における、選択された色の輝度を示します。
このカラー クワッド コンポーネント内で選択される色を、変更または取得するには、Hue および Sat と組み合わせて、 Lum を設定または読み取ります。 |
Sat
HSL 色座標における、選択された色の彩度を示します。
このカラー クワッド コンポーネント内で選択される色を、変更または取得するには、Hue および Lum と組み合わせて、 Sat を設定または読み取ります。 |
|
このコンポーネントは色選択を行う際の仲介を行うようなコンポーネントのようです。Alpha値・Hue値・Lum値・Sat値による色指定、カラーピッカー(ColorPicker)(※後述)による色指定、このコンポーネント上でのマウスクリックによる色指定、それら値は、各コンポーネントの色を扱うプロパティ(Colorプロパティ)へそのまま直接受け渡す事は出来ませんが、カラーボックス(ColorBox)(※後述)へ受け渡す事により、そこから通常の Colorプロパティ値を取得することが出来ます。
試しに、下記のように各コンポーネントを配置し、LiveBindingを行います。
濃淡色トラックバーは、輝度 Lum プロパティにバインドしています。
このコンポーネントの値が変更された際のイベントハンドラを下記のように記述します。
procedure TForm1.ColorQuad1Change(Sender: TObject);
begin
Label1.Text := 'α値:'+FloatToStrF(ColorQuad1.Alpha ,ffFixed,6,6);
Label2.Text := '色相:'+FloatToStrF(ColorQuad1.Hue ,ffFixed,6,6);
Label3.Text := '輝度:'+FloatToStrF(ColorQuad1.Lum ,ffFixed,6,6);
Label4.Text := '彩度:'+FloatToStrF(ColorQuad1.Sat ,ffFixed,6,6);
Label5.Text := '色:' + IntToHex(ColorBox1.Color,8);
end; |
保存・コンパイル・実行してみます。

色スペクトルトラックバーを操作します
↓

色相が変化しました
濃淡色トラックバーを操作します
↓

輝度が変化しました
アルファ値トラックバーを操作します
↓

アルファ値が変化しました
カラーボックスが透過状態になっています
↓

3色グラデーション色選択コンポーネント上を
クリックして色取得する事も可能です
さて、濃淡色トラックバーを 3色グラデーション色選択コンポーネント(ColorQuad)の 輝度 Lumプロパティにバインドすると、トラックバー操作時は、ポイントが上下に移動することが分かります。
彩度 Satプロパティにバインドすると、トラックバー操作時、ポイントが左右に移動する事が分かります。Lumプロパティ・Satプロパティの双方にバインドすると斜めに移動する事が分かります。もう1つ通常のトラックバーを配置して、Satプロパティにバインドするのも良いかもしれません。
ただ、濃淡色トラックバーの方向 Orientationプロパティを「orVertical(垂直)」にすると、値(白〜黒)の上下が逆になってしまうのが少々残念です。回転角度 RotationAngle プロパティで「-90」にするという手法もありますが、画面デザイン操作がやりにくいので(操作時、水平であるものとして作業させられるのでポイントがうまく合わせられない)これも利用しにくいというのが難点です。
というわけで、FireMonkey(FMX)には、ColorDialog はありませんが、こういったコンポーネントの集まりによって自分で作る事も出来るようですから、少し手間かもしれませんが、困るという程では無さそうです。
|
|
バッチファイル
BASIC
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Delphi入門編
>Delphi2010
>DelphiXE3
▲2013/11/14
2013/11/14
▼2013/11/15
シェアウェア
Script!World
データベース
|