2023.01.27

数学グラフ

xy-座標の描画の実装

SwingパッケージとAxis2Dクラスを使って、数学座標系座標軸とグリッドを表示する方法を解説します。

xy-座標描画

Axis2Dクラスの詳細な説明と、ソースコードの取得は以下の記事を参照してください。

Graphicsオブジェクトにxy-座標とグリッド(格子)を描画するクラスを作成しました。Javaのソースコードで詳しく解説しています。

2023.01.24

Javaソースコード

xy-座標軸、グリッドを表示するソースコードです。

Axis2DSample1.java

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
import java.awt.*;
import javax.swing.*;

public class Axis2DSample1 {
	public static void main(String[] args) {
		// フレームの大きさを設定
		int w = 400;
		int h = 320;

		// フレームを作成
		JFrame frame = new JFrame();

		//  タイトル名を設定
		frame.setTitle( "xy-座標" );


		// 内側フレームの大きさを設定
		frame.getContentPane().setPreferredSize( new Dimension( w, h ) );
		frame.pack();

		// ”×”ボタンを押した時の処理を設定
		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

		// フレームにパネルを追加
		MyPanel panel = new MyPanel();
		frame.getContentPane().add( panel );

		// フレームを表示
		frame.setVisible( true );
	}
}


// JPanelを継承したMyPanelを作成
class MyPanel extends JPanel {
	public MyPanel() {
		// 背景色を白(white)に設定
		setBackground( Color.white );
	}


	// 描画
	public void paintComponent( Graphics g ) {
		super.paintComponent( g );

		// フレームの大きさを取得
		int frame_w = getWidth();
		int frame_h = getHeight();

		// グラフィック座標の原点座標をフレームの真ん中に設定
		int ox = frame_w / 2;
		int oy = frame_h / 2;

		// グラフィック座標のグリッド幅を設定
		int grid_x = 12;
		int grid_y = 12;

		// 数学座標のグリッド幅を設定
		double scale_x = 1.0;
		double scale_y = -1.0;

		// 座標軸とグリッドを描画
		// Axis2Dオブジェクトを作成
		Axis2D axis = new Axis2D();

		// 描画情報を設定
		axis.init( frame_w, frame_h, ox, oy, grid_x, grid_y, scale_x, scale_y );

		// 描画
		axis.draw_grid( g, Color.black, Color.cyan );
	}
}

ソースコードの解説

ここから、「Axis2DSample1.java」を解説していきます。

001
002
import java.awt.*;
import javax.swing.*;

Javaクラスライブラリの中から「java.awt」と 「javax.swing」というパッケージにあるクラスを、このプログラム内で使うために記述します。

004
public class Axis2DSample1 {

クラス名を、Axis2DSample1としています。

005
	public static void main(String[] args) {

このmainメソッドからプログラムを実行します。

006
007
008
		// フレームの大きさを設定
		int w = 400;
		int h = 320;

フレームの大きさを設定するint型変数wとhにそれぞれ400と320を代入しています。wは幅で、hが高さです。

010
011
		// フレームを作成
		JFrame frame = new JFrame();

JFrameオブジェクトを作成しています。

013
014
		//  タイトル名を設定
		frame.setTitle( "xy-座標" );

setTitleメソッドで、タイトルに”xy-座標”を設定しています。

017
018
019
		// 内側フレームの大きさを設定
		frame.getContentPane().setPreferredSize( new Dimension( w, h ) );
		frame.pack();

setPreferredSizeメソッドとpackメソッドで内側のサイズを指定したフレームを作成しています。変数wとhを使って、サイズを(400,320)にしています。

021
022
		// ”×”ボタンを押した時の処理を設定
		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

"×"ボタンをクリックしたときに、フレームを閉じる処理を設定しています。

024
025
026
		// フレームにパネルを追加
		MyPanel panel = new MyPanel();
		frame.getContentPane().add( panel );

フレームにパネルに追加しています。

このパネルで、サインカーブのグラフを表示いています。34行目以降を参考にしてください。

028
029
		// フレームを表示
		frame.setVisible( true );

setVisibleメソッドtrueを渡して、フレームを表示しています。

034
035
// JPanelを継承したMyPanelを作成
class MyPanel extends JPanel {

JPanelを継承したMyPanelクラスを作成しています。

036
037
038
	public MyPanel() {
		// 背景色を白(white)に設定
		setBackground( Color.white );

クラス名と同じ名前のメソッドMyPanel()はコンストラクタと呼ばれ、クラス作成時に呼ばれます。そのメソッドの中に初期化の処理を記述します。

ここでは、setBackgroundメソッドにColor.whiteを渡して、背景色を白にする処理を記述しています。

042
043
	// 描画
	public void paintComponent( Graphics g ) {

paintComponentメソッドは、画面の表示が必要な時に呼ばれるメソッドです。

044
		super.paintComponent( g );

スーパークラスのpaintComponenメソッドを呼び出しています。これで、コンポーネントに必要な表示などが行われます。

046
047
048
		// フレームの大きさを取得
		int frame_w = getWidth();
		int frame_h = getHeight();

フレームの大きさを取得しています。

getWidthメソッドで、現在のコンポーネントの幅を取得し、int型変数frame_wに代入しています。

getHeightメソッドで、現在のコンポーネントの高さを取得し、int型変数frame_hに代入しています。

050
051
052
		// グラフィック座標の原点座標をフレームの真ん中に設定
		int ox = frame_w / 2;
		int oy = frame_h / 2;

グラフィック座標原点座標(ox,oy)を設定しています。ここでは、フレームの中心座標が原点になるようにしています。

原点のx座標を格納する変数oxには、フレームの幅を格納した変数frame_wを2で割った値を代入しています。

原点のy座標を格納する変数oyには、フレームの高さを格納した変数frame_hを2で割った値を代入しています。

054
055
056
		// グラフィック座標のグリッド幅を設定
		int grid_x = 12;
		int grid_y = 12;

グラフィック座標のグリッド幅grid_x、グリッド高さgrid_yを設定しています。

ここでは、変数grid_xと変数grid_yに12を代入しています。

058
059
060
		// 数学座標のグリッド幅を設定
		double scale_x = 1.0;
		double scale_y = -1.0;

数学座標のグリッド幅scale_x、グリッド高さscale_yを設定しています。

ここでは、変数scale_xに1.0、変数scale_yに-1.0を代入しています。

これで、X方向の12pixel(grid_x=12)が数学座標で1.0を表し、Y方向の12pixel(grid_y=12)が数学座標で-1.0を表したことになります。

グラフィック座標系Y軸の+(プラス)は下方向で、XY座標系Y軸の+(プラス)は上方向です。変数scale_yにマイナス値を代入することで数学座標系Y軸の+(プラス)が上方向になります。

062
		// 座標軸とグリッドを描画

ここから、座標軸とグリッドを描画する処理です。

063
064
		// Axis2Dオブジェクトを作成
		Axis2D axis = new Axis2D();

Axis2Dのオブジェクトaxisを作成しています。

066
067
		// 描画情報を設定
		axis.init( frame_w, frame_h, ox, oy, grid_x, grid_y, scale_x, scale_y );

描画する情報を設定しています。

Axis2D.initメソッド

public boolean init( int fw, int fh, int ox, int oy, int gx, int gy, double sx, double sy )
・描画するxy-座標の情報を設定します。

  パラメータ fw     : フレームの横のピクセル数
        fh     : フレームの縦のピクセル数
        ox     : グラフィック座標の原点xの位置(pixel) 
        oy     : グラフィック座標の原点yの位置(pixel) 
        gx     : グラフィック座標のグリッドの幅(pixel) 
        gy     : グラフィック座標のグリッドの高さ(pixel) 
        sx     : 数学座標のグリッドの幅(gxあたりの幅)
                       例)sx=1.0を指定した場合、数学座標でのグリッド幅は1.0になり、右方向が+(プラス)となります。
                       例)sx=-0.5を指定した場合、数学座標でのグリッド高は-0.5になり、右方向が-(マイナス)となります。
        sy     : 数学座標のグリッドの高さ(gyあたりの高さ)
                       例)sy=-1.0を指定した場合、数学座標でのグリッド幅は-1.0になり、上方向が+(プラス)となります。
                       例)sy=1.0を指定した場合、数学座標でのグリッド高は1.0になり、上方向が-(マイナス)となります。
                         グラフィック座標のY軸のプラス方向は下で、数学座標のY軸のプラス方向は上です。
                         このメソッドでは、syにマイナスを代入することで数学座標の上方向をプラスにしています。

  戻り値    true   : 設定に成功
         false  : 設定に失敗
069
070
		// 描画
		axis.draw_grid( g, Color.black, Color.cyan );

ここで描画しています。座標軸の色は黒(Color.black)、グリッド線の色はシアン(Color.cyan)にしています。

Axis2D.draw_gridメソッド

public void draw_grid( Graphics g, Color axiscolor, Color gridcolor )
・座標軸とグリッドを描画します。

  パラメータ g : 描画するGraphicsオブジェクト
        axiscolor : 座標軸の色
        gridcolor : グリッド(格子)の色

  戻り値   なし

  詳細     initメソッドで設定後に、このメソッドを呼ぶとGraphicsオブジェクトに座標とグリッドを描画します。座標軸とグリッドの線幅は1です。

以上です。

Axis2DSample1のコンパイル

コンパイルには、"Axis2DSample1.java"の他に、「Axis2D.java」と「Transformation2d.java」が必要です。

以下の記事から取得してください。

Graphicsオブジェクトにxy-座標とグリッド(格子)を描画するクラスを作成しました。Javaのソースコードで詳しく解説しています。

2023.01.24

コンパイル方法

javac Axis2DSample1.java

ソースファイル文字コードを指定してコンパイルする場合は、以下の方法をお試しください。

コンパイル方法(ソースの文字コードが"ANSI"の場合)

javac -encoding sjis Axis2DSample1.java

コンパイル方法(ソースの文字コードが"utf-8"の場合)

javac -encoding utf-8 Axis2DSample1.java

次に読んでほしいコンテンツ

数学に関係するJavaのメソッドやソースコードなどを紹介しています。

2022.10.25

Graphicsオブジェクトにxy-座標とグリッド(格子)を描画するクラスを作成しました。Javaのソースコードで詳しく解説しています。

2023.01.24

Swingパッケージを使って数式のグラフを表示する方法を解説します。サイン(sin)カーブを表示するJavaソースコードを紹介しています。

2019.09.14

Swingパッケージを使って絶対値のグラフを表示するJavaソースコードを紹介しています。

2019.09.21

Swingパッケージを使って放物線のグラフを表示するJavaソースコードを紹介しています。

2019.09.21

Swingパッケージを使って平方根のグラフを表示するJavaソースコードを紹介しています。

2019.09.21

Swingパッケージを使って立方根のグラフを表示するJavaソースコードを紹介しています。

2019.10.06

Swingパッケージを使ってコサイン(cos)のグラフを表示するJavaソースコードを紹介しています。

2019.09.21

Swingパッケージを使ってタンジェント(tan)のグラフを表示するJavaソースコードを紹介しています。

2019.09.21

プログラムの最初に実行されるメソッドは?

2022.12.13

プログラミングで使う変数って何?

2020.03.23

Javaのプログラムを書いてみませんか?プログラムの書き方をくわしく説明しています。

2020.03.23

「Javaソースコード」から実行可能な「オブジェクトコード」に変換する方法をくわしく説明しています。

2020.03.23

関連コンテンツ

Javaプログラムの構成について解説しています。詳しくは、こちらをご覧ください。

2020.03.23

平面上の位置を表す座標系の1つXY座標系について詳しく解説。

2020.03.23

Javaのプログラムを書いてみませんか?プログラムの書き方をくわしく説明しています。

2020.03.23

プログラミング言語とは?種類や特徴について説明しています。

2022.08.03

プログラムの最初に実行されるメソッドは?

2022.12.13

プログラミングで使う変数って何?

2020.03.23

オブジェクト指向の考え方を、Javaのソースコードを使って詳しく解説しています。興味のある方は、是非ご覧ください。

2022.09.02

メソッドの定義方法を詳しく解説しています。Javaのサンプルソースコードを使った説明もあります。

2020.03.23

sin(サイン)の意味と、Math.sinメソッドの使い方をソースコードを使って詳しく解説しています。

2020.03.23

条件式を判断して処理を分岐する方法を詳しく説明しています。

2023.03.20

画像の座標系はどのように定義されていますか?

2020.03.23

数学座標(x,y)を画像座標(px,py)に変換する方法をソースコードを使って詳しく説明しています。

2020.03.23

Graphicsオブジェクトにxy-座標とグリッド(格子)を描画するクラスを作成しました。Javaのソースコードで詳しく解説しています。

2023.01.24

「Javaソースコード」から実行可能な「オブジェクトコード」に変換する方法をくわしく説明しています。

2020.03.23

数値しか扱えないコンピュータでどうやって文字を記憶、処理しているのかを説明しています。興味のある方は、記事をご覧ください。

2020.03.23

広告