Java Graphics 2

Applet - JavaでGraphics (2003)

練習３描画色を変えて基本図形を描く

内容

描画色の設定を変える
基本図形を描画する draw method
練習3a：直線、長方形と長円の描画

練習3a：長方形の描画
練習3a：直線、長方形と長円の描画を完成する

ProjectとJBuilderの終了
Web BrowserでAppletを開く
基本図形を塗りつぶすfill method
練習3b：長円弧と角丸長方形を塗りつぶす

描画色の設定を変える

色を設定するmethod

method名機能注記

setBackground( c ) 背景色を設定する Appletのinit()で呼び出される。
c は色に対する文字リテラル

setForeground( c ) 描画色を設定する Appletのinit()で呼び出される。

g.setColor( c ) 文字や図形の描画色を変更する g はGraphicsクラスのオブジェクト変数名

色に対する文字リテラル

method名	機能	注記
setBackground( c )	背景色を設定する	Appletのinit()で呼び出される。 c は色に対する文字リテラル
setForeground( c )	描画色を設定する	Appletのinit()で呼び出される。
g.setColor( c )	文字や図形の描画色を変更する	g はGraphicsクラスのオブジェクト変数名

赤を色の定数で指定： setColor( Color.red );
赤をRGB値で指定： setColor( new Color(255,0,0) ); または16進数"0xFf0000"を使ってもよい setColor( new Color(0xFF0000) );

色の文字リテラル（13色）およびHTML4.0の基本16色（*付きはそれ以外）

色名	色の文字リテラル	RGB値		色名	色の文字リテラル	RGB値
赤	Color.red	Color(255, 0, 0)	Ff0000	黄	Color.yellow	Color(255, 255, 0)	FfFf00
緑 lime	Color.green	Color( 0, 255, 0)	00Ff00	マゼンタ（赤紫） fuchsia	Color.magenta	Color(255, 0, 255)	Ff00Ff
青	Color.blue	Color( 0, 0, 255)	0000Ff	シアン（青緑）aqua	Color.cyan	Color( 0, 255, 255)	00FfFf
白	Color.white	Color(255, 255, 255)	FfFfFf	オリーブ olive		Color(128, 128, 0)	808000
明るい灰色 silver	Color.lightGray	Color(192, 192, 192)	C0C0C0	茶 teal		Color( 0, 128, 128)	008080
灰色	Color.gray	Color(128, 128, 128)	808080	紫 purple		Color(128, 0, 128)	800080
暗い灰色*	Color.darkGray	Color( 64, 64, 64)	404040	栗色 maroon		Color(128, 0, 0)	800000
黒	Color.black	Color( 0, 0, 0)	000000	緑 green		Color( 0, 128, 0)	008000
ピンク*	Color.pink	Color(255, 175, 175)	FfAfAf	濃紺 navy		Color( 0, 0, 128)	000080
オレンジ*	Color.orange	Color(255, 200, 0)	FfC800	ブラウン*		Color( 165, 42, 42)	A52a2a
ラベンダー*		Color(230, 230, 250)	E6E6Fa	ベージュ* beige		Color( 245, 245, 220)	F5F5Dc

基本図形を描画するdraw method

draw method

線図形	method名と引数	使用例
直線の描画	drawLine ( int x1, int y1, int y2, int y2 );	drawLine( 20, 50, 100, 150 ); 座標(20,50)から座標(100,150)へ直線を引く
長方形の描画	drawRect ( int x1, int y1, int width, int hight );	drawRect( 20, 50, 100, 100 ); 座標(20,50)を左上隅として幅100、高さ100の長方形を描く。この例では正方形が描かれる
角丸の長方形の描画	drawRoundRect ( int x1, int y1, int w, int h, int aw, int ah );	drawRoundRect( 20, 50, 100, 80, 15, 10 ); 左上隅の座標(20,50)から幅100、高さ80の角丸長方形を描く。四隅の角丸の水平方向の直径15、垂直方向の直径10とする
長円の描画	drawOval ( int x1, int y1, int wi, int hi );	drawOval( 20, 50, 100, 100 ); 座標(20,50)を左上隅とする幅100、高さ100の長方形に内接する長円（楕円）を描く。この例では半径50の円が描かれる
円弧、扇型の描画	drawArc ( int x1, int y1, int wi, int hi, int t1, int t2 );	drawOval( 20, 50, 100, 100, 0, 120 ); 座標(20,50)を左上隅とする幅100、高さ100の長円の一部として、左回りに開始角度0度から120度開いた円弧（扇型）を描く。
多角形の描画	drawPolygon ( int xPoint[], int yPoint[], int nPoint );	int xp[]={20,50,80}; int yp[]={50,100,100}; drawPolygon( xp, yp, 3); 座標(20,50), (50,100), (80,100)の3つを頂点とする3角形を描く
折れ線図形の描画	drawPolyline ( int xPoint[], int yPoint[], int nPoint);	int xp[]={20,50,80}; int yp[]={50,100,75}; drawPolyline( xp, yp, 3); 座標(20,50), (50,100), (80,75)の3つを順に直線で結ぶ図形を描く

練習３のプログラムの準備

AppBrowserの内容ペインに"GraphicsBasicsApplet1.java"を表示し、Javaプログラムのコードを編集します。
JBuilderは、Appletの作成に合せて自動的に「ひな型プログラム」のcodeを生成しています。AppBrowserの構造ペインに「ひな型プログラム」に含まれているメソッドの一覧が表示されています。
練習３では、「ひな型プログラム」のほとんどが必要ないので削除してもかまいません。例えば、次の行だけを残してください。

package graphics01;

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class GraphicsBasicsApplet1 extends Applet {

//アプレットのビルド
public GraphicsBasicsApplet1() {
}
//アプレットの初期化
public void init() {
}

}

Step3：Appletのコンパイル

練習３aのプログラムの追加・編集

Web Browserに「直線、長方形と長円」を描画しその近くに文字列を描くAppletを作成します。
まず、背景色を青緑(cyan)とし、横幅250で縦長150の長方形を青い線で描くことにします。GraphicsBasicsApplet1.java のcodeとして以下のような赤い文字色の行を追加・編集してください。


// 例題3a Graphics01 基本図形１ GraphicsBasicsApplet1.java 
package graphics01;

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class GraphicsBasicsApplet1 extends Applet {
  public void paint ( Graphics g ) {
    g.setColor ( Color.blue ) ;       //描画色を青とする
    g.drawString ( "長方形 blue", 270, 180 ) ;
    g.drawRect ( 20,30, 250,150 ) ;   //座標(20,30)からx幅250, y長150の長方形を描く
  }
  //アプレットのビルド
  public GraphicsBasicsApplet1( ) {
  }
  //アプレットの初期化
  public void init( ) {
    setBackground ( Color.cyan ) ;    //背景色をcyanとする
  }
}

説明：
長方形の右下隅に"長方形 blue"という文字列を表示するために、長方形の左上隅の座標(20,30)と長方形の大きさ 250 × 150 を考慮すると、文字列の左下隅座標は(20+250, 30+150) = (270,180)となることに注意する。
source codeの保存
programを入力して、修正したら、［ファイル(F)｜保存(S)］を選択してprogram file "GraphicsBasicsApplet1.java"を保存します。ファイルは次の出力パスに保存されます。確認してください。
/<home>/jbproject/Graphics01/src/graphics01/GraphicsBasicsApplet1.java

Appletのコンパイル（翻訳、compile）

手順：

projectペインのsource file名 "GraphicsBasicsApplet1.java"を選択し，右クリックする、。
現れたmenuで［メイク(K)］を選択する。この状況でメイク(make)はcompileと同じ意味です。［プロジェクト(P)｜メイク(K)］を選択してもよい。
source codeに文法的なerrorがあれば、AppBrowserの下部にメッセージペインが現れcompilerがその箇所（行数と列数）を指摘してくれます。errorを修正し再度compileしてください。compileが正常に終了した場合はAppBrowserの下端バーに「ファイルをビルドでのビルドが成功（ビルド時間0秒）」と出ます。
クラスファイルは，コンパイル後，次の出力パスに保存されます。確認してください。
/<home>/jbproject/Graphics01/classes/graphics01/GraphicsBasicsApplet1.class

Appletの実行（run）

/<home>/jbproject/Graphics01/classes/GraphicsBasicsApplet1.html

JBuilderでHTMLファイルの実行

projectペインの"GraphicsBasicsApplet1.html"ファイルを選択し、右クリックして開くmenuから［実行(R)］を選択する。すると、Sun Microsystems社のApplet Viewer にAppletの実行結果が描かれます。

JBuilderのメニューで［実行(R)｜プロジェクトの実行(N)］を選択

プログラムの修正後などでprogramがcompileされていなければ、まず自動的にcompileしてから実行されます。実行結果は、JBuilderのApplet viewerである「Applet Testbed」に描かれます。

NetscapeなどのWebブラウザでHTMLファイルを開く

Appletの実行を終了する

実行中のApplet Viewerの右上の × ボタンを選択
AppBrowserのステータスバーの左端にある赤い■を選択（■ ▼）の２つが並んでいます

練習３aのプログラムの完成

直線を描くのソースコードの追加

先に描いた長方形の左下隅(20,30+150)=(20,180)から右上隅(20+250,30)=(270,30)へ直線を赤で描きます。直線の真ん中 (20+250/2,30+150/2)=(145,105) に文字列"直線 red"を書きます。

  public void paint (Graphics g) {

    g.setColor( Color.blue );
    g.drawRect( 20,30, 250,150 );
    g.drawString( "長方形 blue", 270, 180 );

    g.setColor( Color.red );
    g.drawLine( 20,180, 270,30 );
    g.drawString( "直線 red", 145, 105 );

  }

円を描くのソースコードの追加

先に描いた長方形の横幅250に合わせて、直径250の円を長方形に接するようにオレンジ色で描きます。円に外接する正方形の右下隅 (20+250,30+250)=(270,280) に文字列"円 orange"を書きます。

  public void paint (Graphics g) {

    g.setColor( Color.blue );
    g.drawRect( 20,30, 250,150 );
    g.drawString( "長方形 blue", 270, 180 );

    g.setColor( Color.red );
    g.drawLine( 20,180, 270,30 );
    g.drawString( "直線 red", 145, 105 );

    g.setColor( Color.orange );
    g.drawString( "円 orange", 270, 280 );
    g.drawOval( 20,30, 250,250 );
  }

完成です。Applet Viewer に表示されるAppletの実行結果は次のようになります。

ProjectとJBuilderの終了

Projectを閉じる

menuで［ファイル(F)｜プロジェクトを閉じる(E)］を選択する。現れた「プロジェクトを閉じる」dialog boxで［すべてを選択(A)］を選び、［OK］ボタンを選択します。

変更ファイルの保存

上の操作で、「変更ファイルの保存」dialog boxが現れた場合は、やはり［すべてを選択(A)］を選び、［OK］ボタンを選択するとファイルが保存されてprojectを閉じることができます。

JBuilderの終了

JBuilderを終了するには、menuで［ファイル(F)｜終了(X)］を選択します。

Web Browserで Applet を開く（実行する）

AppletはWebブラウザで動作するプログラムです。"GraphicsBasicsApplet1.html"ファイルとそこに記述されたgraphics01内にクラスファイル"GraphicsBasicsApplet1.class"の2つがあればAppletをInternetに公開することができます。
/.../classes/GraphicsBasicsApplet1.html
/.../classes/graphics01/GraphicsBasicsApplet1.class

このことを確かめてみます。

次のフォルダ"classes"内にあるファイル"GraphicsBasicsApplet1.html"とフォルダ"graphics01"を同じ場所に、例えば「マイドキュメント」にcopyして下さい。

/<home>/.../classes/GraphicsBasicsApplet1.html	--> My Documents/GraphicsBasicsApplet1.html
/<home>/.../classes/graphics01/GraphicsBasicsApplet1.class	--> My Documents/graphics01/GraphicsBasicsApplet1.class

"Netscape"等のWeb browserで上の GraphicsBasicsApplet1.html を開くと、GraphicsBasicsApplet1.classをWeb browserでAppletとして実行します。
GraphicsBasicsApplet1.htmlのソースコードは以下のようになっています。


<body>
graphics01.GraphicsBasicsApplet1 は Java が使用できるブラウザで下に表示されます<br>
<applet
  codebase = "."
  code     = "graphics01.GraphicsBasicsApplet1.class"
  name     = "GraphicsBasics01"
  width    = "400"
  height   = "300"
  hspace   = "0"
  vspace   = "0"
  align    = "top"
>
</applet>
</body>

基本図形を塗りつぶす fill method

Graphicsクラスには、次のような基本図形を塗りつぶして描画する fill methodがあります。大部分は draw method と同じ図形を塗りつぶします。数値の単位は点画素（ピクセル）です。

fill method

線図形	method名と引数	使用例
長方形を塗る	fillRect ( int x1, int y1, int width, int hight );	fillRect( 20, 50, 100, 100 ); 座標(20,50)を左上隅として幅100、高さ100の長方形を塗りつぶす。
角丸の長方形を塗る	fillRoundRect ( int x1, int y1, int w, int h, int aw, int ah );	fillRoundRect( 20, 50, 100, 80, 15, 10 ); 左上隅の座標(20,50)から幅100、高さ80の角丸長方形を塗りつぶす。四隅の角丸の水平方向の直径15、垂直方向の直径10とする
長円、楕円を塗る	fillOval ( int x1, int y1, int width, int hight );	fillOval( 20, 50, 100, 100 ); 座標(20,50)を左上隅とする幅100、高さ100の長方形に内接する長円（楕円）を塗りつぶす。この例では半径50の円を塗りつぶす。
円弧、扇形を塗る	fillArc ( int x1, int y1, int wi, int hi, int t1, int t2 );	fillOval( 20, 50, 100, 100, 30, 120 ); 座標(20,50)を左上隅とする幅100、高さ100の長円の一部として、左回りに開始角度30度から120度開いた円弧（扇型）を塗りつぶす。
多角形を塗る	fillPolygon ( int xPoint[], int yPoint[], int nPoint );	int xp[]={20,50,80}; int yp[]={50,100,100}; fillPolygon( xp, yp, 3); 座標(20,50), (50,100), (80,100)の3つを頂点とする3角形を塗りつぶす。
長方形を消去する	clearRect ( int x1, int y1, int width, int hight );	crearRect( 20, 50, 200, 250 ); 座標(20,50)を左上隅として幅200、高さ250の長方形を背景色で消去(clear)する。

練習3b：長円弧と角丸長方形を塗りつぶす

次のサンプルのようなAppletを作ってみよう。

JBuilder 7 の主な設定
- Project: "Graphics02",
- Note用HTML: "Graphics02.html",
- Package: "graphics02",
- Java source: "GraphicsBasicsApplet2.java"
- Java class: "graphics02.GraphicsBasicsApplet2.class"
- Applet用HTML: "GraphicsBasicsApplet2.html" (size: w=400, h=300)
図形の設定
- 外接する見えない長方形の大きさは横幅200、縦高100です。楕円弧Aの角度は120度です。塗りつぶした扇形(楕円弧)Bの角度は240度です。２つの楕円弧は接続しています。
- 角丸長方形Cの大きさは横幅200、縦高100、角丸は直径30です。左上隅のxは上の長円の中心、yは上の長円の下端に接しています。
- 角丸長方形Cの中に、角丸長方形の右半分から１辺40の透明な正方形Dを描きます（背景色で塗りつぶす）。A, Bの右端のx座標とDの左端のx座標は同じです。
- 図形A, B, C, Dは異なる色で描き、各図形にはサンプルのような位置に文字列を書いてください。

うまくいきましたか。

Go to TOP

練習３ 描画色を変えて基本図形を描く