JUCEプログラミング、Customise the look and feel3、自作lookAndFeelクラスのカスタマイズ

引き続き、「Interface Design」の「Customise the look and feel of your app」チュートリアルです。lookAndFeelクラスを継承したクラスを実装することで、JUCEコンポーネントのカスタマイズの幅が広がるようです。今回の記事では、描画処理でダイヤルの見た目が変わるというところまで実装していきます。チュートリアルでは、「Custom look-and-feel」の項目からとなります。

公式のチュートリアルページはこちらになります。

こんな人の役に立つかも

・JUCEプログラミングを勉強している人

・JUCEチュートリアル「Customise the look and feel of your app」をやっている人

・lookAndFeelクラスをカスタマイズしたい人

基本となる自作のlookAndFeelクラス

まずは、カスタマイズするための基本となる自作のlookAndFeelクラスを作成します。「otherLookAndFeel」というクラスを作成します。

MainComponent.h

ヘッダーに以下のようにコンストラクタを記載したOtherLookAndFeelクラスを追加しました。lookAndFeel_V4クラスを継承させています。コンストラクタでは、スライダーのノブの色のIDの色を赤とする処理を行うようにしてありますので、このクラスのインスタンスを作成したときに、色の設定が完了しているようなクラスになります。

//このクラスを追加しました。
class OtherLookAndFeel : public juce::LookAndFeel_V4
{
public:
    OtherLookAndFeel()
    {
        setColour(juce::Slider::thumbColourId, juce::Colours::red);
    }
};

class MainComponent  : public juce::Component
//...略...

MainComponentクラスのprivateなメンバ「otherLookAndFeel」オブジェクトを、次のように自作したクラス「OtherLookAndFeel」クラスのオブジェクトとします。

private:
//...略...

    //以下のように、otherLookAndFeelを先ほど宣言したクラスのオブジェクトとします。
    //juce::LookAndFeel_V4 otherLookAndFeel;
    OtherLookAndFeel otherLookAndFeel; //

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

MainComponent.cpp

MainComponentクラスのコンストラクタの処理を以下のようにコメントアウトします。

    //getLookAndFeel().setColour(juce::Slider::thumbColourId, juce::Colours::red);
    //otherLookAndFeel.setColour(juce::Slider::thumbColourId, juce::Colours::red);//ここをコメントアウトします。
    dial1.setLookAndFeel(&otherLookAndFeel);

    setSize(300, 200);
}

dial1に、otherLookAndFeelを紐づけする処理のみとします。OtherLookSndFeelクラスは、コンストラクタでthumbColorIdの色を設定していますので、setColorの処理は不要となりました。

ここまでの変更で、今までの処理と同等の結果が得られる状態となりました。自作のLookAndFeelクラスを作成することで、今後のカスタマイズがやりやすくなっています。

スライダーの見た目をカスタマイズする

先ほど作成した自作のLookAndFeelクラス「OtherLookAndFeel」をカスタマイズして、次のようなダイヤルを描画します。（スライダーの見た目を描画処理を駆使して変更）

LookAndFeelクラスには、いろいろなタイプのコンポーネントの見た目を変更する関数が含まれています。（たくさんのコンポーネントのLookAndFeelMethodsクラスを継承しています。）

今回は、スライダーオブジェクトのカスタマイズを行いますので、LookAndFeelクラスが継承しているクラスのうちの一つ、「slider::LookAndFeelMethods」クラスの「drawRotarySlider」をオーバーライドしてカスタマイズすることでスライダーの見た目をより細かく変更することができます。

プログラムの追加

OtherLookAndFeelクラスの関数として、「drawRotarySlider」関数を追加しました。これを追加して実行すると、先ほどのダイヤルの見た目となります。

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

    //以下の関数を追加しました。
    void drawRotarySlider(juce::Graphics& g, int x, int y, int width, int height, float sliderPos,
        const float rotaryStartAngle, const float rotaryEndAngle, juce::Slider&) override
    {
        //[1]描画位置のためのパラメータを計算します。
        auto radius = (float)juce::jmin(width / 2, height / 2) - 4.0f;
        auto centreX = (float)x + (float)width * 0.5f;
        auto centreY = (float)y + (float)height * 0.5f;
        auto rx = centreX - radius;
        auto ry = centreY - radius;
        auto rw = radius * 2.0f;
        auto angle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);

        //[2]ダイヤルのベース部分を塗りつぶします。
        g.setColour(juce::Colours::orange);
        g.fillEllipse(rx, ry, rw, rw);

        //[3]ダイヤルの枠線を描画します。
        g.setColour(juce::Colours::red);
        g.drawEllipse(rx, ry, rw, rw, 1.0f);

        //[4]ポインタ部分(ダイヤルの現在値)の描画です。
        juce::Path p;
        auto pointerLength = radius * 0.33f;
        auto pointerThickness = 2.0f;
        p.addRectangle(-pointerThickness * 0.5f, -radius, pointerThickness, pointerLength);
        p.applyTransform(juce::AffineTransform::rotation(angle).translated(centreX, centreY));

        g.setColour(juce::Colours::yellow);
        g.fillPath(p);
    }
};

drawRotarySlider関数は、RotarySliderタイプのSliderコンポーネント(ダイヤルと呼んでいます。)の描画処理に使われる関数で、引数として次の値を受け取ります。

①graphicsクラスのオブジェクト

②ダイヤルの矩形領域の左上のX座標

③ダイヤルの矩形領域の左上のY座標

④コンポーネントの幅

⑤コンポーネントの高さ

⑥スライダーの位置を0~1で表現した数値

⑦ダイヤルの開始角度

⑧ダイヤルの終了角度

⑨描画するスライダーオブジェクト

中途半端ですが、次回、このプログラムの内容の詳細を記事としたいと思います。