メインコンテンツまでスキップ

チュートリアルJUCEの色

📚 Source Page

アプリケーション内で色を指定し、さまざまな方法で適用します。

レベル初心者

プラットフォーム：Windows, macOS, Linux, iOS, Android

クラス： Colour,Colours,LookAndFeel

スタート​

このチュートリアルのデモ・プロジェクトのダウンロードはこちらから：PIP|ZIP.プロジェクトを解凍し、最初のヘッダーファイルをProjucerで開く。

このステップにヘルプが必要な場合は、以下を参照してください。Tutorial: Projucer Part 1: Getting started with the Projucer.

デモ・プロジェクト​

デモ・プロジェクトは、いくつかの子コンポーネントを表示し、いくつかの簡単な描画コマンドを実行します。これは、JUCEでどのように色が指定され、コンポーネントに適用されるかを説明するために使用されます。アプリケーションは以下のスクリーンショットのようになるはずです：

デモ・アプリケーション
デモ・アプリケーション

このチュートリアルの最初の部分では、より一般的な色の指定について見ていきます。の描画コードを変更することで説明します。paint()関数を使用します。チュートリアルの第2部では、組み込みのコンポーネント・タイプ（ラベルやスライダーなど）の要素に対して、どのように色を指定するかを示します。

色と一般的な塗装作業​

JUCEは、赤、緑、青、アルファ（透明度）の値を使って色を指定します。これはもちろん、コンピュータで色を指定する方法として広く使われているものですが、実装はすべて微妙に異なります。特に、JUCEは色を操作するためのいくつかの便利なメソッドを提供しており、アプリケーションの一貫したカラーパレットを維持するのに役立ちます。まずpaint()関数をデモ・アプリケーションから呼び出す：

    void paint (juce::Graphics& g) override
    {
        g.fillAll (juce::Colours::lightgreen);
        g.setColour (juce::Colours::orange);
 
        auto centralArea = getLocalBounds().toFloat().reduced (10.0f);
        g.drawRoundedRectangle (centralArea, 5.0f, 3.0f);
 
        juce::Array colours { juce::Colours::red, juce::Colours::green, juce::Colours::blue };
 
        auto colourBarArea = centralArea.reduced (4.0f).withHeight (20.0f);
        auto colourArea = colourBarArea.withWidth (colourBarArea.getWidth() / (float) colours.size());
 
        for (auto colour : colours)
        {
            g.setColour (colour);
            g.fillRect (colourArea);
 
            colourArea.translate (colourArea.getWidth(), 0.0f);
        }
    }

最初の行は、グラフィックス・コンテキスト全体を単一色で塗りつぶします（これはコンポーネントの境界全体を意味します）：

g.fillAll (juce::Colours::lightgreen);

次の行は、与えられたグラフィックス・コンテキストに対して、今後描画操作を行う際の色を設定する。

g.setColour (juce::Colours::orange);

次に、わずかに挿入された長方形を定義し、現在の色を使用して、境界線として丸みを帯びた長方形を描画する：

auto centralArea = getLocalBounds().toFloat().reduced (10.0f);
g.drawRoundedRectangle (centralArea, 5.0f, 3.0f);

次に、色の配列を設定し、それを使って異なる色の長方形の列を描く。

juce::Array colours { juce::Colours::red, juce::Colours::green, juce::Colours::blue };

この色のついた長方形の列を描くには、まず、長方形を配置する領域を定義する：

auto colourBarArea = centralArea.reduced (4.0f).withHeight (20.0f);

次に、最初の色の矩形の面積を定義する。これは、矩形の全幅に対する割合となる。colourBarArea長方形を使用する色の数で割ったもの：

auto colourArea = colourBarArea.withWidth (colourBarArea.getWidth() / colours.size());

最後に、色の配列を繰り返し処理し、矩形を指定された色で塗りつぶし、矩形を移動させる。colourArea次の反復のために、矩形を右に寄せる：

for (auto colour : colours)
{
    g.setColour (colour);
    g.fillRect (colourArea);
 
    colourArea.translate (colourArea.getWidth(), 0.0f);
}

この後のいくつかの例では、色を指定するためのいくつかの方法を示します。colours配列である。

名前で色を指定する​

デモ・プロジェクトと上のコードに示されているように、JUCEでは、色はColoursの名前空間を使用します。

注記

のAPIドキュメントをご覧ください。Colours名前空間の全リストは、ほとんどが標準的なHTMLカラーです。

内の定数に加えてColours名前空間ではColours::findColourForName()関数を使用して、文字列を使用して希望の色名を検索します。例えば、同じ赤、緑、青の色を使って、次のようなコードでcolours配列である：

auto defaultColour = Colours::black;
 
juce::Array colours { juce::Colours::findColourForName ("red", defaultColour),
                                    juce::Colours::findColourForName ("green", defaultColour),
                                    juce::Colours::findColourForName ("blue", defaultColour) };
Colours::blackconst Colour blackDefinition juce_Colours.h:58
注記

指定した色の検索に失敗した場合に備えて、デフォルトの色（この場合は黒）を用意しておく必要がある。

についてColours::findColourForName()関数は大文字と小文字を区別せずに検索を行い、文字列の先頭と末尾の空白を切り捨てますが、文字列内の空白は切り捨てません。例えば、以下のコードは、色が内部的にすべて小文字の文字列を使用して保存されていても、期待通りに動作します：

auto defaultColour = juce::Colours::black;
 
juce::Array colours { juce::Colours::findColourForName ("DarkRed", defaultColour),
                                    juce::Colours::findColourForName ("DarkGreen", defaultColour),
                                    juce::Colours::findColourForName ("DarkBlue", defaultColour) };

これにより、次のような色が生まれる：

ダークレッド、グリーン、ブルー
ダークレッド、グリーン、ブルー

しかし、色名の中に空白を含むと失敗し、この場合はいずれも黒を返す：

auto defaultColour = Colours::black;
 
juce::Array colours { juce::Colours::findColourForName ("Dark Red", defaultColour),
                                    juce::Colours::findColourForName ("Dark Green", defaultColour),
                                    juce::Colours::findColourForName ("Dark Blue", defaultColour) };

このような場合、ニーズに合わせて独自の関数を書くのは簡単だ。例えば、文字列からすべてのスペースを取り除く関数を書くことができる：

static juce::String removeSpaces (const juce::String& text)
{
    return text.removeCharacters (" ");
}

そして、文字列をColours::findColourForName()関数である：

auto defaultColour = juce::Colours::black;
 
juce::Array colours { juce::Colours::findColourForName (removeSpaces ("Dark Red"), defaultColour),
                                    juce::Colours::findColourForName (removeSpaces ("Dark Green"), defaultColour),
                                    juce::Colours::findColourForName (removeSpaces ("Dark Blue"), defaultColour) };

値から色を指定する​

Coloursは、生の赤、緑、青、アルファ値を使って指定することもできる。ここではColourオブジェクトは、0.0-1.0の範囲の浮動小数点値か、0-255の整数（uint8型）のいずれかを使用します。整数を使えば、同じ赤、緑、青の色を次のように作ることができる：

juce::Array colours { juce::Colour (255, 0, 0),   // red
                                    juce::Colour (0, 128, 0),   // green
                                    juce::Colour (0, 0, 255) }; // blue
注記

標準の "緑 "カラーは、カラーの緑要素に最大値255を持たない。

この場合、アルファ値を省略すると、アルファ値は最大値（255）に設定され、色は完全に不透明になります。

また、16進数値1つで色を指定することもできる。この場合、色値要素の順番はアルファ、赤、緑、青となる：

juce::Array colours { juce::Colour (0xffff0000),   // red
                                    juce::Colour (0xff008000),   // green
                                    juce::Colour (0xff0000ff) }; // blue
注記

この場合、アルファ値を指定しなければならない。そうしないとアルファ値はゼロに設定される（つまり透明になる）。

を使用して浮動小数点値を使用することもできます。Colour::fromFloatRGBA()関数である：

juce::Array colours { juce::Colour::fromFloatRGBA (1.0f, 0.0f, 0.0f, 1.0f),   // red
                                    juce::Colour::fromFloatRGBA (0.0f, 0.5f, 0.0f, 1.0f),   // green
                                    juce::Colour::fromFloatRGBA (0.0f, 0.0f, 1.0f, 1.0f) }; // blue
注記

128の整数値は、約0.501961の浮動小数点値に相当する。したがって、緑の色はかなりは前の例と同じだが、このデモでは0.5が近い。

エクササイズ

さまざまな色の値を試し、アプリケーションを実行して結果を確認してください。に追加する色は3色に限定されません。colours配列では、任意の色数（1色以上）を使用できます。

色相、彩度、明度​

Colourオブジェクトを色相、彩度、明度値から初期化することもできる。これは、知覚的な性質を共有する異なる色を生成する1つの方法です。

例えば、以下のコードを使って、明るい赤と暗い赤のシリーズを作ることができる：

juce::Array colours { juce::Colour::fromHSV (0.0f,    // hue
                                                           0.5f,    // saturation
                                                           0.3f,    // brightness
                                                           1.0f),   // alpha
                                    juce::Colour::fromHSV (0.0f, 0.5f, 0.5f, 1.0f),
                                    juce::Colour::fromHSV (0.0f, 0.5f, 0.7f, 1.0f) };

ここでは、色相、彩度、アルファ値は各色で一定です（色相0.0fは「赤」として知覚される色を生成するはずです）。結果は次のスクリーンショットのようになります：

赤（彩度0.5、明度0.3、0.5、0.7
赤（彩度0.5、明度0.3、0.5、0.7

また、色相、彩度、明度の値をColourオブジェクトを使うことができる。例えば、異なる明るさの紫色を並べたい場合、次のようなコードを使うことができる：

auto purpleHue = juce::Colours::purple.getHue();
 
juce::Array colours { juce::Colour::fromHSV (purpleHue, 0.5f, 0.3f, 1.0f),
                                    juce::Colour::fromHSV (purpleHue, 0.5f, 0.5f, 1.0f),
                                    juce::Colour::fromHSV (purpleHue, 0.5f, 0.7f, 1.0f) };

その結果が次のスクリーンショットである：

紫、彩度0.5、明度0.3、0.5、0.7
紫、彩度0.5、明度0.3、0.5、0.7

色の値を操作する​

また、既存の色を使って新しい色を作ることもできます。例えば、既存の色より少し明るい色や暗い色を作るにはColour::brighter()またはColour::darker()関数をそれぞれ使用する：

auto baseColour = juce::Colours::orange;
 
juce::Array colours { baseColour.darker(),
                                    baseColour,
                                    baseColour.brighter() };

またはColour::interpolatedWith()関数である：

auto colour1 = juce::Colours::red;
auto colour2 = juce::Colours::purple;
 
juce::Array colours { colour1,
                                    colour1.interpolatedWith (colour2, 0.5f),
                                    colour2 };

その結果が次のスクリーンショットである：

赤と紫が同程度にブレンドされている。
赤と紫が同程度にブレンドされている。

ある色が与えられたら、別の色に対してはっきりと見える別の色を作ることができます。Colour::contrasting()関数を使用します。これは、引数を使ってコントラストの量を指定することができる：

auto baseColour = juce::Colours::darkcyan;
 
juce::Array colours { baseColour,
                                    baseColour.contrasting (0.5f) };

他の2色に対して対照的な色を作ることもできる：

auto colour1 = juce;:Colours::lightblue;
auto colour2 = juce;:Colours::darkred;
 
juce::Array colours { colour1,
                                    juce::Colour::contrasting (colour1, colour2),
                                    colour2 };
Colours::lightblueconst Colour lightblueDefinition juce_Colours.h:114
Colours::darkredconst Colour darkredDefinition juce_Colours.h:82
juceDefinition juce_AudioWorkgroup_mac.h:36

を使用して、重ね合わせた色のアルファチャンネルを考慮して2色をブレンドするなど、他にもさまざまな操作が可能です。Colour::overlaidWith()関数である。

コンポーネントカラーの指定​

前のセクションでは、コンポーネントのpaint()関数を使用します。組み込みコンポーネント（スライダーやラベルなど）の色をカスタマイズするには、Component::setColour() またはLookAndFeel::setColour()の機能がある。

基本的にComponentサブクラスにはenumには、特定の色を持つことができるコンポーネントのさまざまな要素がリストされています。これらの各項目はカラーID.(これらのカラーIDの値はJUCEライブラリ全体で一意です。) 例えばLabelクラスは以下の通りである。Label::ColourIds):

アウトラインを持たないように透明にしておく。

これらの色をいくつか変えてみよう。を見るとMainContentComponentコンストラクタのLabel, aTextEditor, aTextButtonそして2つSliderオブジェクトを子コンポーネントとして追加する。次の行を追加する。[1]ラベルの文字色を黒に変更するには、下図のようにします：

MainContentComponent()
{
    label.setColour (juce::Label::textColourId, Colours::black);            // [1]
    label.setEditable (true);
    addAndMakeVisible (label);
    //...
AccessibilityRole::label@ label

結果は以下のスクリーンショットのようになるはずだ：

カスタマイズした文字色でラベルを表示する
カスタマイズした文字色でラベルを表示する
エクササイズ

のカラーIDを見てください。TextEditor,TextButtonそしてSliderクラス(TextEditor::ColourIds,TextButton::ColourIdsそしてSlider::ColourIds)で、デモ・アプリケーションの子コンポーネントに異なる色を設定して試してみてください。

ルック＆フィールカラーの設定​

アプリケーションやアプリケーションの一部では、同じタイプのすべてのコンポーネントに同じカラーパレットを必要とすることがよくあります。前のセクションの練習問題で、同じ外観にするために両方のスライダーにComponent::setColour()関数を繰り返し呼び出す必要があることに気づいたかもしれません。関数の1つの使い方はLookAndFeelクラスは、これらの色を指定できる単一のポイントを提供することです。これを説明するためにMainContentComponentコンストラクタを元の状態に戻す：

    MainContentComponent()
    {
        label.setEditable (true);
        addAndMakeVisible (label);
 
        textEditor.setText ("This is a text editor.");
        addAndMakeVisible (textEditor);
 
        textButton.setClickingTogglesState (true);
        addAndMakeVisible (textButton);
 
        addAndMakeVisible (slider1);
        addAndMakeVisible (slider2);
 
        setSize (600, 210);
    }

次の行を追加する。[2]で両方のスライダーの親指の色を設定します：

//...
getLookAndFeel().setColour (juce::Slider::thumbColourId, juce::Colours::red);  // [2]
addAndMakeVisible (slider1);
addAndMakeVisible (slider2);
//...

これにより、以下のスクリーンショットのような結果が得られるはずだ：

1行のコードで複数のスライダー親指の色をカスタマイズする
1行のコードで複数のスライダー親指の色をカスタマイズする

カスタム・ルック＆フィール・カラー​

のサブクラスを作ることもできます。LookAndFeelクラス(LookAndFeel_V1,LookAndFeel_V2,LookAndFeel_V3あるいはLookAndFeel_V4) を作成し、そのコンストラクタで特定の色をカスタマイズします。これを行うには、次のクラスをMainContentComponentクラスである：

    class CustomLookAndFeel  : public juce::LookAndFeel_V4
    {
    public:
        CustomLookAndFeel()
        {
            setColour (juce::Slider::thumbColourId, juce::Colours::red);
        }
    };

このクラスのインスタンスをプライベート・メンバー・セクションに追加する。[3]:

private:
    CustomLookAndFeel lf; // [3]
    juce::Label label            { {}, "This is some label text." };

そして、MainContentComponentクラスのコンストラクタで、このルック＆フィールを使用するように設定する。[4]:

    MainContentComponent()
    {
        setLookAndFeel (&lf); // [4]
 
        label.setEditable (true);
注記

このサブセクションの変更されたコードはColoursTutorial_02.hファイルにある。

エクササイズ

でさらに色をカスタマイズする。CustomLookAndFeelビルダー

概要​

このチュートリアルでは、あなた自身のアプリケーションで使用できる以下の項目を見てきました：

  • の使い方ColourクラスとColours名前空間を使用します。
  • コンポーネントのpaint()関数で描画操作を行う。
  • カラーIDを使った組み込みコンポーネントの要素の色の指定。
  • を使用して、アプリケーションの一部またはアプリケーション全体で色を指定します。LookAndFeelクラスである。

こちらも参照​