JUCE でかっこいいボタンを描く方法

このような CSS でよく見る感じのかっこいいボタンを JUCE で描くには以下のようにします。¹

1. 背景のハイライト色でボタン背景を描画
2. 背景色でボタン背景を描画。このときに下側にボタン背景のハイライトが見えるようにする。
3. 背景より小さい範囲に、ボタン前面のハイライト色でボタンを描画
4. ボタン前面を緩やかなグラデーションで描画。このときに上側にボタンのハイライトが見えるようにする。
5. テキストをハイライト色で描画
6. テキストを描画。このときに上側にテキストのハイライトが見えるようにする。

コードで書くと以下のようになります。

    juce::Graphics &g = /*...*/;
    int w = /*ボタンの幅*/; 
    int h = /*ボタンの高さ*/;

    // ボタン背景のハイライトを描画する
    g.setColour(background_highlight_colour);
    g.fillRoundedRectangle(0, 0, w, h, round);

    // ボタン背景を描画する。
    // （ハイライト部分を見せるために高さを 1px 減らしている）
    g.setColour(background_colour);
    g.fillRoundedRectangle(0, 0, w, h-1, round);

    // ボタン前面のハイライトを描画する。
    // （ボタン背景を見せるために、
    // 　background_colour で描画した範囲から 1 ずつ減らしている）
    g.setColour(front_highlight_colour);
    g.fillRoundedRectangle(1, 1, w-2, h-3, round);

    // ボタン前面を描画する。
    // （ボタン前面のハイライトを描画するために、
    // 　front_highlight_colour で描画した範囲より 1px 下に描画している）
    juce::ColourGradient grad(grad_top_side_colour,
                              0.0f, 0.0f,
                              grad_bottom_side_colour,
                              0.0f, (float)h,
                              false);
    g.setGradientFill(grad);
    g.fillRoundedRectangle(1, 2, w - 2, h - 4, round);

    // テキストのハイライトを描画する
    g.setColour(text_highlight_colour);
    g.drawText(getButtonText(), 0, 0, w, h - 2, juce::Justification::centred);

    // テキストを描画する
    // （テキストのハイライトを描画するために、
    //   text_highlight_colour で描画したものより 1px 下に描画している）
    g.setColour(text_colour);
    g.drawText(getButtonText(), 0, 0, w, h, juce::Justification::centred);

juce::Button クラスを継承したクラスで paintButton() 仮想関数をオーバーライドして、この描画処理を行うように実装すれば、冒頭に貼ったようなボタンが描画できます。

この仕組みをもう少し整備した CoolButton クラスと、 CoolButton クラスの動作を確認できるサンプルプロジェクトを公開しているので、試してみたい方はここから clone してください。

---

1. この描画処理は nanogui というプロジェクトのボタン描画処理を参考にしました。 ↩