◆PROCESSING 逆引きリファレンス
カテゴリー：GUI
グラフを描くには（grafica：GTitleの利用）
【概要】
PROCESSINGできれいなグラフを描くライブラリの１つにgraficaがあります。
「グラフを描くには（grafica：導入とGPlotの利用）」では、graficaのインストール方法と、グラフの基本となるGPlotについて解説しました。
今回はGPlotのタイトル部分を構成するGTitleについて、紹介したいと思います。
なお、graficaの使い方については、以下の4つに分けて解説しています。
- グラフを描くには（grafica：導入とGPlotの利用）
- グラフを描くには（grafica：GTitleの利用）- 今回 –
- グラフを描くには（grafica：GAxisの利用）
- グラフを描くには（grafica：様々な効果）
graficaのインストール方法と概要については「グラフを描くには（grafica：導入とGPlotの利用）」を参照してください。
前提知識
非常にシンプルなグラフ描画を行うプログラムは以下のようになります。以降は、これをベースに説明を行います。
詳細については後述しますがタイトルを描くためには、draw()関数の中でbeginDraw()とendDraw()の間にdrawTitle()を記述しておく必要があります。忘れるとタイトルが表示されませんので、注意してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import grafica.*; GPlot plot; //グラフ全体 void setup(){ size(300,300); //GPlotを生成 plot = new GPlot(this,0,0, 300, 300); //GPointsArrayを生成し、データ(GPoint)を追加 GPointsArray data = new GPointsArray(); data.add( 10, 10 ); data.add( 15, 20 ); data.add( 30, 40 ); //GPlotにGPointsArrayを関連付ける plot.addPoints( data ); } void draw(){ //描画開始(ここから描画終了命令の間に、グラフ描画命令を並べる) plot.beginDraw(); //Box、Point、Line、XY軸を描画 plot.drawBox(); plot.drawPoints(); plot.drawLines(); plot.drawXAxis(); plot.drawYAxis(); //タイトルを描画 plot.drawTitle(); //描画終了 plot.endDraw(); } |
＜出力例＞
graficaで描くグラフの代表的な構成パーツは以下のようになっています。
赤文字は、それぞれ別の部品（クラス）として構成されています。
【詳細】
タイトルオブジェクトを取得する
タイトルはGTitleクラスから構成されています。タイトル名についてはGPlotに対して直接指定する事も可能ですが、これについては「グラフを描くには（grafica：導入とGPlotの利用）」を参照してください。
まずはGPlotからタイトルオブジェクト（GTitle）を取得する方法です。
タイトルオブジェクトを取得void GTitle title = plot.getTitle();
plot：GPlotインスタンス
title：GTitleインスタンス
タイトルオブジェクト（GTitle）は、GPlotインスタンスから getTitle() 命令で取得します。
|
1 2 3 4 5 6 7 8 9 10 11 |
GPlot plot; void setup(){ size(300,300); //GPlotを生成 plot = new GPlot(this, 0, 0, 300, 300 ); //タイトル(GTitle)を取得 GTitle title = plot.getTitle(); … } |
以下では、取り出したオブジェクトに対して設定できるいくつかの項目を紹介します。
タイトル名を設定する
タイトル名を設定void void title.setText( String titleText );
plot：GPlotインスタンス
title：GTitleインスタンス
取得したオブジェクトにタイトル名をセットします。タイトル名はGPlotに対して設定しても良いし、取得したGTitleに設定しても構いません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
GPlot plot; void setup(){ size(300,300); //GPlotを生成 plot = new GPlot(this,0,0, 300, 300); //タイトル(GTitle)を取得 GTitle title = plot.getTitle(); //タイトル名を設定 title.setText("タイトル"); … } |
＜出力例＞
上記例ではGPlotから取得したGTitleに、タイトル名を設定しています。
文字の大きさを指定する
文字の大きさを指定void title.setFontSize( int fontSize );
title：GTitleインスタンス
fontSize ：タイトル名の文字サイズ（ポイント数）
setFontSize()で、タイトルに使う文字の大きさを変更可能です。デフォルトの文字サイズは13ポイントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import grafica.*; GPlot plot; //グラフ全体 void setup(){ size(300,300); //GPlotを生成 plot = new GPlot(this,0,0, 300, 300); //タイトル(GTitle)を取得 GTitle title = plot.getTitle(); //タイトル名を設定 title.setText("TESTタイトル"); //文字の大きさを指定 title.setFontSize( 24 ); … } |
＜出力例＞
文字の種類を指定する
文字の種類を指定void title.setFontName( String fontName );
title：GTitleインスタンス
fontName ：タイトル用フォント名
setFontName()で、タイトルに使う文字の種類を変更可能です。
あなたの環境にインストールされているPROCESSINGで利用できるフォント名は以下のプログラムで列挙可能です。このプログラムで列挙されるフォント名を指定してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
import java.util.Arrays; import java.util.List; void setup(){ List<String> flist = Arrays.asList(PFont.list()); for( String name : flist ){ println( "[" + name + "]" ); } } void draw(){ } |
＜出力例＞
デフォルトの文字はSansSerif.bold または SansSerif になっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import grafica.*; GPlot plot; //グラフ全体 void setup(){ size(300,300); //GPlotを生成 plot = new GPlot(this,0,0, 300, 300); //タイトル(GTitle)を取得 GTitle title = plot.getTitle(); //タイトル名を設定 title.setText("TESTタイトル"); //文字の種類を指定 title.setFontName( "HG行書体" ); … } |
＜出力例＞
文字の色を指定する
文字の色を指定void title.setFontColor( int fcolor );
title：GTitleインスタンス
fcolot：タイトルの色
setFontColor()で、タイトルに使う文字の色を変更可能です。色はPROCESSINGのcolor命令で作成して与えます。
デフォルトの色はcolor(100)で、灰色っぽい色になっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import grafica.*; GPlot plot; //グラフ全体 void setup(){ size(300,300); //GPlotを生成 plot = new GPlot(this,0,0, 300, 300); //タイトル(GTitle)を取得 GTitle title = plot.getTitle(); //タイトル名を設定 title.setText("TESTタイトル"); //文字の色を指定 title.setFontColor( color(0,0,255) ); … } |
＜出力例＞
文字の水平位置を指定する
文字の水平位置を指定void title.setTextAlignment( int alignment );
title：GTitleインスタンス
alignment：水平位置。LEFT、CENTER、RIGHTの何れかを指定
setTextAlignment()で、タイトルの水平位置を指定可能です。この値はPROCESSINGのtextAlign命令の第一引数として利用されます。デフォルトの水平位置はCENTER（中央）となっています。
垂直位置についてはBOTTOMを基準としており、直接変更することはできません。垂直位置を変更したい場合はsetOffsetメソッドを利用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import grafica.*; GPlot plot; //グラフ全体 void setup(){ size(300,300); //GPlotを生成 plot = new GPlot(this,0,0, 300, 300); //タイトル(GTitle)を取得 GTitle title = plot.getTitle(); //タイトル名を設定 title.setText("TESTタイトル"); //文字の水平位置を指定 title.setTextAlignment( RIGHT ); … } |
水平位置の基準が、GPlotの左マージン+BOXエリアの半分の位置になっている事に注意してください。このメソッドは、タイトル文字列のLEFT、RIGHT、CENTERを、この基準位置に合わせるように動作します。
＜出力例＞
文字の垂直位置を指定する
文字の垂直位置を指定void title.setOffset( float offset );
title：GTitleインスタンス
offset：BOXエリアからの相対上位置
setOffset()で、タイトルに使う文字列の垂直位置を制御します。垂直位置はBOXエリアからの相対位置になります。デフォルトは10ピクセルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import grafica.*; GPlot plot; //グラフ全体 void setup(){ size(300,300); //GPlotを生成 plot = new GPlot(this,0,0, 300, 300); //タイトル(GTitle)を取得 GTitle title = plot.getTitle(); //タイトル名を設定 title.setText("TESTタイトル"); //文字の垂直位置を指定 title.setOffset( 20 ); … } |
＜出力例＞
タイトルを描く
タイトルを描くvoid plot.drawTitle();
plot：GPlotインスタンス
グラフの描画命令はdraw()関数の中に記述します。
必ずGPlotクラスのbeginDrawメソッドとendDrawメソッドの間に、挟むようにして記述します。beginDrawメソッドとendDrawメソッドだけでは、グラフは描画されません。
タイトルを描画するには、drawTitleメソッドをbeginDrawメソッドとendDrawメソッドに挟むようにして記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import grafica.*; GPlot plot; //グラフ全体 void setup(){ … } void draw(){ //描画開始(ここから描画終了命令の間に、グラフ描画命令を並べる) plot.beginDraw(); //Box、Point、Line、XY軸を描画 plot.drawBox(); plot.drawPoints(); plot.drawLines(); plot.drawXAxis(); plot.drawYAxis(); //タイトルを描く plot.drawTitle(); //描画終了 plot.endDraw(); } |
【関連記事】
- グラフを描くには（grafica：導入とGPlotの利用）
- グラフを描くには（grafica：GAxisの利用）
- グラフを描くには（grafica：様々な効果）
サンプルプログラム
ちょっとしたグラフを表示する例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/** * PROCESSING 3 grafica Sample2 * @auther MSLABO * @version 2020/06 1.0 */ import grafica.*; GPlot plot; //グラフ全体 PImage haikei; void setup(){ size(300,300); //背景読み込み haikei = loadImage("weight.png"); //GPlotを生成 plot = new GPlot(this,0,0, 300, 300); //GPointsArrayを生成し、データ(GPoint)を追加 GPointsArray data = new GPointsArray(); data.add( 140, 43.1 ); data.add( 145, 46.3 ); data.add( 150, 49.5 ); data.add( 155, 52.9 ); data.add( 160, 56.3 ); data.add( 165, 59.9 ); data.add( 170, 63.6 ); data.add( 175, 67.4 ); data.add( 180, 71.3 ); //線と点を装飾 plot.setPointColor( color(255,0,0) ); plot.setPointSize( 8 ); plot.setLineWidth( 2 ); //軸にラベルをつける plot.getXAxis().setAxisLabelText("身長"); plot.getYAxis().setAxisLabelText("体重"); //GPlotにGPointsArrayを関連付ける plot.addPoints( data ); //タイトルの文字列、色、サイズ指定 GTitle title = plot.getTitle(); title.setText("適正体重"); title.setFontColor( 0 ); title.setFontSize( 20 ); } void draw(){ background( 255 ); image( haikei, 70, 40 ); //描画開始 plot.beginDraw(); //Point、Line、XY軸、タイトルを描画 plot.drawPoints(); plot.drawLines(); plot.drawXAxis(); plot.drawYAxis(); plot.drawTitle(); //描画終了 plot.endDraw(); } |
身長と適正体重の関係をグラフにしてみました。私は・・・あ、考えないことにします（汗）。
＜出力サンプル＞
（画像URL：illust-ac 様：Yakkoさん）
本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。