|
| ShapeTest 基本図形の描画 |
H.Kamifuji . |
- はじめに
直線や四角形など基本的な図形を Java2D を用いて描画する方法について、事例にて説明します。
現在(2021/08)では、JDK-16.0.2 にアップされています。一部、上位互換について、見直しを行っていきます。
現在(2021/11)では、JDK-17.0.1 にアップされています。一部、上位互換について、見直しを行っていきます。
現在(2023/04)では、JDK-20.0.1 にアップされています。一部、上位互換について、見直しを行っていきます。
現在(2024/10)では、JDK-23 にアップされています。一部、上位互換について、見直しを行っていきます。
- 目 次
- draw メソッドと fill メソッド
[ 目次 ]Graphics2Dクラスのオブジェクトを使って図形を描画するには輪郭を描画する方法と塗りつぶしで描画する方法があります。輪郭部分を描画するにはGraphics2Dクラスで用意されている「draw」メソッドを使います。
draw public abstract void draw(Shape s)
現在の Graphics2D コンテキストの設定を使うことにより、Shape の輪郭をストロークで描画します。適用される描画属性には、Clip、Transform、Paint、Composite、および Stroke の各属性があります。
パラメータ:
s - 描画される Shape
引数にはShapeインターフェースを実装したクラスのオブジェクトを指定します。
また塗りつぶして描画するにはGraphics2Dクラスで用意されている「fill」メソッドを使います。
fill public abstract void fill(Shape s)
Graphics2D コンテキストの設定を使うことにより、Shape の内部を塗りつぶします。適用される描画属性には、Clip、Transform、Paint、および Composite の各属性があります。
パラメータ:
s - 塗りつぶされる Shape
引数にはShapeインターフェースを実装したクラスのオブジェクトを指定します。
どちらのメソッドを使う場合にも、Graphics2Dクラスのオブジェクトに設定した色属性(Paint)や線属性(Stroke)が適用されて図形が描画されます。
Shapeインターフェース
「draw」メソッドや「fill」メソッドで描画の対象となるものをShapeインタフェースを実装したクラスのオブジェクトとして指定します。Shapeインターフェースを実装したクラスとしては次のようなものがあります。
Arc2D CubicCurve2D Ellipse2D GeneralPath Line2D Path2D Polygon QuadCurve2D Rectangle2D RoundRectangle2D
具体的な利用方法は次のページ以降で詳しく見ていきますが利用方法は次のような感じとなります。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; g2.draw(new Rectangle2D.Double(70, 50, 110, 120)); g2.fill(new Arc2D.Double(70, 50, 90, 90, 330, 100, Arc2D.PIE)); }
- 直線を描画する(line2D クラス)
[ 目次 ]直線を描画する場合はLine2Dクラスのオブジェクトを使用します。Line2Dクラスはabstractクラスですので実際にはLine2D.Doubleクラス又はLine2D.Floatクラスを使用します。
※Line2Dクラスの詳しい使い方については『Line2Dクラス』を参照して下さい。
Line2Dクラスは始点座標及び終点座標を指定することで直線を作成します。コンストラクタの1つは次の通りです。
Line2D.Double line = new Line2D.Double(始点x座標, 始点y座標, 終点x座標, 終点y座標)
具体的には次のように記述します。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; g2.draw(new Line2D.Double(30.0d, 70.0d, 100.0d, 60.0d)); }※「fill」メソッドの引数にLine2Dクラスのオブジェクトを指定してもエラーとはなりませんが、何も表示されません。
サンプルプログラム
下記のサンプルを実行してみよう。
/** * 直線を描画する(Line2Dクラス) */ import javax.swing.*; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.*; import java.awt.Color; import java.awt.BasicStroke; public class ShapeTest1 extends JPanel{ public static void main(String[] args){ JFrame frame = new JFrame(); ShapeTest1 app = new ShapeTest1(); frame.getContentPane().add(app); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(10, 10, 300, 200); frame.setTitle("タイトル"); frame.setVisible(true); } public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); g2.draw(new Line2D.Double(30.0d, 50.0d, 180.0d, 140.0d)); g2.setPaint(Color.PINK); BasicStroke wideStroke = new BasicStroke(4.0f); g2.setStroke(wideStroke); g2.draw(new Line2D.Double(30.0d, 120.0d, 250.0d, 70.0d)); } }上記をコンパイルした後で実行すると次のように表示されます。
- 長方形を描画する(Rectangle2D クラス)
[ 目次 ]長方形を描画する場合はRectangle2Dクラスのオブジェクトを使用します。Rectangle2Dクラスはabstractクラスですので実際にはRectangle2D.Doubleクラス又はRectangle2D.Floatクラスを使用します。
※Rectangle2Dクラスの詳しい使い方については『Rectangle2Dクラス』を参照して下さい。
Rectangle2Dクラスは左上の座標、及び幅と高さを指定することで長方形の領域を作成します。コンストラクタの1つは次の通りです。
Rectangle2D.Double obj = new Rectangle2D.Double(x座標, y座標, 幅, 高さ)
具体的には次のように記述します。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; g2.draw(new Rectangle2D.Double(30.0d, 70.0d, 100.0d, 60.0d)); g2.fill(new Rectangle2D.Double(50.0d, 50.0d, 170.0d, 90.0d)); }
サンプルプログラム
下記のサンプルを実行してみよう。
/** * 長方形を描画する(Rectangle2Dクラス) */ import javax.swing.*; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.*; import java.awt.Color; import java.awt.BasicStroke; public class ShapeTest2 extends JPanel{ public static void main(String[] args){ JFrame frame = new JFrame(); ShapeTest2 app = new ShapeTest2(); frame.getContentPane().add(app); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(10, 10, 300, 200); frame.setTitle("タイトル"); frame.setVisible(true); } public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); BasicStroke wideStroke = new BasicStroke(4.0f); g2.setStroke(wideStroke); g2.draw(new Rectangle2D.Double(30.0d, 50.0d, 150.0d, 90.0d)); BasicStroke normalStroke = new BasicStroke(1.0f); g2.setStroke(normalStroke); g2.setPaint(Color.PINK); g2.fill(new Rectangle2D.Double(60.0d, 70.0d, 220.0d, 50.0d)); } }上記をコンパイルした後で実行すると次のように表示されます。
- 角丸長方形を描画する(RoundRectangle2D クラス)
[ 目次 ]角丸長方形を描画する場合はRoundRectangle2Dクラスのオブジェクトを使用します。RoundRectangle2Dクラスはabstractクラスですので実際にはRoundRectangle2D.Doubleクラス又はRoundRectangle2D.Floatクラスを使用します。
※RoundRectangle2Dクラスの詳しい使い方については『RoundRectangle2Dクラス』を参照して下さい。
RoundRectangle2Dクラスは左上の座標、及び幅と高さの他に角の丸み具合を指定することで長方形の領域を作成します。コンストラクタの1つは次の通りです。
RoundRectangle2D.Double rec = new RoundRectangle2D.Double(x座標, y座標, 幅, 高さ, 弧の幅, 弧の高さ);
弧の幅と高さとは、長方形の角をどの程度丸くするかを指定するための値です。
具体的には次のように記述します。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; g2.draw(new RoundRectangle2D.Double(30.0d, 70.0d, 100.0d, 60.0d, 3.0d, 3.0d)); g2.fill(new RoundRectangle2D.Double(50.0d, 50.0d, 170.0d, 90.0d, 3.0d, 3.0d)); }
サンプルプログラム
下記のサンプルを実行してみよう。
/** * 角丸長方形を描画する(RoundRectangle2Dクラス) */ import javax.swing.*; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.*; import java.awt.Color; import java.awt.BasicStroke; public class ShapeTest3 extends JPanel{ public static void main(String[] args){ JFrame frame = new JFrame(); ShapeTest3 app = new ShapeTest3(); frame.getContentPane().add(app); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(10, 10, 300, 200); frame.setTitle("タイトル"); frame.setVisible(true); } public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); BasicStroke wideStroke = new BasicStroke(4.0f); g2.setStroke(wideStroke); RoundRectangle2D.Double rec1 = new RoundRectangle2D.Double(30.0d, 50.0d, 150.0d, 90.0d, 10.0d, 10.0d); g2.draw(rec1); BasicStroke normalStroke = new BasicStroke(1.0f); g2.setStroke(normalStroke); g2.setPaint(Color.PINK); RoundRectangle2D.Double rec2 = new RoundRectangle2D.Double(60.0d, 70.0d, 220.0d, 50.0d, 40.0d, 40.0d); g2.fill(rec2); } }上記をコンパイルした後で実行すると次のように表示されます。
- 楕円を描画する(Ellipse2D クラス)
[ 目次 ]楕円を描画する場合はEllipse2Dクラスのオブジェクトを使用します。Ellipse2Dクラスはabstractクラスですので実際にはEllipse2D.Doubleクラス又はEllipse2D.Floatクラスを使用します。
※Ellipse2Dクラスの詳しい使い方については『Ellipse2Dクラス』を参照して下さい。
Ellipse2Dクラスは左上の座標及び幅と高さから長方形の領域を作成しその領域に内接する楕円を作成します。コンストラクタの1つは次の通りです。
Ellipse2D.Double ellipse = new Ellipse2D.Double(x座標, y座標, 幅, 高さ);
具体的には次のように記述します。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; g2.draw(new Ellipse2D.Double(10.0d, 10.0d, 80.0d, 60.0d)); g2.fill(new Ellipse2D.Double(30.0d, 30.0d, 120.0d, 90.0d)); }
サンプルプログラム
下記のサンプルを実行してみよう。
/** * 楕円を描画する(Ellipse2Dクラス) */ import javax.swing.*; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.*; import java.awt.Color; import java.awt.BasicStroke; public class ShapeTest4 extends JPanel{ public static void main(String[] args){ JFrame frame = new JFrame(); ShapeTest4 app = new ShapeTest4(); frame.getContentPane().add(app); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(10, 10, 300, 200); frame.setTitle("タイトル"); frame.setVisible(true); } public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); BasicStroke wideStroke = new BasicStroke(4.0f); g2.setStroke(wideStroke); Ellipse2D.Double rec1 = new Ellipse2D.Double(30.0d, 30.0d, 120.0d, 120.0d); g2.draw(rec1); BasicStroke normalStroke = new BasicStroke(1.0f); g2.setStroke(normalStroke); g2.setPaint(Color.PINK); Ellipse2D.Double rec2 = new Ellipse2D.Double(60.0d, 70.0d, 220.0d, 50.0d); g2.fill(rec2); } }上記をコンパイルした後で実行すると次のように表示されます。
- 円弧を描画する(Arc2D クラス)
[ 目次 ]円弧を描画する場合はArc2Dクラスのオブジェクトを使用します。Arc2Dクラスはabstractクラスですので実際にはArc2D.Doubleクラス又はArc2D.Floatクラスを使用します。
※Arc2Dクラスの詳しい使い方については『Arc2Dクラス』を参照して下さい。
Arc2Dクラスは左上の座標及び幅と高さから長方形の領域を作成しその領域に内接する楕円を作成します。そしてその楕円に対して開始角度と使用角度を設定し円弧を作成します。円弧の線の閉じ方として3つのスタイルがあります。コンストラクタの1つは次の通りです。
Arc2D.Double ellipse = new Arc2D.Double(x座標, y座標, 幅, 高さ, 開始角度, 使用角度, タイプ);
具体的には次のように記述します。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; Arc2D.Double arc1 = new Arc2D.Double(10.0d, 10.0d, 80.0d, 60.0d, 45.0d, 45.0d, Arc2D.CHORD); g2.draw(arc1); Arc2D.Double arc2 = new Arc2D.Double(30.0d, 30.0d, 120.0d, 90.0d, 45.0d, 45.0d, Arc2D.OPEN); g2.fill(arc2); }
サンプルプログラム
下記のサンプルを実行してみよう。
/** * 円弧を描画する(Arc2Dクラス) */ import javax.swing.*; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.*; import java.awt.Color; import java.awt.BasicStroke; public class ShapeTest5 extends JPanel{ public static void main(String[] args){ JFrame frame = new JFrame(); ShapeTest5 app = new ShapeTest5(); frame.getContentPane().add(app); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(10, 10, 300, 200); frame.setTitle("タイトル"); frame.setVisible(true); } public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); BasicStroke wideStroke = new BasicStroke(4.0f); g2.setStroke(wideStroke); Arc2D.Double rec1 = new Arc2D.Double(30.0d, 30.0d, 120.0d, 120.0d, 45.0f, 90.0d, Arc2D.OPEN); g2.draw(rec1); BasicStroke normalStroke = new BasicStroke(1.0f); g2.setStroke(normalStroke); g2.setPaint(Color.PINK); Arc2D.Double rec2 = new Arc2D.Double(120.0d, 30.0d, 140.0d, 100.0d, 180.0d, 310.0d, Arc2D.PIE); g2.fill(rec2); } }上記をコンパイルした後で実行すると次のように表示されます。
- 2次元ベジエ曲線を描画する(QuadCurve2D クラス)
[ 目次 ]2次元ベジエ曲線を描画する場合はQuadCurve2Dクラスのオブジェクトを使用します。QuadCurve2Dクラスはabstractクラスですので実際にはQuadCurve2D.Doubleクラス又はQuadCurve2D.Floatクラスを使用します。
※QuadCurve2Dクラスの詳しい使い方については『QuadCurve2Dクラス』を参照して下さい。
QuadCurve2Dクラスは始点、終点、制御点を設定し2次元ベジエ曲線を作成します。コンストラクタの1つは次の通りです。
QuadCurve2D.curve ellipse = new QuadCurve2D.Double(始点x座標, 始点y座標, 制御点x座標, 制御点y座標, 終点x座標, 終点y座標);具体的には次のように記述します。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; QuadCurve2D.Double curve1 = new QuadCurve2D.Double(60.0d, 20.0d, 40.0d, 140.0d, 220.0d, 120.0d); g2.draw(curve1); QuadCurve2D.Double curve2 = new QuadCurve2D.Double(60.0d, 40.0d, 220.0d, 30.0d, 120.0d, 140.0d); g2.fill(curve2); }
サンプルプログラム
下記のサンプルを実行してみよう。
/** * 2次元ベジエ曲線を描画する(QuadCurve2Dクラス) */ import javax.swing.*; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.*; import java.awt.Color; import java.awt.BasicStroke; public class ShapeTest6 extends JPanel{ public static void main(String[] args){ JFrame frame = new JFrame(); ShapeTest6 app = new ShapeTest6(); frame.getContentPane().add(app); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(10, 10, 300, 200); frame.setTitle("タイトル"); frame.setVisible(true); } public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); BasicStroke wideStroke = new BasicStroke(4.0f); g2.setStroke(wideStroke); QuadCurve2D.Double curve1 = new QuadCurve2D.Double(60.0d, 20.0d, 40.0d, 140.0d, 220.0d, 120.0d); g2.draw(curve1); BasicStroke normalStroke = new BasicStroke(1.0f); g2.setStroke(normalStroke); g2.setPaint(Color.PINK); QuadCurve2D.Double curve2 = new QuadCurve2D.Double(80.0d, 60.0d, 250.0d, 50.0d, 150.0d, 160.0d); g2.fill(curve2); } }上記をコンパイルした後で実行すると次のように表示されます。
- 3次元ベジエ曲線を描画する(CubicCurve2D クラス)
[ 目次 ]3次元ベジエ曲線を描画する場合はCubicCurve2Dクラスのオブジェクトを使用します。CubicCurve2Dクラスはabstractクラスですので実際にはCubicCurve2D.Doubleクラス又はCubicCurve2D.Floatクラスを使用します。
※CubicCurve2Dクラスの詳しい使い方については『CubicCurve2Dクラス』を参照して下さい。
CubicCurve2Dクラスは始点、終点、そして2つの制御点を設定し三次元ベジエ曲線を作成します。コンストラクタの1つは次の通りです。
CubicCurve2D.Double ellipse = new CubicCurve2D.Double(始点x座標, 始点y座標, 制御点1x座標, 制御点1y座標, 制御点2x座標, 制御点2y座標, 終点x座標, 終点y座標);具体的には次のように記述します。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; CubicCurve2D.Double curve1 = new CubicCurve2D.Double(60.0d, 20.0d, 40.0d, 140.0d, 200.0d, 30.0d, 220.0d, 120.0d); g2.draw(curve1); CubicCurve2D.Double curve2 = new CubicCurve2D.Double(60.0d, 20.0d, 220.0d, 30.0d, 20.0d, 150.0d, 220.0d, 120.0d); g2.fill(curve2); }
サンプルプログラム
下記のサンプルを実行してみよう。
/** * 3次元ベジエ曲線を描画する(CubicCurve2Dクラス) */ import javax.swing.*; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.*; import java.awt.Color; import java.awt.BasicStroke; public class ShapeTest7 extends JPanel{ public static void main(String[] args){ JFrame frame = new JFrame(); ShapeTest7 app = new ShapeTest7(); frame.getContentPane().add(app); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(10, 10, 300, 200); frame.setTitle("タイトル"); frame.setVisible(true); } public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); BasicStroke wideStroke = new BasicStroke(4.0f); g2.setStroke(wideStroke); CubicCurve2D.Double curve1 = new CubicCurve2D.Double(40.0d, 20.0d, 30.0d, 140.0d, 180.0d, 30.0d, 190.0d, 150.0d); g2.draw(curve1); BasicStroke normalStroke = new BasicStroke(1.0f); g2.setStroke(normalStroke); g2.setPaint(Color.PINK); CubicCurve2D.Double curve2 = new CubicCurve2D.Double(80.0d, 20.0d, 240.0d, 30.0d, 40.0d, 150.0d, 250.0d, 120.0d); g2.fill(curve2); } }上記をコンパイルした後で実行すると次のように表示されます。
- 多角形を描画する(Polygon クラス)
[ 目次 ]多角形をを描画する場合はPolygonクラスのオブジェクトを使用します。
※Polygonクラスの詳しい使い方については『Polygonクラス』を参照して下さい。
Polygonクラスは指定した頂点の数からなる多角形を作成します。コンストラクタの1つは次の通りです。
Polygon polygon = new Polygon(頂点のx座標の配列, 頂点のy座標の配列, 頂点数);
具体的には次のように記述します。
public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D)g; int[] xpoints1 = {80, 30, 170}; int[] ypoints1 = {20, 120, 190}; Polygon polygon1 = new Polygon(xpoints1, ypoints1, xpoints1.length); g2.draw(polygon1); int[] xpoints2 = {30, 150, 170, 120, 30}; int[] ypoints2 = {20, 40, 140, 110, 80}; Polygon polygon2 = new Polygon(xpoints2, ypoints2, xpoints2.length); g2.fill(polygon2); }
サンプルプログラム
下記のサンプルを実行してみよう。
/** * 多角形を描画する(Polygonクラス) */ import javax.swing.*; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.*; import java.awt.Color; import java.awt.BasicStroke; import java.awt.Polygon; public class ShapeTest8 extends JPanel{ public static void main(String[] args){ JFrame frame = new JFrame(); ShapeTest8 app = new ShapeTest8(); frame.getContentPane().add(app); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(10, 10, 300, 200); frame.setTitle("タイトル"); frame.setVisible(true); } public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D)g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); BasicStroke wideStroke = new BasicStroke(4.0f); g2.setStroke(wideStroke); int[] xpoints1 = {140, 50, 230}; int[] ypoints1 = {20, 150, 100}; Polygon polygon1 = new Polygon(xpoints1, ypoints1, xpoints1.length); g2.draw(polygon1); BasicStroke normalStroke = new BasicStroke(1.0f); g2.setStroke(normalStroke); g2.setPaint(Color.PINK); int[] xpoints2 = {30, 150, 200, 90, 30}; int[] ypoints2 = {20, 40, 140, 130, 80}; Polygon polygon2 = new Polygon(xpoints2, ypoints2, xpoints2.length); g2.fill(polygon2); } }上記をコンパイルした後で実行すると次のように表示されます。
- リリースノート
[ 目次 ]- 2024/10/14 Ver=2.04 JDK_23 で確認
- 2023/04/23 Ver=2.03 JDK_20 で確認
- 2021/12/03 Ver=1.04 JDK_17 で確認
- 2021/08/07 Ver=1.03 JDK_16 で確認
- 2020/10/23 Ver=1.02 JDK_15 で確認
- 2016/12/13 Ver=1.01 初版リリース
- 関連ページ
[ 目次 ]