今回は、ベクターでお絵かきです。
Flexを使っているとあまりなじみがないというか、必要がないと思われる Graphicsクラスを用いたベクターのお絵かきです。

使いどころといえば、たとえば、自作のコンテナを作るときの枠組みとか、私はパネルをリサイズするときにリサイズする対象を書くなどで必要になりました。

今回は、2つの角丸四角を書いてみました。
1つは、lineToとcurveToを用いて、つまり、直線と曲線を使って。
2つは、drawRoundRect、ずばり、角丸四角を書くための関数です。

なぜかと言えば、drawRoundRectをつかった四角が微妙にきにいらなかったので、lineToとcurveToで書いたものと違いがあるのかみてみました。
したが、その例です。

This movie requires Flash Player 9

スライダーを変更すれば、角がより丸くなり、線の色と、塗りつぶす色の設定になっています。
また、上が、直線と曲線のみ、したが、drawRoundRectを使って書いたものです。

下の示すソースで書いています。

[AS]
private var sx:Number = 10;
private var sy:Number = 10;
private var cp:Number = 10;

private var boxWidth:Number = 200;
private var boxHeight:Number =100;

private function load():void{
this.drawBox();
}

private function drawBox():void{
cp = hs.value; // スライダーの値
var g:Graphics = canvas.graphics;
g.clear();
g.lineStyle(2,uint(bcolor.value),0.5); // bcolor ColorPicker(線の色)
g.beginFill(uint(fcolor.value),0.5); // fcolor ColorPicker(塗りつぶす色)

// 直線と曲線だけで角丸四角を書く
g.moveTo(sx,sy+cp);
g.curveTo(sx,sy,sx+cp,sy);
g.lineTo(sx+boxWidth-cp,sy);
g.curveTo(sx+boxWidth,sy,sx+boxWidth,sy+cp);
g.lineTo(sx+boxWidth,sy+boxHeight-cp);
g.curveTo(sx+boxWidth,sy+boxHeight,sx+boxWidth-cp,sy+boxHeight);
g.lineTo(sx+cp,sy+boxHeight);
g.curveTo(sx,sy+boxHeight,sx,sy+boxHeight-cp);
g.lineTo(sx,sy+cp);

// 角丸四角を書く
g.drawRoundRect(sx,sy+boxHeight+10,boxWidth,boxHeight,cp*2);

g.endFill();
canvas.invalidateDisplayList();
}
[/AS]

お仕事のご依頼・相談を承ります
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら

Leave a Reply

お仕事のご依頼・相談
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら
ソフトウェア&ライブラリ




ライブラリ
airxmail(en)
AIR版メール送受信ライブラリ
airxzip
AIR版ZIP圧縮・解凍ライブラリ
執筆書籍
本、雑誌等

WEB記事:CodeZine
執筆記事はこちら
カレンダー
2009年6月
« 5月   7月 »
1234567
891011121314
15161718192021
22232425262728
2930  

カスタム検索
RSS
Add to Google < !–adsense–>
アーカイブ
カテゴリ
にほんブログ村 IT技術ブログへ