|
| DelphiXE3 [FMX] 楕円塗り潰し 2014/05/28 |
前回は、四角形塗り潰し(FillRect)について記述しました。今回は、楕円塗り潰し(FillEllipse)について述べていきます。
各引数の内容は、楕円描画(DrawEllipse)と同じです。
以下、ヘルプより
TCanvas.
FillEllipse |
procedure FillEllipse(const ARect: TRectF;
const AOpacity: Single);
procedure FillEllipse(const ARect: TRectF;
const AOpacity: Single;
const ABrush: TBrush); |
現在の TCanvas 上に、四角形の境界線で定義される楕円を塗りつぶして描画します。
FillEllipse は、四角形の境界線で定義される楕円を、Fill プロパティで指定される現在のブラシで塗りつぶすよう、TCanvas の子孫で実装します。
ARect パラメータは、楕円の境界線を定義する構造を示します。
AOpacity パラメータは、Fill 色の透明度を示します。 |
[Shapes]内のペイントボックス(PaintBox)を配置し、ClipChildernプロパティを True にしておきます。uses節に「UIConsts」を追記します。
OnPaintイベントハンドラを下記のようにしてみます。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
begin
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
FillEllipse(RectF(10,10,100,100),1.0);
end;
end; |
保存・ビルド（コンパイル）・実行をすると下図のようになります。
点(10,10)から点(100,100)までを対角線とする四角形に内接する、透過率 1.0 （完全不透明状態）で、青色で塗り潰した楕円（この場合は、縦横サイズが同じなので円）を描画します。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
begin
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
FillEllipse(RectF(10,10, 140,100),1.0);
end;
end; |
という具合に縦横サイズが異なる場合には、楕円の描画となります。
これまで図形描画系(Draw〜)では、Strokeブラシで描画していましたが、塗り潰しの場合には、Fillブラシの状態で塗り潰しを描画します。
Fill.Kind でブラシの種類（色、ビットマップ、グラデーション）、
を指定します（内容は Strokeブラシのブラシの種類と同じです）。
Fillブラシは、TBrush型ですので、Strokeブラシのような Thickness（線幅）、Dash（線種）、Cap（線端状態）、Join（結合部状態）のプロパティはありません。
例えば下記のようにすると、
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
begin
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkGradient;
Fill.Gradient.Color := claRed ;
Fill.Gradient.Color1 := claYellow ;
FillEllipse(RectF(10,10, 140,100),1.0);
end;
end; |
下図のように描画されます。
第２引数 AOpacity で、透過率を指定する事が出来ます。
0.0（完全透明）〜1.0（完全不透明）の範囲内で指定します。
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
FillEllipse(RectF(10,10, 100,80),0.5);
Fill.Color := claRed ;
FillEllipse(RectF(40,40, 140,140),0.5);
end; |
とした場合は、下図のようになります。
第３引数 ABrush でブラシを指定する記述方法もあります。
この場合は、直前で指定した Canvas の Fillプロパティ内容ではなく、この引数の内容で楕円塗り潰しが行われます。
例えば、下記のように記述すると
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
br : TBrush ;
begin
br := TBrush.Create(TBrushKind.bkSolid,claBlue) ;
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkGradient ;
Fill.Gradient.Color := claRed ;
Fill.Gradient.Color1 := claYellow ;
FillEllipse(RectF(10,10, 120,80),1.0, br);
FillEllipse(RectF(20,20, 140,140),0.5);
end;
br.Free ;
end; |
下図のように描画されます。
楕円のエッジ部分を描画したい場合には、DrawEllipseメソッドを利用しますが、描画する順番によって見え方が変わってきますので注意して下さい。
with Canvas do begin
Clear(claWhite);
Stroke.Kind := TBrushKind.bkSolid ;
Stroke.Color := claRed ;
Stroke.Thickness := 20 ;
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
DrawEllipse(RectF(20,20, 130,130),1.0);
FillEllipse(RectF(20,20, 130,130),1.0);
end; |
のように、先にエッジ部分を描画した場合は
となり、
・・・
FillEllipse(RectF(20,20, 130,130),1.0);
DrawEllipse(RectF(20,20, 130,130),1.0);
・・・ |
のように、先に塗り潰し部分を描画した場合は
となります。
・・・
FillEllipse(RectF(20,20, 130,130),0.5);
DrawEllipse(RectF(20,20, 130,130),0.5);
・・・ |
のように透過させてみるとわかりますが、
エッジ部分の線幅は、線の両側方向へ太くなる仕組みになっていますから、線幅を指定した場合には塗り潰し部分と重なる部分が出てきます。通常は、塗り潰し部分→エッジ部分、の順で描画する事になると思われますが…。
放射グラデーションでの楕円塗り潰しの例です。
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkGradient;
Fill.Gradient.Color := claRed ;
Fill.Gradient.Color1 := claYellow ;
Fill.Gradient.Style := TGradientStyle.gsRadial ;
Fill.Gradient.RadialTransform.RotationCenter.X
:= 0.5 + 20/(130-20) ;
Fill.Gradient.RadialTransform.RotationCenter.Y
:= 0.5 + 30/(120-30) ;
Fill.Gradient.RadialTransform.RotationAngle := 0.0 ;
FillEllipse(RectF(20,30,130,120),1.0);
end; |
ビットマップイメージでの楕円塗り潰しの例です。
実行プログラムと同じフォルダに画像「star.gif」を入れておく必要があります。無ければ例外が発生します。
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkBitmap;
Fill.Bitmap.WrapMode := TWrapMode.wmTile ;
Fill.Bitmap.Bitmap.LoadFromFile('star.gif');
FillEllipse(RectF(20,30,130,120),1.0);
end; |
|
|
バッチファイル
ＢＡＳＩＣ
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Dehi入門編
>Delphi2010
>DelphiXE3
▲2014/05/27
2014/05/28
▼2014/05/29
シェアウェア
Script!World
データベース
|
