グラフィックスと画像の操作 Graphics and Image Manipulation ｓ java.awt パッケージ graphics クラスとオブジェクトカラー制御フォント制御図形の描画メソッド

グラフィックスと画像の操作Graphics and Image Manipulation ｓ

• java.awt パッケージ • graphics クラスとオブジェクト• カラー制御• フォント制御• 図形の描画メソッド• 画像の操作　

• java.awt パッケージ • graphics クラスとオブジェクト• カラー制御• フォント制御• 図形の描画メソッド• 画像の操作　

java.awt パッケージjava.awt package

FontMetrics

ComponentPolygonFont

ToolkitColor

Object

Graphics

A portion of the java.awt class hierarchy

•　もじや図形はｘ座標とｙ座標を指定することによって画面に表示されます。•　座標の単位はピクセル（ pixel ）です。•　ピクセルとはディスプレイモニタの最も小さい表示単位（ dot ）のことです。

(x,y)

(0,0)

X axis

Y axis

+x

+y

Java coordinate system

Graphics クラスとオブジェクトGraphics class and objects

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Color;

import java.awt.Font;

public class Test extends Applet {

private int red, green, blue;

public void init() { // set some values

red = 100; blue = 255; green = 125;

}

public void paint ( Graphics g ) {

g.setColor( new Color( red, green, blue ) );

g.setFont( new Font("Serif", Font.BOLD, 12) );

g.drawString( "ABCDEFGHIJKLMN", 50, 33 );

showStatus( "Current RGB: " + g.getColor() );

}

}

Graphics オブジェクト

Graphics class パッケージ

抽象 class

Color class パッケージ

Component メソッド pa

int()

Graphics メソッド

Graphics オブジェクト

•画面への描画の制御

•文字や図形の描画

g.drawString()

•フォント操作

g.setColor()

•カラー操作

g.setFont()

カラー操作

メソッド

フォント操作

メソッド

文字の描画メソッド

Graphics クラス

•抽象 Graphics クラス

　 abstract Graphics class

•導出した具象 Graphics クラス

derived graphics class

•共通のインタフェースの提供

•paint() の引数として渡される

　 Graphics オブジェクト

•repaint()->update()->paint()

（ Component メソッド）

カラー制御Color control

Color constants RGB

public final static Color red 255,0,0

public final static Color green 0, 255,0

public final static Color blue 0,0,255

public final static Color black 0,0,0

public final static Color white 255,255,255

……

Color constructors and methods　 public Color(int r, int g, int b)

　 public Color(float r, float g, float b)

　 public int getRed()

　 public int getBlue()

　 public int getGreen()

　 public abstract Color getColor()

　 public abstract void setColor(Color c)




public class ShowColors extends Applet {

private int red_i, green_i, blue_i;

private float red_f, green_f, blue_f;

private Color c1;

public void init()

{ red_i = 100; blue_i = 255; green_i = 125;

c1 = new Color(red_i, green_i, blue_i);

red_f = 0.1f; blue_f = 0.21f; green_f = 0.33f;

}

public void paint ( Graphics g )

{ g.setColor( c1 );

g.drawString( " Welcome to Hosei University!", 50, 50);

g.setColor(new Color(red_f, green_f, blue_f));

g.drawString( " Study hard in Hosei University!", 50, 75);

showStatus( "Current RGB: " + g.getColor() +

" RGB values of c1: " + c1.getRed() +c1.getGreen() +c1.getBlue());

}

}

int 型実引数

float 型実引数

set Color

get Color object

get Color values

Graphics class methods

Color class methods

Color class パッケージ

結果L31

フォント制御Font control

Font constants

public final static int PLAIN

public final static int BOLD

public final static int ITALIC

Color constructor and methods　 public Font(String s, int style, int size)

　 public abstract void setFont(Font f)

　 public int getStyle()

　 public int getSize()

　 public String getName()

　 public String getFamily()

　 public boolean isPlain()

public boolean isBold ()

public boolean isItalic()



import java.awt.Font;

public class DemoFont extends Applet {

private Font font1, font2, f;

String s;

public void init()

{ font1 = new Font( "Serif", Font.BOLD, 12 );

font2 = new Font( "Monospaced", Font.ITALIC, 24 );

f = new Font( "SansSerif", Font.BOLD+Font.ITALIC, 14 );

}

public void paint( Graphics g )

{ g.setFont( font1 );

g.drawString( "Serif 12 point bold.", 20, 20 );

g.setFont( font2 );

g.drawString( "Monospaced 24 point italic.", 20, 40 );

g.setFont( f );

if (f.isBold() == true) s = " is bold. ";

else s = " is not bold. ";

g.drawString("f " +s+ "Font family is " + f.getFamily() , 20, 60 );

}

}

int 型実引数

float 型実引数

set Color

Graphics class methods

Font class methods

Font class パッケージ

結果L32

図形の描画メソッド　 drawing methods

Graphics methods　 public abstract void drawLine(

int x1, int y1, int x2, y2)

　 public abstract void drawRect(

int x, int y, int width, int height)

　 public abstract void fillRect(


public abstract void clearRect(


public abstract void drawOval(


public abstract void fillOval(


　 public abstract void drawArc(

int x, int y, int width, int height,

int startAngle, int arcAngle)

　 public abstract void fillArc(

int x, int y, int width, int height,

int startAngle, int arcAngle)



Import.java.awt.Color;

public class DemoShape extends Applet {


{ g.drawLine(10, 10, 230, 95);

g.drawRect(10, 100, 100, 100);

g.fillRect(150, 100, 100, 100);

g.drawOval(10, 210, 100, 70);

g.setColor(new Color(255, 0, 0));

g.fillOval(160, 210, 70, 100);


g.drawArc(10, 320, 120, 100, 0, 360);


g.fillArc(150, 320, 100, 120, 180, -90);

}

直線の描画メソッド

結果L33

矩形の描画メソッド

楕円の描画メソッド

円弧の描画メソッド

Graphics class パッケージ

多角形の描画メソッド Polygon drawing methods

Polygons constructors and methods　 public Polygon()

public Polygon(

int xValues[], int yValues[],

int numberOfPoints)

　 public abstract void drawPolygon(

int xPoint[], int yPoint[], int width, int points)

　 public abstract void drawPolyline(


public drawPolygon(Polygon p)

　 public abstract void fillPolygon(


public fillPolygon(Polygon p)



import java.awt.Polygon;


public class PolygonTest extends Applet {

private int xValues1[] = { 20, 40, 50, 30, 20, 15, 20 };

private int yValues1[] = { 20, 20, 30, 50, 50, 30, 20 };

　 private int xValues2[] = { 40, 60, 70, 60, 40, 35, 40 };

private int yValues2[] = { 20, 20, 30, 50, 50, 30, 20 };

private Polygon p2;


{ p2 = new Polygon( xValues2, yValues2, 7 );

g.drawPolygon( xValues1, yValues1, 7 );

g.fillPolygon(p2); //default color: black

g.copyArea(0, 0, 100, 100, 140, 10) ；

g.setColor(new Color(0, 0, 255)); 　 //blue

g.fillPolygon(xValues1, yValues1, 7);

　　 g.setXORMode(Color.red); //red

g.fillPolygon(p2);

}

}

結果L3４

多角形のコンストラ

クタ

楕円の描画 Graphics メソッド

public abstract void copyArea( int x, int y,

int width, int height, int dx, int dy)

public abstract void setXORMode(Color c)

画面操作

描画モード

Polygon class パッケージ

イメージの操作 : ロード、表示、縮小 / 拡大

Image manipulationsimport java.applet.Applet;

import java.awt.*;

public class LoadImageAndScale extends Applet {

private Image japan;

// load the image when the applet begins executing

public void init()

{ japan = getImage( getDocumentBase(), " Japan.gif" );

}

public void paint( Graphics g ) // display the image

{ // draw the original image

g.drawImage( japan, 1, 1, this );

// draw the image with its width and height doubled

int width = japan.getWidth( this );

int height = japan.getHeight( this );

for (i=1; i < 4; i++ )

g.drawImage(japan, 1, 100*i, width*(i+1), height, this );

}

}

Image オブジェクトへの参照 japan の宣言Image オブジェクトへの参照 japan の初期化

アプレットメソッド getImage()指定した画像をロードする

アプレットメソット getDocumentBase()インターネット上における画像の保存場所を決める

Japan.gif は画像ファイルの名前です

Graphics メソッド drawImage()指定画像を表示する

Image メソッドgetWidth()getHeight()

this はアプレット自身

this はImageObserverオブジェクト

幅は (i+1) 倍になる

結果 L35

y の座標値

• 1. 日本の国旗を描画し、” Japan”という単語をカラー（ red,blue ）、サイズ（ 14,24 ）、スタイル（ bold,italic ）で示せ。 ex1

• 2. 与えられた画像を読み込み、アプレットに表示し、その後その横幅と高さを２倍にせよ。そして日本国旗をその画像のトップに描画せよ。

　　 image ex2• 3. ランプの絵を描け。　　 Lamp ランブのデータ• 4. (option) Drawing meanders with

strings. meanders

課題// packages

public class lampApplet extends Applet{

public void init(){

resize(300,300);

}

public void paint(Graphics g){

//the platform

　 //(10,250) のポイントから幅 280 、高さ 40 の長方形を塗りつぶす

//the base of the lamp

　 // （ 125,250 ）から（ 125,160 ）へ線を引く

　 // （ 175,250 ）から（ 175,160 ）へ線を引く

//the lamp shade;two arcs

// 中心（ 85,157 ）、横幅 130 、縦幅 50 、

　　 //startAngle= 　　 65,arcAngle=312 の円弧を塗りつぶす

// 中心（ 85,87 ）、横幅 130 、縦幅 50 、

//startAngle=62,arcAngle=58 の円弧を塗りつぶす

// （ 85,177 ）から（ 119,89 ）へ線を引く

// （ 215,177 ）から（ 181,89 ）へ線を引く

//pattern on the shade

// 中心（ 78,120 ）、直径 40 、

//startAngle=63,arcAngle=-174 の円弧を塗りつぶす

// 中心（ 173,100 ）、直径 40 、 startAngle=110,arcAngle=180 の円弧を塗りつぶす

// 中心（ 120,96 ）直径 40 の円を塗りつぶす

}

}

• 1. Draw a Japanese national flag and word “Japan” in various font colors (red, blue), sizes(14, 24) and styles (bold, italic).

• 2. Load and display a given image into an applet and scale it to 2 times in width and height. Draw the Japanese national flag on the top of the image. image ex2

• 3. Draw a lamp. Lamp

• 4. (option) Drawing meanders with strings.meanders

課題// packages

public class lampApplet extends Applet{

public void init(){

resize(300,300);

}

public void paint(Graphics g){

//the platform

　 //(10,250) のポイントから幅 280 、高さ 40 の長方形を塗りつぶす

//the base of the lamp

　 // （ 125,250 ）から（ 125,160 ）へ線を引く

　 // （ 175,250 ）から（ 175,160 ）へ線を引く

//the lamp shade;two arcs

// 中心（ 85,157 ）、横幅 130 、縦幅 50 、

　　 //startAngle= 　　 65,arcAngle=312 の円弧を塗りつぶす

// 中心（ 85,87 ）、横幅 130 、縦幅 50 、

//startAngle=62,arcAngle=58 の円弧を塗りつぶす

// （ 85,177 ）から（ 119,89 ）へ線を引く

// （ 215,177 ）から（ 181,89 ）へ線を引く

//pattern on the shade

// 中心（ 78,120 ）、直径 40 、

//startAngle=63,arcAngle=-174 の円弧を塗りつぶす

// 中心（ 173,100 ）、直径 40 、 startAngle=110,arcAngle=180 の円弧を塗りつぶす

// 中心（ 120,96 ）直径 40 の円を塗りつぶす

}

}

Practice Exercise: Turtle Graphics

Drawing meanders with strings • A meander is a pattern like that in Figure (a), often made up of a continuous line

meandering along some path.

• We can use a shorthand notation to describe a figure. Suppose thatF means forward(d, 1); (for some distance),+ means turn(A); (a left turn for the angle )- means turn(-A); (a right turn for the angle)

• The following sequence of commands F-F-F-F+F+F+F+F- can produce the motif for the meanders of Figure (a) which is shown in Figure (b).

Practice Exercise: Developing the T

URTLE CLASS • There are many wais to define the Turtle class; the

code presented here should be considered only as a starting point for your own versions.

• First of all, develop some useful supporting classes

• For instance, Class IntPoint2: a point having integer coordinates.

• The code is as following:


URTLE CLASS public class IntPoint2

{

public int x,y;

public void IntPoint2() {x = y = 0;}

public IntPoint2 set_xy(int xx, int yy)

{ this.x = xx; this.y = yy; return this;}

public int getX() {return x;}

public int getY() {return y;}

}


URTLE CLASS Class Turtle: a “turtle” is conceptually similar to the pen in a

pen plotter, migrates over the page, leaving a trail behind itself that appears as a line segment.

• The turtle is positioned at CurPos , headed in a certain direction called the current direction, CurDir

• CurDir is the number of degrees measured counterclockwise from the positive x-axis.

• The Turtle class will control the turtle by adding functionality and provides power in drawing complex figures. The code is as following:


URTLE CLASS /*----------------------------------------------------------------------- moveTo. Move to the point lineTo. Draw the line and update the CurPos turnTo. The method turns the turtle to the given angle turn. The method turns the turtle through angle degrees cou

nterclockwise forward. The method moves the turtle forward in a straight

line from the CurPos through a distance dist in the current direction CurDir and updates the CurDir. If isVisible is nonzero, a visible line is drawn; otherwise nothing is drawn

*/------------------------------------------------------------------------


URTLE CLASS import java.awt.*;

import java.math.*;

public class TurtleGr extends java.applet.Applet {

final float RadPerDeg = (float)0.01745333393; //radians per degree

IntPoint2 CurPos = new IntPoint2();

private float CurDir; //current direction

public void init() {

resize(300,300);

}


URTLE CLASS public void lineTo(Graphics g, int x, int y) { g.drawLine(CurPos.x,CurPos.y, x,y); CurPos.set_xy(x,y); } public void moveTo(int x, int y) { CurPos.set_xy(x,y); } public void turnTo(float angle) { CurDir=angle; } public void turn(float angle) { CurDir+= angle; }


URTLE CLASS public void forward( Graphics g, float dist, int isVisible) {

int x;

int y;

x = CurPos.x + (int)(dist*(float)Math.cos(RadPerDeg*CurDir));

y = CurPos.y + (int)(dist*(float)Math.sin(RadPerDeg*CurDir));

if (isVisible == 1)

lineTo(g, x,y);

else

moveTo(x,y);

}


URTLE CLASS public void paint(Graphics g) { int step; float A = 90; float dist[] = {30,20,10,10,10,20,30,30}; String st; st = new String("F-F-F-F+F+F+F+F-");!! Develop a peace of Java code that make a turtle draw the outline of a motif

according to a sequence of commands !! …

… } } } }

Documents

グラフィックスと画像の操作 Graphics and Image Manipulation ｓ java.awt パッケージ graphics クラスとオブジェクト カラー制御 フォント制御 図形の描画メソッド

グラフィックスと画像の操作 Graphics and Image Manipulation ｓ java.awt パッケージ graphics クラスとオブジェクトカラー制御フォント制御図形の描画メソッド