ゆるゆるプログラミング

・正三角形の描画

GraphicsクラスdrawLineメソッドを使って正三角形を表示する方法を説明します。正三角形は、3辺の長さが全て同じ三角形です。

正三角形の描画

ここで紹介している方法は、正三角形の重心座標と1辺の長さから3つの角の頂点座標を計算し、それら3つの座標をdrawLineで結んで三角形を表示するものです。

以下は、正三角形を表示するJavaのソースコードと実行結果です。

GR_Triangle.java
001:    import java.awt.*;
002:    import javax.swing.*;
003:    
004:    public class GR_Triangle {
005:    	public static void main(String[] args) {
006:    		JFrame frame = new JFrame();
007:    
008:    		// // タイトル名を設定
009:    		frame.setTitle( "正三角形描画" );
010:    
011:    		// フレームの大きさを設定
012:    		frame.setSize( 256, 256 );
013:    
014:    		// ”×”ボタンを押した時の処理を設定
015:    		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
016:    
017:    		// フレームにパネルを追加
018:    		MyPanel panel = new MyPanel();
019:    		frame.getContentPane().add( panel );
020:    
021:    		// フレームを表示
022:    		frame.setVisible( true );
023:    	}
024:    }
025:    
026:    
027:    // JPanelを継承したMyPanelを作成
028:    class MyPanel extends JPanel {
029:    	public MyPanel() {
030:    		// 背景色を白(white)に設定
031:    		setBackground( Color.white );
032:    	}
033:    
034:    
035:    	// drawLineによる正三角形の描画
036:    	//  g  : グラフィックコンテキスト
037:    	//  gx : 正三角形の重心x座標
038:    	//  gy : 正三角形の重心y座標
039:    	//  a  : 1辺の長さ
040:    	private void drawTriangle( Graphics g, int gx, int gy, int a )
041:    	{
042:    		// 三角形の3つの角の座標
043:    		int x1, y1, x2, y2, x3, y3;
044:    
045:    		// 正三角形の高さ
046:    		double h;
047:    
048:    		// 正三角形の高さの計算
049:    		double l = (double)a;
050:    		h = Math.sqrt( l * l - ( l / 2.0 ) * ( l / 2.0 ) );
051:    		
052:    		// 正三角形の頂点座標を計算
053:    		x1 = gx;
054:    		y1 = (int)( (double)gy - h * 2.0 / 3.0 );
055:    
056:    		x2 = (int)( (double)gx - l / 2.0 );
057:    		y2 = (int)( (double)gy + h * 1.0 / 3.0 );
058:    
059:    		x3 = (int)( (double)gx + l / 2.0 );
060:    		y3 = y2;
061:    
062:    		// 各辺の描画
063:    		g.drawLine( x1, y1, x2, y2 );
064:    		g.drawLine( x2, y2, x3, y3 );
065:    		g.drawLine( x3, y3, x1, y1 );
066:    	}
067:    
068:    
069:    	// 描画
070:    	public void paintComponent( Graphics g ) {
071:    		super.paintComponent( g );
072:    
073:    		// ラインの色を黒(black)に設定
074:    		g.setColor( Color.black );
075:    
076:    		// 正三角形を描画
077:    		drawTriangle( g, 120, 127, 100 );
078:    	}
079:    }

GR_Triangle.javaの実行結果

drawLineによる正三角形の描画

ここからは、このソースコードを上から順番に解説していきます。

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

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

004:    public class GR_Triangle {

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

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

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

006:    		JFrame frame = new JFrame();

フレームの表示は、JFrameクラスを使います。

008:    		// // タイトル名を設定
009:    		frame.setTitle( "正三角形描画" );

ウィンドウに表示するタイトルを指定します。この例では、正三角形描画という文字列を指定しています。

011:    		// フレームの大きさを設定
012:    		frame.setSize( 256, 256 );

フレーム全体のサイズを指定します。この例では、フレーム全体(タイトルバーと縁を含む)のサイズは256x256ピクセルです。

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

"×"ボタンを押したときの処理を指定します。JFrame.EXIT_ON_CLOSEは、フレームを閉じることを意味しています。

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

フレームにパネル(Jpanelクラス)を割り当てます。パネルは、グラフィック表示やボタンなどを乗せられる板のようなものです。ここでは、JPanelクラスを継承したMyPanelクラスを作り、そのクラスの中でラインを描画します。MyPanelクラスのソースは27行目から書いています。

027:    // JPanelを継承したMyPanelを作成
028:    class MyPanel extends JPanel {

JPanelクラスを継承したMyPanelクラスです。

029:    	public MyPanel() {
030:    		// 背景色を白(white)に設定
031:    		setBackground( Color.white );

パネルの背景色を白にしています。public MyPanel()は、MyPanelクラスが作られる(実行される)ときに1回だけ呼ばれるメソッドです。public クラス名( 引数 )を書くことで、最初に実行するメソッドを作ることが出来ます。

035:    	// drawLineによる正三角形の描画
036:    	//  g  : グラフィックコンテキスト
037:    	//  gx : 正三角形の重心x座標
038:    	//  gy : 正三角形の重心y座標
039:    	//  a  : 1辺の長さ
040:    	private void drawTriangle( Graphics g, int gx, int gy, int a )
041:    	{
042:    		// 三角形の3つの角の座標
043:    		int x1, y1, x2, y2, x3, y3;
044:    
045:    		// 正三角形の高さ
046:    		double h;
047:    
048:    		// 正三角形の高さの計算
049:    		double l = (double)a;
050:    		h = Math.sqrt( l * l - ( l / 2.0 ) * ( l / 2.0 ) );
051:    		
052:    		// 正三角形の頂点座標を計算
053:    		x1 = gx;
054:    		y1 = (int)( (double)gy - h * 2.0 / 3.0 );
055:    
056:    		x2 = (int)( (double)gx - l / 2.0 );
057:    		y2 = (int)( (double)gy + h * 1.0 / 3.0 );
058:    
059:    		x3 = (int)( (double)gx + l / 2.0 );
060:    		y3 = y2;
061:    
062:    		// 各辺の描画
063:    		g.drawLine( x1, y1, x2, y2 );
064:    		g.drawLine( x2, y2, x3, y3 );
065:    		g.drawLine( x3, y3, x1, y1 );
066:    	}

正三角形を描画するメソッドです。

48行目から50行目で、三角形の高さhの計算を行っています。与えられた1辺の長さadouble型変数lに代入し、下図の計算式で高さを計算しています。

drawLineによる

ピタゴラスの定理で、高さを得ることができます。

52行目から60行目で、三角形の頂点の座標を計算しています。下図のように重心は底辺から1/3に位置することを利用し、高さhと重心座標(gx,gy)で頂点の座標(x1,y1)、(x2,y2)、(x3,y3)を計算しています。

drawLineによる

62行目から65行目で、3つの座標をdrawLineで結んで三角形を描画しています。

Graphics.drawLineメソッド

public abstract void drawLine( int x1, int y1, int x2, int y2 )
■このグラフィックスコンテキストの座標系の点 (x1, y1) と点 (x2, y2) との
                        間に現在の色を使って線を描きます。

  パラメータ x1 : グラフィックスコンテキストのx座標1
        y1 : グラフィックスコンテキストのy座標1
        x2 : グラフィックスコンテキストのx座標2
        y2 : グラフィックスコンテキストのy座標2

  戻り値     なし

069:    	// 描画
070:    	public void paintComponent( Graphics g ) {
071:    		super.paintComponent( g );

パネルの描画メソッドです。このpublic void paintComponent( Graphics g )メソッドは、パネルの表示が必要なときに呼び出されるメソッドです。メソッド名と引数は、変えないでください。

073:    		// ラインの色を黒(black)に設定
074:    		g.setColor( Color.black );

ここから正三角形の描画です。ここでは、ラインの色を黒に設定しています。

Graphics.setColorメソッド

public abstract void setColor( Color c )
■このグラフィックスコンテキストの現在の色を、指定された色に設定します。

  パラメータ c : 色

  戻り値     なし

076:    		// 正三角形を描画
077:    		drawTriangle( g, 120, 127, 100 );

正三角形の描画メソッドを呼び出しています。グラフィック座標(120,127)で重心を指定し、1辺の長さを100にしています。この例では線幅を指定していないので1ピクセルの幅の三角形が描画されます。

重心座標は3頂点の平均値ですが、ここで指定する重心座標は、正三角形の中心付近の座標として指定してみてください。正確な位置に表示したければ、drawTriangleメソッドに3頂点のどれかの値を与えるように変更する必要があります。興味があれば試してください。

■新着情報

2017.11.17 N値化 カラー画像をN値化する方法について解説
2017.11.16 最も近い値の取得 指定値に最も近い配列の値を取得する方法を解説
2017.10.02 アルファ値(透過) アルファ値(透過)について

■広告

法人向けのETC専用カード

~約8,000名の受講生と80社以上の導入実績~ 企業向けプログラミング研修ならCodeCamp

日本最大級ショッピングサイト!お買い物なら楽天市場

Topへ