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

Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
Java 演習 (3)
– グラフィックス描画 –
高橋 裕樹
図の描画
drawLine メソッド
例題
縦 300 画素，横 400 画素の描画領域を用意し，(0, 100) と (399, 100)，
(0, 200) と (399, 200) を結ぶ直線を描画せよ．
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
直線描画
色の指定
色の定義
線を描画するプログラム (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 ) を結ぶ直線
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
直線描画
色の指定
色の定義
線を描画するプログラム (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);
}
}
図の描画
例
Java 演習 (3)
– グラフィックス
描画 –
点 (10, 10) と点 (40, 30) を結ぶ直線
高橋 裕樹
O
10
20
30
40
50
x
線の描画
直線描画
色の指定
色の定義
図の描画
10
20
30
40
50
y
例
Java 演習 (3)
– グラフィックス
描画 –
点 (10, 10) と点 (40, 30) を結ぶ直線
高橋 裕樹
O
10
20
30
40
50
x
線の描画
直線描画
色の指定
色の定義
図の描画
10
20
30
40
50
y
例
Java 演習 (3)
– グラフィックス
描画 –
点 (10, 10) と点 (40, 30) を結ぶ直線
高橋 裕樹
O
10
20
30
40
50
x
線の描画
直線描画
色の指定
色の定義
図の描画
10
20
30
40
50
y
例
Java 演習 (3)
– グラフィックス
描画 –
点 (10, 10) と点 (40, 30) を結ぶ直線
高橋 裕樹
O
10
20
30
40
50
x
線の描画
直線描画
色の指定
色の定義
図の描画
10
20
30
40
50
y
直線の描画
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
練習
直線描画
色の指定
次の 4 本の直線を描画するプログラムを作成せよ．
1
点 (0, 130) と点 (399, 130)
2
点 (0, 160) と点 (399, 160)
3
点 (100, 0) と点 (100, 299)
4
点 (130, 0) と点 (130, 299)
ただし，描画領域は，縦 300 画素，横 400 画素とする．
色の定義
図の描画
色の設定
Java 演習 (3)
– グラフィックス
描画 –
例題
縦 300 画素，横 400 画素の描画領域を用意し，(0, 100) と (399, 100)
を結ぶ赤い直線，(0, 200) と (399, 200) を結ぶ青い直線を描画せよ．
高橋 裕樹
線の描画
直線描画
色の指定
setColor メソッド
色の定義
java.awt パッケージの Graphics クラス
setColor(Color c)
色名
java.awt パッケージの Color クラス
Color クラスで定義されている色の例
赤
緑
黒
ピンク
Color.red
Color.green
Color.black
Color.pink
青
黄
白
紫
Color.blue
Color.yellow
Color.white
Color.magenta
図の描画
色の設定
Java 演習 (3)
– グラフィックス
描画 –
色付き線を描画するプログラム (1)(Line2.java)
高橋 裕樹
線の描画
import javax.swing.JApplet;
import java.awt.Graphics;
import java.awt.Color;
直線描画
色の指定
色の定義
図の描画
public class Line2 extends JApplet {
public void paint(Graphics g) {
g.setColor(Color.red);
g.drawLine(0, 100, 399, 100);
g.setColor(Color.blue);
g.drawLine(0, 200, 399, 200);
}
}
10
直線の描画
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
練習
直線描画
色の指定
次の 4 本の直線を描画するプログラムを作成せよ．
1
点 (0, 130) と点 (399, 130) 紫
2
点 (0, 160) と点 (399, 160) ピンク
3
点 (100, 0) と点 (100, 299) 赤
4
点 (130, 0) と点 (130, 299) 黒
ただし，描画領域は，縦 300 画素，横 400 画素とする．
色の定義
図の描画
色の定義
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
新しい色の定義
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 ... 検索してみよう!!
直線描画
色の指定
色の定義
図の描画
色の定義
Java 演習 (3)
– グラフィックス
描画 –
色付き線を描画するプログラム (2)(Line3.java)
高橋 裕樹
import javax.swing.JApplet;
import java.awt.Graphics;
import java.awt.Color;
線の描画
直線描画
色の指定
色の定義
図の描画
public class Line3 extends JApplet {
public void paint(Graphics g) {
Color r = new Color((float)1.0, (float).0, (float).0);
Color b = new Color(0, 0, 255);
g.setColor(r);
g.drawLine(0, 100, 399, 100);
g.setColor(b);
g.drawLine(0, 200, 399, 200);
}
}
10
矩形描画
Java 演習 (3)
– グラフィックス
描画 –
例題
高橋 裕樹
縦 300 画素，横 400 画素の描画領域を用意し，オーストリア国旗を
描画せよ．
線の描画
図の描画
矩形描画
円描画
多角形描画
矩形描画
矩形の描画
drawRect(int x, int y, int w, int h)
矩形の塗りつぶし
fillRect(int x, int y, int w, int h)
左上頂点 (x, y )，幅 w ，高さ h
オーストリア国旗
Java 演習 (3)
– グラフィックス
描画 –
オーストリア国旗を描画するプログラム (Austria.java)
高橋 裕樹
import javax.swing.JApplet;
import java.awt.Graphics;
import java.awt.Color;
線の描画
図の描画
矩形描画
円描画
public class Austria extends JApplet {
public void paint(Graphics g) {
g.setColor(Color.white);
g.fillRect(0, 0, 400, 300);
g.setColor(Color.red);
g.fillRect(0, 0, 400, 100);
g.fillRect(0, 200, 400, 100);
g.setColor(Color.black);
g.drawRect(0, 0, 399, 299);
}
}
多角形描画
10
drawRect と fillRect
1
2
Java 演習 (3)
– グラフィックス
描画 –
drawRect(0, 0, 10, 15)
fillRect(0, 0, 10, 15)
高橋 裕樹
線の描画
O
10
20
図の描画
x
矩形描画
円描画
多角形描画
10
20
y
drawRect と fillRect
1
2
Java 演習 (3)
– グラフィックス
描画 –
drawRect(0, 0, 10, 15)
fillRect(0, 0, 10, 15)
高橋 裕樹
線の描画
O
10
20
図の描画
x
矩形描画
円描画
多角形描画
10
20
y
drawRect と fillRect
1
2
Java 演習 (3)
– グラフィックス
描画 –
drawRect(0, 0, 10, 15)
fillRect(0, 0, 10, 15)
高橋 裕樹
線の描画
O
10
20
図の描画
x
矩形描画
円描画
多角形描画
10
20
y
矩形描画
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
練習
図の描画
矩形描画
円描画
縦 300 画素，横 400 画素の描画領域を用意し，フランス国旗を描画
せよ．
多角形描画
円描画
Java 演習 (3)
– グラフィックス
描画 –
例題
縦 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，開始角度 θ，終了角度 φ
円描画
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
(x, y )
線の描画
図の描画
矩形描画
円描画
多角形描画
φ
θ
w
h
日本国旗
Java 演習 (3)
– グラフィックス
描画 –
日本国旗を描画するプログラム (Japan.java)
高橋 裕樹
import javax.swing.JApplet;
import java.awt.Graphics;
import java.awt.Color;
線の描画
図の描画
矩形描画
円描画
public class Japan extends JApplet {
public void paint(Graphics g) {
g.setColor(Color.white);
g.fillRect(0, 0, 400, 300);
g.setColor(Color.red);
g.fillArc(100, 50, 200, 200, 0, 360);
g.setColor(Color.black);
g.drawRect(0, 0, 399, 299);
}
}
多角形描画
10
円描画
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
練習
図の描画
矩形描画
円描画
縦 300 画素，横 400 画素の描画領域を用意し，ラオス国旗を描画せ
よ．
多角形描画
多角形描画
Java 演習 (3)
– グラフィックス
描画 –
例題
高橋 裕樹
縦 300 画素，横 400 画素の描画領域を用意し，コンゴ国旗を描画せ
よ．
線の描画
図の描画
矩形描画
円描画
多角形描画
多角形描画
多角形の描画
drawPolygon(Polygon p)
多角形の塗りつぶし
fillPolygon(Polygon p)
Polygon: 多角形の頂点列を持つインスタンス
コンゴ国旗
import
import
import
import
javax.swing.JApplet;
java.awt.Graphics;
java.awt.Color;
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();
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
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 画素の描画領域を用意し，★型図形を好きな色
で塗りつぶしなさい．(頂点の座標はお任せします．)
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
O
100
200
300
400
500
x
図の描画
矩形描画
円描画
多角形描画
100
200
300
400
500
y
★形描画
練習
縦 300 画素，横 400 画素の描画領域を用意し，★型図形を好きな色
で塗りつぶしなさい．(頂点の座標はお任せします．)
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
O
100
200
300
400
500
x
図の描画
矩形描画
円描画
多角形描画
100
200
300
400
500
y
★形描画
練習
縦 300 画素，横 400 画素の描画領域を用意し，★型図形を好きな色
で塗りつぶしなさい．(頂点の座標はお任せします．)
Java 演習 (3)
– グラフィックス
描画 –
高橋 裕樹
線の描画
O
100
200
300
400
500
x
図の描画
矩形描画
円描画
多角形描画
100
200
300
400
500
y