AFsoft WebSite（エーエフソフト・ウェブサイト）
　

オペレーティング・システムについて

プログラミングについて
ホームページについて
キャドについて
電子カタログについて
書籍・雑誌
イベント
リンク集
DelphiXE3　[FMX] 四角形塗り潰し　2014/05/27
　
前回まで、各種図形描画（Draw〜）のメソッドについて記述してきました。今回から、塗り潰し（Fill〜）のメソッドについて記述していきます。各種図形描画は、指定した図形のエッジ部分の描画を行いますが、塗り潰しは、指定した図形のエッジ部分は描画せず、図形の内部の塗り潰しを行います。塗り潰しは閉じた図形（閉図形）で可能であり、閉じていない図形（開図形）での塗り潰しはありません。
　
まずは、四角形塗り潰し(FillRect)です。
各引数の内容は、四角形描画(DrawRect)と同じです。
　
以下、ヘルプより
TCanvas.
FillRect		 procedure FillRect(const ARect: TRectF;
　const XRadius, YRadius: Single;
　const ACorners: TCorners; const AOpacity: Single;
　const ACornerType: TCornerType = TCornerType.ctRound);
procedure FillRect(const ARect: TRectF;
　const XRadius, YRadius: Single;
　const ACorners: TCorners; const AOpacity: Single;
　const ABrush: TBrush;
　const ACornerType: TCornerType = TCornerType.ctRound);
カスタマイズされた角の rectangle を塗りつぶし、現在の TCanvas に表示します。
　
カスタマイズされた角を持つ TRectF を、Fill プロパティで指定される現在のブラシで塗りつぶすには、FillRect を TCanvas の子孫で実装する必要があります。
　
ARectパラメータは、塗りつぶされる rectangle を示します。
　
XRadius パラメータは、水平方向での、角からカスタマイズの始点への距離を示します。XRadius の最大値は、四角形の幅の半分です。これより大きい場合には、最大値が使用されます。
　
YRadius パラメータは、垂直方向での、角からカスタマイズの始点への距離を示します。YRadius の最大値は、四角形の高さの半分です。これより大きい場合には、最大値が使用されます。
　
ACorners パラメータは、カスタマイズを適用する角を示します。すべての角にカスタマイズを適用するには、AllCorners 定数を使用します。
　
AOpacity パラメータは、Fill 色の透明度を示します。
　
ACornerType は任意のパラメータで、角のタイプを示します。 デフォルトでは、ctRound です。
　
[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 ;
　　FillRect(RectF(20,20,120,120),0,0,AllCorners,1.0);
　end;
end;
保存・ビルド（コンパイル）・実行をすると下図のようになります。

　
点(20,20)から点(120,120)までを対角点とする、透過率 1.0 （完全不透明状態）で、青色で塗り潰した四角形を描画します。
下記のように、始点・終点に変数を利用する事も可能です。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
　r : TRectF ;
begin
　r := TRectF.Create(10,10, 100,100);
　with Canvas do begin
　　Clear(claWhite);
　　Fill.Kind := TBrushKind.bkSolid ;
　　Fill.Color := claBlue ;
　　FillRect(r,0,0,AllCorners,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 ;
　　FillRect(RectF(20,20,130,130),0,0,AllCorners,1.0);
　end;
end;
下図のように描画されます。

　
　
第２引数 XRadius、第３引数 YRadius は、四角形のコーナーの大きさを指定します。
with Canvas do begin
　Clear(claWhite);
　Fill.Kind := TBrushKind.bkSolid ;
　Fill.Color := claBlue ;
　FillRect(RectF(10,10, 140,140),10,20,AllCorners,1.0);
end;
とすると、下図のようになります。

　
　
第４引数 ACorners は、どのコーナーに対して　コーナー処理を行うのかを指定します。
AllCorners は、TCorners 型の定数で、四角形の 4 つすべての角の集合を定義したものです。
AllCorners は、次の TCorners 値に初期化されます。
　　 [TCorner.crTopLeft, TCorner.crTopRight,
　　　TCorner.crBottomLeft, TCorner.crBottomRight];
AllCorners はコントロールの描画のために使用されます。
例えば、上の２つのコーナーのみ処理をしたい場合には、
with Canvas do begin
　Clear(claWhite);
　Fill.Kind := TBrushKind.bkSolid ;
　Fill.Color := claBlue ;
　FillRect(RectF(10,10, 140,140),10,20,
　　[TCorner.crTopLeft, TCorner.crTopRight],1.0);
end;
とすると、下図のようになります。

AllCorners を指定すると、４つ全てのコーナー処理を行います。
　
　
第５引数 AOpacity で、透過率を指定する事が出来ます。
0.0（完全透明）〜1.0（完全不透明）の範囲内で指定します。
with Canvas do begin
　Clear(claWhite);
　Fill.Kind := TBrushKind.bkSolid ;
　Fill.Color := claBlue ;
　FillRect(RectF(10,10, 100,100),5,5,AllCorners,0.5);
　Fill.Color := claRed ;
　FillRect(RectF(50,50, 140,140),10,10,AllCorners,0.5);
end;
とした場合は、下図のようになります。

　
　
第６（第７）引数 ACornerType で コーナー処理の種類を指定する事が出来ます。
TCornerType.ctRound
（デフォルト）
TCornerType.ctBevel
TCornerType.ctInnerRound
TCornerType.ctInnerLine
　
with Canvas do begin
　Clear(claWhite);
　Fill.Kind := TBrushKind.bkSolid ;
　Fill.Color := claBlue ;
　FillRect(RectF(30,30, 120,120),15,15,AllCorners,1.0,
　　TCornerType.ctInnerRound);
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 ;
　　FillRect(RectF(10,10, 100,100),0,0,AllCorners,1.0, br);
　　FillRect(RectF(30,30, 140,140),15,15,AllCorners,0.5,
　　　TCornerType.ctBevel);
　end;
　br.Free ;
end;
下図のように描画されます。

　
　
四角形のエッジ部分を描画したい場合には、DrawRectメソッドを利用しますが、描画する順番によって見え方が変わってきますので注意して下さい。
with Canvas do begin
　Clear(claWhite);
　Stroke.Kind := TBrushKind.bkSolid ;
　Stroke.Color := claRed ;
　Stroke.Thickness := 20 ;
　Fill.Kind := TBrushKind.bkSolid ;
　Fill.Color := claBlue ;
　DrawRect(RectF(20,20, 130,130),15,10,AllCorners,1.0);
　FillRect(RectF(20,20, 130,130),15,10,AllCorners,1.0);
end;
のように、先にエッジ部分を描画した場合は

となり、
・・・
FillRect(RectF(20,20, 130,130),15,10,AllCorners,1.0);
DrawRect(RectF(20,20, 130,130),15,10,AllCorners,1.0);
・・・
のように、先に塗り潰し部分を描画した場合は

となります。
・・・
FillRect(RectF(20,20, 130,130),15,10,AllCorners,0.5);
DrawRect(RectF(20,20, 130,130),15,10,AllCorners,0.5);
・・・
のように透過させてみるとわかりますが、

エッジ部分の線幅は、線の両側方向へ太くなる仕組みになっていますから、線幅を指定した場合には塗り潰し部分と重なる部分が出てきます。通常は、塗り潰し部分→エッジ部分、の順で描画する事になると思われますが…。
　
　
　
これまでちゃんと記述していませんでしたが、グラデーション描画は上から下への線形グラデーション以外にも、方向を指定した線形グラデーションや、放射グラデーションもあります。
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 ;
　　Fill.Gradient.Style := TGradientStyle.gsLinear ;
　　Fill.Gradient.StartPosition.Point := PointF(0,0) ;
　　Fill.Gradient.StopPosition.Point := PointF(1,1) ;
　　FillRect(RectF(20,20,130,130),0,0,AllCorners,1.0);
　end;
end;
のようにすると

となりますが、「StartPosition.Point」で線形グラデーションの開始点、「StopPosition.Point」で線形グラデーションの終了点、を示します。この場合の点座標は、左上(0,0)〜右下(1,1)　での指定となります。
　
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 ;
　　Fill.Gradient.Style := TGradientStyle.gsRadial ;
　　Fill.Gradient.RadialTransform.RotationCenter.X
　　　:= 0.5 + 20/(130-20);
　　Fill.Gradient.RadialTransform.RotationCenter.Y
　　　:= 0.5 + 20/(130-20);
　　Fill.Gradient.RadialTransform.RotationAngle := 0.0 ;
　　FillRect(RectF(20,20,130,130),0,0,AllCorners,1.0);
　end;
end;
のようにすると

となりますが、
まず、「RadialTransform.RotationAngle」の値は全く反映されていない様子である、という事と（ヘルプのサンプルには記載があるので記述していますが）、「RadialTransform.RotationCenter」の値が放射中心点になる様子なのですが、これは図形の境界ボックス左上を(0,0)〜右下(1,1)とした点座標となるようなのですが、それはあくまでも図形の位置が(0,0)で開始している場合のみ、であって、上記のように、(20,20)〜(130,130)の四角形の場合は、X=20,Y=20の分だけずれ込んでいる為、RotationCenter を(0.5,0.5)にすると放射中心点がずれてしまいます。その補正を行うため、「+ 20/(130-20)」（20：四角形の始点＝位置ずれ、(130-20)：四角形の大きさ；四角形の大きさを1.0と想定するので、位置ずれもそれに合わせた値にしている）のような事をしていますが、いまひとつ、納得行かないものがありますね。
　
　
バッチファイル
ＢＡＳＩＣ
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Dehi入門編
>Delphi2010
>DelphiXE3
▲2014/05/26
　2014/05/27
▼2014/05/28
　
シェアウェア
Script!World
データベース
　
お問い合わせ　
本サイトはリンクフリーです
リンクバナー
(C)Copyright 1999-2015. By AFsoft All Rights Reserved.