高橋裕樹 線の描画 java 演習 (3) 図の描画 グラ...
TRANSCRIPT
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);
}}
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
直線描画
色の指定
色の定義
図の描画
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;
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
50
40
30
20
10
10 20 30 40 50x
y
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
直線描画
色の指定
色の定義
図の描画
例
点 (10, 10)と点 (40, 30)を結ぶ直線
O
50
40
30
20
10
10 20 30 40 50x
y
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
直線描画
色の指定
色の定義
図の描画
例
点 (10, 10)と点 (40, 30)を結ぶ直線
O
50
40
30
20
10
10 20 30 40 50x
y
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
直線描画
色の指定
色の定義
図の描画
例
点 (10, 10)と点 (40, 30)を結ぶ直線
O
50
40
30
20
10
10 20 30 40 50x
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.blue
緑 Color.green 黄 Color.yellow
黒 Color.black 白 Color.white
ピンク Color.pink 紫 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); 10
g.drawLine(0, 200, 399, 200);}
}
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); 10
g.drawLine(0, 100, 399, 100);
g.setColor(b);g.drawLine(0, 200, 399, 200);
}}
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); 10
g.fillRect(0, 0, 400, 100);g.fillRect(0, 200, 400, 100);
g.setColor(Color.black);g.drawRect(0, 0, 399, 299);
}}
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
drawRectと fillRect
1 drawRect(0, 0, 10, 15)
2 fillRect(0, 0, 10, 15)
O
20
10
10 20x
y
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
drawRectと fillRect
1 drawRect(0, 0, 10, 15)
2 fillRect(0, 0, 10, 15)
O
20
10
10 20x
y
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
drawRectと fillRect
1 drawRect(0, 0, 10, 15)
2 fillRect(0, 0, 10, 15)
O
20
10
10 20x
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)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
日本国旗
日本国旗を描画するプログラム (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); 10
g.fillArc(100, 50, 200, 200, 0, 360);
g.setColor(Color.black);g.drawRect(0, 0, 399, 299);
}}
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
円描画
練習
縦 300画素,横 400画素の描画領域を用意し,ラオス国旗を描画せよ.
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
多角形描画
例題
縦 300画素,横 400画素の描画領域を用意し,コンゴ国旗を描画せよ.
多角形描画
多角形の描画drawPolygon(Polygon p)
多角形の塗りつぶしfillPolygon(Polygon p)
Polygon: 多角形の頂点列を持つインスタンス
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
コンゴ国旗
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
}}
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
★形描画
練習
縦 300画素,横 400画素の描画領域を用意し,★型図形を好きな色で塗りつぶしなさい.(頂点の座標はお任せします.)
O
500
400
300
200
100
100 200 300 400 500x
y
Java 演習 (3)– グラフィックス
描画 –
高橋 裕樹
線の描画
図の描画
矩形描画
円描画
多角形描画
★形描画
練習
縦 300画素,横 400画素の描画領域を用意し,★型図形を好きな色で塗りつぶしなさい.(頂点の座標はお任せします.)
O
500
400
300
200
100
100 200 300 400 500x
y