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

Graphicsクラス

📚 Source Page

このチュートリアルでは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().

幾何学的形状のレンダリング​

このセクションでは、引き続きGraphicsクラスである。

線を引く​

以下の行をpaint()関数である：

g.setColour (juce::Colours::green);
g.drawLine (10, 300, 590, 300, 5);

を起点に、ウィンドウを横切る幅5ピクセルの緑色の水平線を描画する。(10, 300)で終わる。(590, 300).幾何学図形を前回使用した色とは別の色で描画したい場合は、毎回Graphics::setColour()関数を呼び出す。

もちろん、他の座標を指定して対角線を描くこともできます。実際、JUCEはサブピクセル座標もサポートしています(floatの値)。位置が物理的な画面ピクセルの間にある場合、JUCE は描画にアンチエイリアスを適用します。

エクササイズ

他の種類の線も試してみよう。破線や矢印の引き方がわかるかな？ヒントGraphicsクラスのドキュメント。

長方形を描く​

を使った矩形の描画Graphicsオブジェクトは非常に簡単だ。以下の行をpaint()関数本体：

g.setColour (juce::Colours::sandybrown);
g.drawRect (300, 120, 200, 170);

この場合、幅200ピクセル、高さ170ピクセルの茶色の長方形が、左上隅が次の位置になるように描画される。(300, 120).

オプションの第5引数で線の太さを指定できる：

g.setColour (juce::Colours::sandybrown);
g.drawRect (300, 120, 200, 170, 3);

塗りつぶされた矩形が欲しい場合は、関数Graphics::fillRect()その代わりだ：

g.setColour (juce::Colours::sandybrown);
g.fillRect (300, 120, 200, 170);

位置、幅、高さを別々に与える代わりに、長方形を表すより便利なクラスがあります。Rectangleクラスがある。のバージョンもある。Graphics::drawRect()このようなRectangleインスタンスで矩形の位置を指定する：

juce::Rectangle house (300, 120, 200, 170);
g.setColour (juce::Colours::sandybrown);
g.fillRect (house);

これは非常に便利である。Rectangleクラスについては、今後のチュートリアルで取り上げる予定である。

エクササイズ

を描く方法を見つける。どっしり長方形。次に充填丸みを帯びた長方形。

矩形を無地で塗りつぶす必要はありません。色のグラデーションや、他のいくつかのパターンのいずれかを使用することもできます。茶色の長方形が家を表しているとしましょう。市松模様で塗りつぶすことで、レンガのような質感を加えることができます。次のコードで長方形を描画します：

juce::Rectangle house (300, 120, 200, 170);
g.fillCheckerBoard (house, 30, 10, juce::Colours::sandybrown, juce::Colours::saddlebrown);

今、アプリケーションをコンパイルして実行すると、以下のようになるはずだ：

線と市松模様で塗りつぶされた長方形を加える。
線と市松模様で塗りつぶされた長方形を加える。

円を描く​

ではGraphicsクラスは円と楕円を描画します。関数Graphics::drawEllipse()そしてGraphics::fillEllipse().と同じように機能する。Graphics::drawRect()そしてGraphics::fillRect()の機能がある。

小さな風景に太陽を加えてみよう。次のコードは、ウィンドウの右上に60ピクセルの円を描く：

g.setColour (juce::Colours::yellow);
g.drawEllipse (530, 10, 60, 60, 3);

ただし(530, 10)するないは円の中心をその位置に配置する。その代わりに、他のすべてのグラフィック要素と同様に、オブジェクトは、それを囲む矩形の左上隅が指定された位置になるように配置される。

例えば、コンポーネントの境界を明示的に使って位置を計算することもできる：

g.setColour (juce::Colours::yellow);
g.drawEllipse (getWidth() - 70, 10, 60, 60, 3);
エクササイズ

を囲むラッパー関数を書く。Graphics::drawEllipse()関数を使えば、円をより簡単に描くことができる。この関数は点と半径の座標を取り、その点を中心とし、与えられた半径を持つ円を描画する。

他のポリゴンを描く​

最後に、家に屋根をつけよう。これは赤い三角形になる。

という関数がないことがわかります。drawTriangle()またはdrawPolygon()でのGraphicsクラスである。そのためには、より一般的なアプローチを取らなければならない。

をチェックしよう。Pathクラスである。このクラスは基本的に、接続された点のあらゆる集合を扱う。この場合、3点からなる三角形が必要だ。例えば、3つの点(300, 110),(500, 110),(400, 70)屋根の三角形が家の長方形の上に乗るように。

これがJUCEコードで私たちの赤い屋根がどのように見えるかだ：

g.setColour (juce::Colours::red);
 
Path roof;
roof.addTriangle (300, 110, 500, 110, 400, 70);
g.fillPath (roof);
PathA path is a sequence of lines and curves that may either form a closed shape or be open-ended.Definition juce_Path.h:77
Path::addTrianglevoid addTriangle(float x1, float y1, float x2, float y2, float x3, float y3)Adds a triangle to the path.

完成したデモアプリをコンパイルして実行すると、こんな感じになるはずだ：

完成したデモアプリ。
完成したデモアプリ。
注記

についてPathクラスは他にもいろいろなことができるので、今後のチュートリアルで詳しく説明します。

概要​

このチュートリアルではGraphicsオブジェクトをpaint()コールバックComponentクラスを使用して、コンポーネントの内部に描画することができます。これで、あなたは

  • テキストのレンダリングとフォーマット。
  • 線を引く。
  • 長方形、円、多角形などの幾何学図形を描く。

またGraphicsオブジェクトは、基礎となるフレームワークによって提供される描画コンテキストでありpaint()コールバック。

備考​

についてGraphicsクラスは、このチュートリアルで説明する以上のグラフィカルなレンダリング機能を備えています。特に、このクラスを使って（画像ファイルから）画像を画面に描画することができます。を使ってできることは他にもたくさんあります。Pathクラスである。その他にGraphicsクラスには、カラーグラデーション、透明レイヤー、トランスフォームなどがあります。これらのいくつかは今後のチュートリアルで取り上げます。

参照​