課題 (02:キャンバス)

作業について

今回の課題は以下のパッケージに作成してください。

パッケージの名前
j1.lesson02

作成するクラスの名前は問題ごとに指示があります。下記を参照してください

課題の提出方法については下記を参照してください。

また、別のコンピューター上に移動する際には、下記を参考にプログラムを持ち帰ってください。

新しい内容

様々な図形の描画

今回は、文字列のほかに線や長方形、楕円などをキャンバスに描画します。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package j1.lesson02;
 
import gpjava.Canvas;
 
public class FirstShapesS2 {
 
    public static void main(String[] args) {
        new FirstShapesS2().start();
    }
 
    void start() {
        Canvas.show();
 
        Canvas.drawLine(50, 50, 200, 200);
        Canvas.drawLine(50, 100, 200, 100);
 
        Canvas.drawRect(250, 50, 50, 50);
        Canvas.fillRect(250, 150, 50, 50);
 
        Canvas.drawOval(350, 50, 50, 50);
        Canvas.fillOval(350, 150, 50, 50);
    }
}

プログラムを実行すると、下図のようにキャンバスに描画されると思います。

図: 様々な図形の描画

まず、線分を描画しているのは「Canvas.drawLine」という命令です。これは次のように使います。

Canvas.drawLine([始点のX座標], [始点のY座標], [終点のX座標], [終点のY座標]);

上記のような命令で、始点から終点を結ぶ線分を描画します。このキャンバスでは、左上を原点として右にX、下にYをとるような座標系であることに注意してください。特に、これまでの数学では左下を原点としていたため、Y座標の正負が反転しています。

次に、長方形を描画しているのは「Canvas.drawRect」という命令です。このRectというのはRectangle (長方形)の略で、次のように使います。

Canvas.drawRect([始点のX座標], [始点のY座標], [幅], [高さ]);

「Canvas.drawLine」は始点と終点ですが、「Canvas.drawRect」は始点と大きさを指定します。また、幅や高さに負の値を指定すると何も描画されないので注意が必要です。

同様に、楕円(この場合は真円)を描画しているのは「Canvas.drawOval」という命令です。これは次のように使います。

Canvas.drawOval([始点のX座標], [始点のY座標], [幅], [高さ]);

これは少し特殊な指定方法で、まず同じ視点と大きさを持つ長方形(「Canvas.drawRect」と同じ)を考えてみてください。「Canvas.drawOval」という命令は、その長方形に内接する楕円を描画します。

「Canvas.drawLine」は始点と終点ですが、「Canvas.drawRect」は始点と大きさを指定します。また、幅や高さに負の値を指定すると何も描画されないので注意が必要です。

最後に、「Canvas.fillRect」と「Canvas.fillOval」は、それぞれ「Canvas.drawRect」と「Canvas.drawOval」の内側の領域を塗りつぶす命令です。

まとめると、今回紹介した命令は次の5つです。これらを利用してキャンバスにいろいろなものを描画する課題に挑戦してください。

Canvas.drawLine([始点のX座標], [始点のY座標], [終点のX座標], [終点のY座標]);
Canvas.drawRect([始点のX座標], [始点のY座標], [幅], [高さ]);
Canvas.drawOval([始点のX座標], [始点のY座標], [幅], [高さ]);
Canvas.fillRect([始点のX座標], [始点のY座標], [幅], [高さ]);
Canvas.fillOval([始点のX座標], [始点のY座標], [幅], [高さ]);

問題

1. 指定した位置に円を描画するプログラム

作成するクラスの名前
PutCircleS2

X座標とY座標を入力ダイアログから整数で入力して、その座標を中心として半径100の円をキャンバスに描画してください。

下記は100, 300の順に入力した際の例です。

図: 指定した位置に円を描画するプログラム

2. 複数の図形を組み合わせた図形を描画するプログラム

作成するクラスの名前
DrawShapesS2

次の内容のキャンバスを表示するプログラムを作成してください。

図: 複数の図形を組み合わせた図形を描画するプログラム

この図では外側の円の半径を100にして、円の中心を(250, 250)の座標にしています。また、内側の塗りつぶした円の半径は50にしています。これらは自由に変えてかまいませんが、内部の正方形は外側の円に内接するようにしてください。なお、2の平方根は1.414くらいの近似で上図のようになりました。

ヒント

円に内接する正方形の一辺の長さは、円の半径に2の平方根を掛けると計算できます。また、一度円の中心を原点 (0, 0) として計算した後に、(+250, +250)移動してやると解りやすいかもしれません。手で計算するのは大変なので、プログラムの中で計算してしまいましょう。

ヒント

まず、キャンバスの中心(250, 250)を原点(0, 0)として考えます。すると、外側の円(半径100)に外接する正方形を考えたとき、その左上の頂点座標は(-100, -100)になります。

そして原点を元に戻してやると、(+250, +250)移動してやればいいので、先ほどの頂点座標は(-100 + 250, – 100 + 250)となります。

「Canvas.drawOval」命令には「始点のX座標、始点のY座標、幅、高さ」の順に数値を指定するので、幅と高さをそれぞれ半径の2倍として、外側の円は次のように描画できます。

Canvas.drawOval(-100 + 250, – 100 + 250, 100 * 2, 100 * 2);

次のように手で計算してもいいですが、せっかくコンピューターを使っているので任せてしまうと楽です。

Canvas.drawOval(150, 150, 200, 200);

3. 指定した大きさの巨大な＋を描画するプログラム

作成するクラスの名前
PutPlusS2

(250, 250)を中心とした、巨大な＋を描画するプログラムを作成してください。

ただし、この＋の大きさは入力ダイアログから倍率を実数で入力できるものとして、1.0が入力された際には縦横100の＋を描画するようにしてください。下図は順に4.5を入力した際の例、0.7を入力した際の例です。

図: 指定した大きさの巨大な＋を描画するプログラム (4.5)
図: 指定した大きさの巨大な＋を描画するプログラム (0.7)

上図では、いずれも縦横の棒の太さは棒の長さの20%としています。