高橋裕樹線の描画 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

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

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

Documents

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

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

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