Graphicsクラス
このチュートリアルではGraphicsオブジェクトを使用して、テキスト、線、幾何学図形を描画します。これはJUCEで描画を行うための基本です。
レベルビステン
プラットフォーム:Windows, macOS, Linux, iOS, Android
クラス: Component,Graphics,Font,Colours,Path
スタート
このチュートリアルのデモ・プロジェクトのダウンロードはこちらから:PIP|ZIP
デモ・プロジェクト
このチュートリアルのデモ・プロジェクトには、メイン・アプリケーション・ウィンドウとメイン・コンポーネントが含まれています。これらは前回のチュートリアルで慣れ親しんでいるはずです:Tutorial: The application windowそしてTutorial: The main component.
メイン・コンポーネント(あるいは、実のところ、他のどのコンポーネントでも!)の外観は、その実装によって決定されることはすでにご存じだろう。paint()
関数を使用します。ここでのデモ・プロジェクトは、前回のチュートリアル(Tutorial: The main component)は結論づけた。を実施した。paint()
関数は、最初は次のようになる:
void paint (juce::Graphics& g)
{
g.fillAll (juce::Colours::lightblue);
g.setColour (juce::Colours::darkblue);
g.setFont (14.0f);
g.drawText ("Hello, World!", getLocalBounds(), juce::Justification::centred, true);
}
このアプリをコンパイルして実行すると、ウィンドウの背景色が水色になり、テキストが次のように表示されます。**ハロー、ワールド!**がその上に描かれている。
以下では、さらにグラフィックを描画するコードをMainComponent
オブジェクトを使用する。Graphicsクラスを使用します。これは非常に強力なクラスであり、今後のチュートリアルで様々なJUCEコンポーネントのカスタム外観を実装するために多用する予定です。
Graphics クラス
ペイ ント機能をもう一度見てみよう。ここでpaint()
関数は、レンダリング時にオペレーティング・システムから呼び出されるコールバックです。Componentこの関数を自分で呼んではいけない。
このコールバックの引数としてGraphicsインスタンスが渡される。これはGraphicsオブジェクトは、基礎となるフレームワークによって提供されます。これは、テキスト、線、図形、色、グラデーションなど、あらゆるグラフィック要素をレンダリングするために使用できるグラフィック・コンテキストです。このチュートリアルでは、これらのいくつかについて説明します。
についてGraphicsクラスは通常paint()
コールバックを使用します。通常、画像に描画するとき以外は、このコールバックを使うべきではありません。
テキストのレンダリング
フォントの設定
まずはテキストの続きから。行
g.setFont (20.0f);
は、次の行のフォント・サイズを20ピクセルに設定する。**ハロー、ワールド!**そのフォントを使用)。しかし、フォントのサイズを変えるだけでなく、別の書体を使ったり、太字や斜体を使ったりしたい場合はどうすればいいのだろうか。また、テキストの位置はどのように変更するのでしょうか?
には、実はもう1つのバージョンがある。Graphics::setFont()関数はFontオブジェクトの代わりにfloat
サイズを決定する新しいFontオブジェクトのようなものだ:
juce::Font mainComponentFont ("Times New Roman", 20.0f, juce::Font::italic);
メイン・コンポーネントにこのフォントを使うので、説明的な変数名を選びました。mainComponentFont
.
の第一引数はFontコンストラクタは書体を決定し、2番目はフォント・サイズ、3番目はフォント・スタイル である。ここではイタリック体を選んでいる。フォント・スタイルは、実際にはビットマスクとして使用できるフラグである (Tutorial: The application window)なので、例えば次のように組み合わせることができる:
juce::Font mainComponentFont ("Times New Roman", 20.0f, juce::Font::bold | juce::Font::italic);
アプリを再度コンパイルして実行すると、フォントが変更されていることが確認できるはずだ。
コンピュータに実際にインストールされていない書体を使用することは、JUCEアプリでフォントが正しく動作しない非常に一般的な原因です。
を作成する代わりにFontオブジェクトに設定しGraphics::setFont()関数を次の行に書くこともできるし、両方を1つのステートメントで書くこともできる:
g.setFont (juce::Font ("Times New Roman", 20.0f, juce::Font::italic));
とはいえ、通常はステートメントを分離して名前付き変数を使った方が、コードの可読性と保守性は向上する。(最近のコンパイラーでは、このような追加変数を導入してもパフォーマンスには影響しません)。
ポジションの設定
ここで、テキストの位置を変更します。その過程で、JUCEで位置決めがどのように処理されるかを学びます。
簡単な方法は、コンポーネント全体に対するテキストのアライメントを変更することだ。Justification::centred値を別の値に変更することができます。Justification::topLeftの値を指定する。(他の可能なJustification::Flags値)。しかし、もう一つの非常に強力なアプローチは、サイズと位置を明示的に定義することである。別のバージョンのGraphics::drawText()関数をこのアプローチで使用する。で始まる行をg.drawText()
を呼ぶ:
g.drawText ("Hello, World!", 20, 40, 200, 40, juce::Justification::centred, true);
これはGraphicsオブジェクトを使用して、幅200ピクセル、高さ40ピクセル、メインコンポーネントの左上隅から右に20ピクセル、下に40ピクセルの領域にテキストをレンダリングする。
アプリはこのようになるはずだ:

覚えておいてください:JUCEでの座標は常に現在のコンポーネントの左上隅から測定されます。(0, 0).これらは次のように与えられる。int
またはfloat
数値で指定する。グラフィカル要素や子コンポーネントの位置を指定するために使用すると、その左上隅が指定された位置に表示されるように配置される。
最後にGraphics::drawText()関数はbool
このフラグは、テキストが与えられた幅に収まらない場合に省略記号 (...) を表示するか、あるいは単にテキストを切り落とすかを決定します。
テキストフィールドの幅を200から小さい値に変更し、省略フラグがどのように機能するかに注目してください。
についてGraphics::drawText()関数は、単一行のテキストをレンダリングするのに適している。複数行のテキストに対しては、次のような他の関数が用意されている。Graphics::drawMultiLineText()そしてGraphics::drawFittedText().