2009/6/16
今回は、ベクターでお絵かきです。
Flexを使っているとあまりなじみがないというか、必要がないと思われる Graphicsクラスを用いたベクターのお絵かきです。
使いどころといえば、たとえば、自作のコンテナを作るときの枠組みとか、私はパネルをリサイズするときにリサイズする対象を書くなどで必要になりました。
今回は、２つの角丸四角を書いてみました。
１つは、lineToとcurveToを用いて、つまり、直線と曲線を使って。
２つは、drawRoundRect、ずばり、角丸四角を書くための関数です。
なぜかと言えば、drawRoundRectをつかった四角が微妙にきにいらなかったので、lineToとcurveToで書いたものと違いがあるのかみてみました。
したが、その例です。
This movie requires Flash Player 9
スライダーを変更すれば、角がより丸くなり、線の色と、塗りつぶす色の設定になっています。
また、上が、直線と曲線のみ、したが、drawRoundRectを使って書いたものです。
下の示すソースで書いています。
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();
}
Posted in 
