Graphicsクラスの描画メソッドを使う

|
(section09-01 基本的な図形を描くから抜粋)

 図形の描画はGraphicsクラスの描画メソッドを使いますが、Graphicsクラスのインスタンスを作って直接利用することはできません。また、Graphicsクラスを継承して描画可能なクラスを再定義することもできません。
 Graphicsクラスの描画メソッドを利用するには、Shapeクラス、Spriteクラス、そしてSpriteクラスのサブクラスであるMovieClipクラスのgraphicsプロパティを介してGraphicsクラスのオブジェクトにアクセスします。

図形を描く
 Graphicsクラスの描画メソッドを使うと、円、楕円、四角形、角丸四角形の図形を描くことができます。次のスクリプトはGraphicsクラスのdrawCircle()を使って、Shapeクラスのインスタンスに円を描いています。
 なお、Shapeクラスは単純なシェイプを作成するときに利用されます。ShapeクラスはSpriteクラスと違ってDisplayObjectContainerとInteractiveObjectを継承していません。つまり、ほかの表示オブジェクトを入れ子にもつことができず、クリックイベントなどのイベントを受け取りません。その分だけSpriteクラスよりもメモリを消費しません。

[:script:]円を描く
var shape1:Shape=new Shape();
//線幅3、赤色の線
shape1.graphics.lineStyle(3,0xFF0000);
//円を描く
shape1.graphics.drawCircle(0,0,80);
//ステージの中央に置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);
 drawCircle(0,0,80)は、中心点の座標(0,0)と半径80の円を描きます。座標の(0,0)はステージの座標ではなく、addChild()する親オブジェクトの中心点を基準とするローカル座標です。図形を描く線はlineStyle()で指定します。lineStyle()のオプションはたくさんありますが、ここでは線幅3と線色0xFF0000(赤)を指定しています。

fig09-01-01.jpgswfを試す

 楕円形はdrawEllipse()で描きます。drawCircle()は円の中心点の座標と半径を指定しますが、drawEllipse()は楕円の中心点ではなく左上角の座標を指定し、楕円の幅と高さを指定します。drawCircle.flaのスクリプトの5行目を次のように差し替えると幅180、高さ100の楕円形が描かれます。

[:script:]楕円を描く→swfを試す
shape1.graphics.drawEllipse(0,0,180,100);
 長方形はdrawRect()で描きます。drawRect()では、左上角の座標と幅と高さを指定します。drawCircle.flaのスクリプトの5行目を次のように差し替えると幅150、高さ100の長方形が描かれます。

[:script:]長方形を描く→swfを試す
shape1.graphics.drawRect(0,0,150,100);
 角丸四角形はdrawRoundRect()で描きます。drawRoundRect()では、左上角の座標と幅と高さに加えて、角丸の半円の幅と高さを指定します。drawCircle.flaのスクリプトの5行目を次のように差し替えると幅150、高さ100、角の半円30の角丸四角形が描かれます。

[:script:]角丸四角形を描く→swfを試す
shape1.graphics.drawRoundRect(0,0,150,100,30,30);
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

このブログ記事について

このページは、oshigeが2009年7月12日 12:32に書いたブログ記事です。

ひとつ前のブログ記事は「インスタンスの重なりを入れ替える」です。

次のブログ記事は「図形の線の色とスタイル」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ