↓↓クリックして頂けると励みになります。
【26 | Frameの応用】 << 【ホーム】 >> 【28 | 画像と文字列描画】
Javaで図形を描画するには、いくつかの方法がありますが、その中でも一般的な方法は次の2つです。
- AWT (Abstract Window Toolkit) を使用する方法
- JavaFX を使用する方法
このチュートリアルでは、AWT (Abstract Window Toolkit) を使用する方法を解説します。
AWT は Java の初期のGUIツールキットで、基本的な描画機能を提供します。
java.awt.Graphics クラスを使用して図形を描画します。
図形の描画には、JPanelやCanvasなどの描画可能なコンポーネントを使用します。
Visual Studio Codeで以下のプログラム「AWTDrawTest1.java」を作成します。
新規作成 【AWTDrawTest1.java】
import java.awt.*; public class AWTDrawTest1 extends Canvas { private Color color; private Polygon poly; //x座標のまとまり private int[] x = {320, 270, 370}; //y座標のまとまり private int[] y = {10, 60, 60}; private int[] x2 = {290, 310, 330, 350, 350, 330, 310, 290}; private int[] y2 = {90, 70, 70, 90, 110, 130, 130, 110}; private int[] x3 = {290, 310, 330, 350, 350, 330, 310, 290}; private int[] y3 = {160, 140, 140, 160, 180, 200, 200, 180}; /**コンストラクタ。Canvasの大きさと色を設定 public AWTDrawTest1() { //親クラスであるCanvasからフィールド、メソッドは継承済み //キャンバスの大きさを設定 setSize(500,400); //キャンバスの背景色は黒 setBackground(Color.black); } /**キャンバスで描写の必要があるときに呼ばれるメソッド*/ public void paint(Graphics g) { //色の設定 g.setColor(Color.green); //直線 g.drawLine(20,20,480,380); //色の設定 g.setColor(Color.red); //矩形 g.drawRect(10, 10, 100, 50); //塗りつぶしの矩形 g.fillRect(10, 70, 100, 50); //コーナーのある矩形 g.drawRoundRect(10, 130, 100, 50, 10, 20); //輪郭を強調した矩形 g.draw3DRect(10, 190, 100, 50, true); //輪郭を強調した塗りつぶしの矩形 g.fill3DRect(10, 250, 100, 50, false); //色の設定 g.setColor(Color.yellow); //楕円 g.drawOval(150, 10, 100, 50); //塗りつぶしの円弧 g.fillArc(150, 70, 100, 50, 90, 180); //色を生成 color = new Color(200, 120, 200); //色を設定 g.setColor(color); //多角形の生成 poly = new Polygon(x, y, 3); //多角形 g.drawPolygon(poly); //多角形を生成 poly = new Polygon(x2, y2, 8); //塗りつぶしの多角形 g.fillPolygon(poly); //直線で座標を結ぶ g.drawPolyline(x3, y3, 8); //色の生成 color = new Color(200, 120, 200, 160); //色を設定 g.setColor(color); //塗りつぶしの矩形 g.fillRect(290, 210, 100, 50); } /**main()*/ public static void main(String[] args) { //Canvasを生成 AWTDrawTest1 canvas = new AWTDrawTest1(); //Frameを生成 Frame frame = new Frame("AWTDrawTest1"); //CanvasをFrameに配置 frame.add(canvas); //フレームのサイズを設定 frame.setSize(500,400); //Frameを表示 frame.setVisible(true); } }
AWTでのグラフィックスの扱いについて説明します。
Javaの標準的な実行形態は「アプレット」と「アプリケーション」に大別されます。
アプレットはWebブラウザ上で実行させることを目的とし、アプリケーションはそれ単体で動作するプログラムを指します。
今は「アプリケーション」を作成しています。
GUI(Graphical User Interface グラフィカル・ユーザ・インタフェース)のアプリケーション作成は、「コンポーネント（java.awt.Componentクラス）」と呼ばれるアプリケーションを構成する部品（フレームやボタンなど）を組み合わせることで行います。
「コンテナ（java.awt.Containerクラス）」はComponentの機能を継承したもので、複数のコンポーネントをいろいろなレイアウトでは位置できるという特徴を持っています。
AWTでのグラフィックス描画やマウスやキーボードなどからのイベント取得には、通常コンポーネント「キャンバス（java.awt.Canvasクラス）」を使用します。
さらにCanvasを配置するためにコンテナ「フレーム（java.awt.Frameクラス）」が必要となります。
CanvasをFrameに配置するには次のようにします。
Canvas c = new Canvas(); //Canvasの生成 c.setSize(200, 300); //Canvasの大きさは200×300 Frame f = new Frame("Test"); //Frameを生成 f.add(c); //Frameの中央にキャンバスを配置 f.pack(); //Canvasのサイズを基にFrameサイズを決定 f.setVisible(true); //Frame表示
Frameで初期設定されているレイアウトは、「NORTH」「SOUTH」「WEST」「EAST」「CENTER」という５つの領域に配置する「BorderLayout」です。
pack()はフレーム内に配置するコンポーネントサイズに合わせてフレームのサイズを最小にするように調整します。
グラフィックスを実際に使用するには「java.awt.Graphics」クラスにある各種メソッドを用います。
Graphicsは具体的なコンポーネントなどの他にオフスクリーンと呼ばれる仮想的な領域にもグラフィックスを描画することが可能です。
通常AWTでグラフィックスを実際に描画するには、Canvasクラスで定義されている「paint(Graphics)メソッド」を利用します。
Canvasの表示を初めて行うときやアイコンからの復帰などCanvasの描画を行う必要がある場合に、生成されたCanvasに描画するためのGraphicsを引数としてpaint()メソッドが呼ばれます。
paint()は初期設定では単に「画面をクリアする」だけですので、通常はCanvasを親クラスとしたクラスでpaint()の内容を書き換えることになります。
このようなメソッドの書き換えを「オーバーライド」と呼びます。
さらにAWTではアニメーションの進行などのように、プログラムによってグラフィックスを書き直す必要がある場合にはCanvasクラスの親クラスComponentで定義されている「repaint()」メソッドを使用します。
repaint()にはいくつかの呼び出し方法があるのですが、最も単純なのは引数無しで指定する方法で「なるべく早くコンポーネントのupdate()メソッドを呼び出す」ことを行います。
Canvasクラスの「update(Graphics)」メソッドの初期設定は「背景色でクリアしてからpaint()を呼ぶ」ことですから、こちらもたいていオーバーラードが必要になります。
Graphicsクラスで定義されている図形を描くための主なメソッドを以下に挙げます。
[drawLine]
java.awt Graphicsクラス
public abstract void drawLine(int x1, int y1, int x2, int y2)
このグラフィックス・コンテキストの座標系内の点(x1, y1)と(x2, y2)の間に、現在の色を使用して線を描画します。
パラメータ:
x1 - 最初の点のx座標。
y1 - 最初の点のy座標。
x2 - 2番目の点のx座標。
y2 - 2番目の点のy座標。
[drawRect]
java.awt Graphicsクラス
public void drawRect(int x, int y, int width, int height)
指定された矩形の輪郭を描きます。
矩形の左端と右端はxとx + widthにあります。
上端と下端はyとy + heightにあります。
矩形は、グラフィックス・コンテキストの現在の色を使って描画されます。
パラメータ:
x - 描画される矩形のx座標。
y - 描画される矩形のy座標。
width - 描画される矩形の幅。
height - 描画される矩形の高さ。
[fillRect]
java.awt Graphicsクラス
public abstract void fillRect(int x, int y, int width, int height)
指定された矩形を塗りつぶします。
矩形の左端と右端はxとx + width - 1にあります。
上端と下端はyとy + height - 1にあります。
結果として得られる矩形は、幅がwidthピクセル、高さがheightピクセルの領域をカバーします。
矩形は、グラフィックス・コンテキストの現在の色を使って塗りつぶされます。
パラメータ:
x - 塗りつぶされる矩形のx座標。
y - 塗りつぶされる矩形のy座標。
width - 塗りつぶされる矩形の幅。
height - 塗りつぶされる矩形の高さ。
[drawRoundRect]
java.awt Graphicsクラス
public abstract void drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
丸いコーナー付きの輪郭の矩形をこのグラフィックス・コンテキストの現在の色を使用して描きます。
矩形の左端と右端はそれぞれxとx + widthにあります。
矩形の上端と下端はyとy + heightにあります。
パラメータ:
x - 描画される矩形のx座標。
y - 描画される矩形のy座標。
width - 描画される矩形の幅。
height - 描画される矩形の高さ。
arcWidth - 4隅にある弧の水平方向の直径。
arcHeight - 4隅にある弧の垂直方向の直径。
[fillRoundRect]
java.awt Graphicsクラス
public abstract void fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
指定された丸いコーナー付きの矩形を現在の色で塗りつぶします。
矩形の左端と右端はそれぞれxとx + width - 1にあります。
矩形の上端と下端はyとy + height - 1にあります。
パラメータ:
x - 塗りつぶされる矩形のx座標。
y - 塗りつぶされる矩形のy座標。
width - 塗りつぶされる矩形の幅。
height - 塗りつぶされる矩形の高さ。
arcWidth - 4隅にある弧の水平方向の直径。
arcHeight - 4隅にある弧の垂直方向の直径。
[draw3DRect]
java.awt Graphicsクラス
public void draw3DRect(int x, int y, int width, int height, boolean raised)
指定された矩形の輪郭を3Dで強調表示して描画します。
矩形の端は傾斜し、左上隅から光を当てたように強調表示されます。
強調表示効果に使われる色は、現在の色に基づいて指定されます。
結果として得られる矩形は、幅がwidth + 1ピクセル、高さがheight + 1ピクセルの領域をカバーします。
パラメータ:
x - 描画される矩形のx座標。
y - 描画される矩形のy座標。
width - 描画される矩形の幅。
height - 描画される矩形の高さ。
raised - 矩形が表面から浮き出たように見えるか、または表面がへこんだように見えるかを決定するboolean値。
[fill3DRect]
java.awt Graphicsクラス
public void fill3DRect(int x, int y, int width, int height, boolean raised)
現在の色で塗りつぶされている3Dで強調表示された矩形をペイントします。
矩形の端は傾斜が付けられ左上隅から光を当てられたように強調表示されます。
強調表示効果に使用される色は現在の色から決定されます。
パラメータ:
x - 塗りつぶされる矩形のx座標。
y - 塗りつぶされる矩形のy座標。
width - 塗りつぶされる矩形の幅。
height - 塗りつぶされる矩形の高さ。
raised - 矩形が表面から浮き出たように見えるか、または表面に彫り込まれたように見えるかを決定するboolean値。
[drawOval]
java.awt Graphicsクラス
public abstract void drawOval(int x, int y, int width, int height)
楕円の輪郭を描きます。
引数のx、y、width、heightで指定される矩形内に収まる円または楕円が描かれます。
楕円は、幅width + 1ピクセル、高さheight + 1ピクセルの領域をカバーします。
パラメータ:
x - 描画される楕円の左上隅のx座標。
y - 描画される楕円の左上隅のy座標。
width - 描画される楕円の幅。
height - 描画される楕円の高さ。
[fillOval]
java.awt Graphicsクラス
public abstract void fillOval(int x, int y, int width, int height)
指定された矩形の中の楕円形を現在の色で塗りつぶします。
パラメータ:
x - 塗りつぶされる楕円の左上隅のx座標。
y - 塗りつぶされる楕円の左上隅のy座標。
width - 塗りつぶされる楕円の幅。
height - 塗りつぶされる楕円の高さ。
[drawArc]
java.awt Graphicsクラス
public abstract void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)
指定された矩形をカバーする円弧または楕円弧の輪郭を描きます。
startAngleから始まってarcAngleの角度で展開された弧が、現在の色を使って描かれます。
角度は、0度が3時の位置にあるように解釈されます。
正の値は反時計方向、負の値は時計方向の回転を示します。
弧の中心は原点が(x, y)で、サイズがwidthおよびheight引数によって指定される矩形の中心になります。
結果として得られる弧は、幅がwidth + 1ピクセル、高さがheight + 1ピクセルの領域をカバーします。
角度は正方形でない境界の矩形に応じて相対的に決められ、その際、楕円の中心から境界の矩形の右上隅までを結ぶ線は常に45度になります。
境界の矩形の軸の長さがかなり違う場合には、弧セグメントの開始角度と終了角度は境界の長軸にそってさらに傾斜します。
パラメータ:
x - 描画される弧の左上隅のx座標。
y - 描画される弧の左上隅のy座標。
width - 描画される孤の幅。
height - 描画される孤の高さ。
startAngle - 開始角度。
arcAngle - 開始角度を基準にした、弧の角の大きさ。
[fillArc]
java.awt Graphicsクラス
public abstract void fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)
指定された矩形をカバーする円弧または楕円弧を塗りつぶします。
startAngleから始まってarcAngleの角度で展開された弧が描かれます。
角度は、0度が3時の位置にあるように解釈されます。
正の値は反時計方向、負の値は時計方向の回転を示します。
弧の中心は原点が(x, y)で、サイズがwidthおよびheight引数によって指定される矩形の中心になります。
結果として得られる弧は、幅がwidth + 1ピクセル、高さがheight + 1ピクセルの領域をカバーします。
角度は正方形でない境界の矩形に応じて相対的に決められ、その際、楕円の中心から境界の矩形の右上隅までを結ぶ線は常に45度になります。
境界の矩形の軸の長さがかなり違う場合には、弧セグメントの開始角度と終了角度は境界の長軸にそってさらに傾斜します。
パラメータ:
x - 塗りつぶされる弧の左上隅のx座標。
y - 塗りつぶされる弧の左上隅のy座標。
width - 塗りつぶされる孤の幅。
height - 塗りつぶされる孤の高さ。
startAngle - 開始角度。
arcAngle - 開始角度を基準にした、弧の角の大きさ。
[drawPolyline]
java.awt Graphicsクラス
public abstract void drawPolyline(int[] xPoints, int[] yPoints, int nPoints)
xおよびy座標の配列によって定義された連続的につながった直線を描画します。
点を定義する(x, y)座標の各ペア。
最初の座標と最後の座標が一致しない場合、図形は閉じません。
パラメータ:
xPoints - x点の配列
yPoints - y点の配列
nPoints - 点の総数
[drawPolygon]
java.awt Graphicsクラス
public abstract void drawPolygon(int[] xPoints, int[] yPoints, int nPoints)
xおよびy座標の配列によって定義された閉じた多角形を描画します。
点を定義する(x, y)座標の各ペア。
このメソッドは、nPointライン・セグメントによって定義された多角形を描画します。
ここで、1 ≤ i ≤ nPointsとすると、最初のnPoint - 1ライン・セグメントは(xPoints[i - 1], yPoints[i - 1])から(xPoints[i], yPoints[i])までのライン・セグメントです。
最後の点と最初の点が一致しない場合、それらを接続するラインを描画すれば図は自動的に閉じます。
パラメータ:
xPoints - x座標の配列。
yPoints - y座標の配列。
nPoints - 点の総数。
[fillPolygon]
java.awt Graphicsクラス
public abstract void fillPolygon(int[] xPoints, int[] yPoints, nt nPoints)
xおよびy座標の配列によって定義された閉じた多角形を塗りつぶします。
このメソッドは、nPointライン・セグメントによって定義された多角形を描画します。
ここで、1 ≤ i ≤ nPointsとすると、最初のnPoint - 1ライン・セグメントは(xPoints[i - 1], yPoints[i - 1])から(xPoints[i], yPoints[i])までのライン・セグメントです。
最後の点と最初の点が一致しない場合、それらを接続するラインを描画すれば図は自動的に閉じます。
多角形内の領域は、偶奇塗りつぶしルール(交互ルールともいう)を使って定義されます。
パラメータ:
xPoints - x座標の配列。
yPoints - y座標の配列。
nPoints - 点の総数。
Polygonクラスは、多角形のx、y座標それぞれを整数の配列とし、さらに点の総数を指定することで生成します。
生成したPolygon情報をdrawPolygon()で描画します。
Graphics g; //グラフィックスコンテキストを生成 int[] x = {50, 0, 100}; //x座標のまとまり int[] y = {50, 100, 100}; //y座標のまとまり Polygon p = new Polygon(x, y, 3); //x,yを３点のまとまりとして多角形を生成 g.drawPolygon(p); //Polygonを表示
drawPolygonメソッドは、座標のまとまりを扱うことも可能ですので、Polygonクラスを用いずに以下のようにすることでも同様の結果が得られます。
Graphics g; //グラフィックスコンテキストを生成 int[] x = {50, 0, 100}; //x座標のまとまり int[] y = {50, 100, 100}; //y座標のまとまり g.drawPolygon(x, y, 3); //x,yを３点のまとまった多角形として描画
色の設定はGraphicsクラスの「setColor(Color)」メソッドで行い、引数で指定する色はjava.awt.Colorクラスを利用します。
[setColor]
java.awt Graphicsクラス
public abstract void setColor(Color c)
このグラフィックス・コンテキストの現在の色を、指定された色に設定します。
このグラフィックス・コンテキストを使うこれ以降のグラフィック関連操作は、ここで指定された色を使用します。
パラメータ:
c - 新しい描画色。
基本的には次の色指定を行うまで図形描画はsetColor()で指定された色で行われます。
なおコンポーネントの背景色はComponentクラスで定義されているsetBackground(Color)で行うことも出来ます。
[setBackground]
java.awt Componentクラス
public void setBackground(Color c)
このコンポーネントのバックグラウンド・カラーを設定します。
バックグラウンド・カラーが各コンポーネントにそれぞれ異なる影響を与えます。
またコンポーネントのどの部分に影響を与えるかはオペレーティング・システムによって異なります。
パラメータ:
c - このコンポーネントのカラーになる色。
このパラメータがnullの場合、このコンポーネントは親のバックグラウンド・カラーを継承する
定数として用意されている色は13種類あり、それらは直接指定できます。
| 色 | 名称 |
| 黒 | black |
| ダークグレイ | darkGray |
| グレイ | gray |
| ライトグレイ | lightGray |
| 緑 | green |
| 青 | blue |
| シアン | cyan |
| 黄 | yellow |
| マゼンダ | magenta |
| オレンジ | orange |
| ピンク | pink |
| 赤 | red |
| 白 | white |
extends CanvasでCanvasクラスのフィールド、メソッドをすべて継承しています。
これによりコンストラクタ内ですべてを記述することなく、Canvasの機能を使うことが出来ます。
必要な部分のみ記述することでその部分のみを書き換えることが出来ます。
他のクラスの機能を受け継ぎ新しいクラスを作成することを「クラスを拡張する」と言います。
新しいクラスは既存のクラスを受け継ぐ仕組みになっています。
既存のクラスに新しく必要となる性質や機能（メンバ）を付け足すようにコードを書いていくことが出来ます。
新しく拡張したクラスが既存のクラスのメンバを受け継ぐことを継承といいます。
この時もとになる既存のクラスはスーパークラス、新しいクラスはサブクラスと呼ばれます。
つまりこのプログラムでは、スーパークラスは「Canvas」クラスでサブクラスは「AWTDrawTest1」クラスとなります。
サブクラスを宣言するには「extends」というキーワードにつづけて、スーパークラスの名前を指定します。
サブクラスはスーパークラスのメンバを継承します。
このためサブクラス内では受け継いだメンバについて特に記述する必要はありません。
スーパークラスにはない、独自のメンバだけを書いていけばよいのです。
実行結果を見てみましょう。
大きさ(500,400）のフレームが表示され、中にキャンバスが表示されています。
キャンバスには様々な図形が表示されています。
フレームの終了ボタンは使えませんので、Ctrlキー＋Cキーで強制終了してください。
~/Desktop/Programming/JP $ javac AWTDrawTest1.java ~/Desktop/Programming/JP $ java AWTDrawTest1
【26 | Frameの応用】 << 【ホーム】 >> 【28 | 画像と文字列描画】
↓↓クリックして頂けると励みになります。
