高橋裕樹線の描画 java 演習 (3) 図の描画グラ...

Java 演習 (3)– グラフィックス

描画 –

高橋裕樹

線の描画

図の描画

Java演習 (3)– グラフィックス描画 –

高橋裕樹


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

drawLineメソッド

例題

縦 300画素，横 400画素の描画領域を用意し，(0, 100)と (399, 100)，(0, 200)と (399, 200)を結ぶ直線を描画せよ．

線を描画するプログラム (Line1.java)

import javax.swing.JApplet;import java.awt.Graphics;

public class Line1 extends JApplet {public void paint(Graphics g) {

g.drawLine(0, 100, 399, 100);g.drawLine(0, 200, 399, 200);

}}


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

drawLineメソッド

drawLine

drawLine(int x1, int y1, int x2, int y2)

点 (x1, y1)と点 (x2, y2)を結ぶ直線

線を描画するプログラム (Line1.java)

import javax.swing.JApplet;import java.awt.Graphics;


g.drawLine(0, 100, 399, 100);g.drawLine(0, 200, 399, 200);

}}


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

例

点 (10, 10)と点 (40, 30)を結ぶ直線

O

50

40

30

20

10

10 20 30 40 50x

y


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

直線の描画

練習

次の 4本の直線を描画するプログラムを作成せよ．1 点 (0, 130)と点 (399, 130)

2 点 (0, 160)と点 (399, 160)

3 点 (100, 0)と点 (100, 299)

4 点 (130, 0)と点 (130, 299)

ただし，描画領域は，縦 300画素，横 400画素とする．


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

色の設定

例題

縦 300画素，横 400画素の描画領域を用意し，(0, 100)と (399, 100)を結ぶ赤い直線，(0, 200)と (399, 200)を結ぶ青い直線を描画せよ．

setColorメソッド

java.awtパッケージの GraphicsクラスsetColor(Color c)

色名java.awt パッケージの Colorクラス

Colorクラスで定義されている色の例

赤 Color.red 青 Color.blue

緑 Color.green 黄 Color.yellow

黒 Color.black 白 Color.white

ピンク Color.pink 紫 Color.magenta


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

色の設定

色付き線を描画するプログラム (1)(Line2.java)

import javax.swing.JApplet;import java.awt.Graphics;import java.awt.Color;


g.setColor(Color.red);g.drawLine(0, 100, 399, 100);

g.setColor(Color.blue); 10

g.drawLine(0, 200, 399, 200);}

}


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

直線の描画

練習

次の 4本の直線を描画するプログラムを作成せよ．1 点 (0, 130)と点 (399, 130) 紫2 点 (0, 160)と点 (399, 160) ピンク3 点 (100, 0)と点 (100, 299) 赤4 点 (130, 0)と点 (130, 299) 黒

ただし，描画領域は，縦 300画素，横 400画素とする．


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

色の定義

新しい色の定義

Color 色名 = new Color(R値，G値，B値);

0.0から 1.0の小数値で指定Color((float)1.0, (float)0.3, (float)0.5)

0から 255の整数値で指定Color(0, 255, 128)

参考: Web Safe Color ... 検索してみよう!!


描画 –

高橋裕樹

線の描画

直線描画

色の指定

色の定義

図の描画

色の定義

色付き線を描画するプログラム (2)(Line3.java)



Color r = new Color((float)1.0, (float).0, (float).0);Color b = new Color(0, 0, 255);

g.setColor(r); 10

g.drawLine(0, 100, 399, 100);

g.setColor(b);g.drawLine(0, 200, 399, 200);

}}


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

矩形描画

例題

縦 300画素，横 400画素の描画領域を用意し，オーストリア国旗を描画せよ．

矩形描画

矩形の描画drawRect(int x, int y, int w, int h)

矩形の塗りつぶしfillRect(int x, int y, int w, int h)

左上頂点 (x , y)，幅 w，高さ h


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

オーストリア国旗

オーストリア国旗を描画するプログラム (Austria.java)


public class Austria extends JApplet {public void paint(Graphics g) {

g.setColor(Color.white);g.fillRect(0, 0, 400, 300);

g.setColor(Color.red); 10

g.fillRect(0, 0, 400, 100);g.fillRect(0, 200, 400, 100);

g.setColor(Color.black);g.drawRect(0, 0, 399, 299);

}}


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

drawRectと fillRect

1 drawRect(0, 0, 10, 15)

2 fillRect(0, 0, 10, 15)

O

20

10

10 20x

y


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

矩形描画

練習

縦 300画素，横 400画素の描画領域を用意し，フランス国旗を描画せよ．


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

円描画

例題

縦 300画素，横 400画素の描画領域を用意し，日本国旗を描画せよ．

円描画

円，楕円，扇型の描画drawArc(int x, int y, int w, int h, int theta, int

phi)

円，楕円，扇型の塗りつぶしfillArc(int x, int y, int w, int h, int theta, int

phi)

左上頂点 (x , y)，幅 w，高さ h，開始角度 θ，終了角度 φ


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

円描画

(x , y)

θφ

w

h


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

日本国旗

日本国旗を描画するプログラム (Japan.java)


public class Japan extends JApplet {public void paint(Graphics g) {

g.setColor(Color.white);g.fillRect(0, 0, 400, 300);

g.setColor(Color.red); 10

g.fillArc(100, 50, 200, 200, 0, 360);

g.setColor(Color.black);g.drawRect(0, 0, 399, 299);

}}


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

円描画

練習

縦 300画素，横 400画素の描画領域を用意し，ラオス国旗を描画せよ．


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

多角形描画

例題

縦 300画素，横 400画素の描画領域を用意し，コンゴ国旗を描画せよ．

多角形描画

多角形の描画drawPolygon(Polygon p)

多角形の塗りつぶしfillPolygon(Polygon p)

Polygon: 多角形の頂点列を持つインスタンス


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

コンゴ国旗

import javax.swing.JApplet;import java.awt.Graphics;import java.awt.Color;import java.awt.Polygon;

public class CongoTex extends JApplet {public void paint(Graphics g) {

Color darkGreen = new Color(0, 100, 0);Color darkRed = new Color(139, 0, 0);Polygon p1 = new Polygon(), p2 = new Polygon(); 10

g.setColor(Color.yellow); g.fillRect(0, 0, 400, 300);

p1.addPoint(0, 0); p1.addPoint(299, 0); p1.addPoint(0, 299);g.setColor(darkGreen); g.fillPolygon(p1);

p2.addPoint(399, 0); p2.addPoint(399, 299); p2.addPoint(99, 299);g.setColor(darkRed); g.fillPolygon(p2);

g.setColor(Color.black); g.drawRect(0, 0, 399, 299); 20

}}


描画 –

高橋裕樹

線の描画

図の描画

矩形描画

円描画

多角形描画

★形描画

練習

縦 300画素，横 400画素の描画領域を用意し，★型図形を好きな色で塗りつぶしなさい．(頂点の座標はお任せします．)

O

500

400

300

200

100

100 200 300 400 500x

y

高橋裕樹 線の描画 java 演習 (3) 図の描画 グラ...

Documents

高橋裕樹線の描画 java 演習 (3) 図の描画グラ...