トップページ > フーリエ変換入門(FFT入門) > グラフの準備(3)
Canvasクラスの使い方がだいたい分かったところで、グラフを書くための クラスを作っていくことにします。 名前は“GraphCanvas”としておきます。 一度作っておけば後から何度でも使いまわせるようにしたいので、 クラスのフィールドとして関数の値を保持する配列を用意し、 配列の値そのものは外部から設定するようにします。
//****************************************************************************** //グラフ描画用のキャンバス GraphCanvas //フィールドのdata[]にデータを入れると描画されます //data[]の要素数は横サイズと同じ //****************************************************************************** //============================================================================== //クラスライブラリのインポート //============================================================================== import java.awt.*; import javax.swing.*; //============================================================================== //GraphCanvasクラス //============================================================================== class GraphCanvas extends Canvas { //============================================================================= //フィールド //============================================================================= //キャンバスの寸法 Dimension dimension; //グラフ化するデータ double[] data; //============================================================================= //コンストラクタ //============================================================================= GraphCanvas(int width,int height) { //領域のサイズ設定 setSize(width,height); //領域のサイズ取得 dimension = getSize(); //data[]のインスタンス生成 data = new double[dimension.width]; //グラフエリアを灰色に設定 setBackground(Color.lightGray); } //============================================================================= //paint()メソッド //============================================================================= public void paint(Graphics g) { //領域のサイズ取得 dimension = getSize(); //軸の色は黒 g.setColor(Color.black); //x軸 g.drawLine(0,dimension.height/2,dimension.width-1,dimension.height/2); //y軸 g.drawLine(dimension.width/2,0,dimension.width/2,dimension.height-1); //グラフ線の色は青に設定 g.setColor(Color.blue); //グラフ描画 for(int i=0;i\gdimension.width-2;i++) { g.drawLine( i, (int)( -data[i] + dimension.height/2 ), i+1, (int)( -data[i+1] + dimension.height/2 ) ); } } }
“Dimension”(ディメンション:寸法)はウィンドウやキャンバスなどのサイズを管理する構造体…の ようなクラスです。関数を描画するためにはヨコ幅、すなわちx軸の値の範囲を知っていたほうが便利なので サイズ管理のためのフィールドとして定義しておきます。
この配列に入れられたデータを関数のグラフとして描画します。
コンストラクタの引数にはタテとヨコのサイズが渡されるので、その値から キャンバスのサイズを設定します。
キャンバスの大きさをdimensionに保存します。“getSize()”メソッドの戻り値をそのまま dimensionに入れます。
x方向のサイズの分だけの要素を持つ配列を作成します。
グラフフィールドはlightGrayの背景色にします。
//軸の色は黒 g.setColor(Color.black); //x軸 g.drawLine(0,dimension.height/2,dimension.width-1,dimension.height/2); //y軸 g.drawLine(dimension.width/2,0,dimension.width/2,dimension.height-1);
x軸とy軸を描画します。x軸はヨコ方向のハジからハジまで線を引きます。y方向の位置は 真ん中ということで、“dimension.height/2”としています。
y軸はタテ方向のハジからハジまで線を引きます。x方向の位置は真ん中ということで、 “dimension.width/2”としています。
x軸、y軸ともに終点の座標は“dimension.width-1”、“dimension.height-1”のように-1した値を設定しています。 これは、キャンバスの座標は0から始まるので、サイズが400だった場合は一番ハジの座標が399となるからです。
//グラフ線の色は青に設定 g.setColor(Color.blue); //グラフ描画 for(int i=0;i\gtdimension.width-2;i++) { g.drawLine(i,(int)(-data[i]+dimension.height/2),i+1,(int)(-data[i+1]+dimension.height/2)); }
実際に関数を描画する部分です。for文で回してどんどん短い線分を書いていきます。短い線分といっても、1ピクセル分のヨコ幅しかないので 点を打っている感じになります。
drawLine()メソッドの引数がゴチャゴチャしています。 x方向は、単にi番目のピクセルからi+1番目のピクセル、要は隣同士のピクセルを結ぶだけです。 y方向はdata[]の値をプロットするところです。ここで下図のようにCanvasの座標系と 普通のxy平面のグラフのy軸の向きの違いや、x軸というオフセットの分などを計算しているために 記述がややこしくなっています。また、data[]はdouble型の配列なのに対して、 Cnavasの座標はint型です。よって、ピクセルに打ち込むためにint型にキャストしています。