|
| DelphiXE3 [FMX] パス図形塗り潰し 2014/05/31 |
前回は、多角形塗り潰し(FillPolygon)について記述しました。今回は、パス図形塗り潰し(FillPath)について述べていきます。
各引数の内容は、パス図形描画(DrawPath)と同じです。
以下、ヘルプより
TCanvas.
FillPath |
procedure FillPath(const APath: TPathData;
const AOpacity: Single);
procedure FillPath(const APath: TPathData;
const AOpacity: Single;
const ABrush: TBrush); |
現在の TCanvas 上に、パスを塗りつぶし、表示します。
TPathData を、Fill プロパティで指定される現在のブラシで塗りつぶすには、FillPath を TCanvas の子孫で実装する必要があります。
APath パラメータは、描画される TPathData を示します。
AOpacity パラメータは、Fill 色の透明度を示します。
APath が空の場合、FillPath は何も行いません。 この場合、エラーを発生させません。
メモ： FillPath を呼び出す前に、APath が作成されていることを確認してください。 |
[Shapes]内のペイントボックス(PaintBox)を配置し、ClipChildernプロパティを True にしておきます。uses節に「UIConsts」を追記します。
OnPaintイベントハンドラを下記のようにしてみます。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
path : TPathData ;
begin
path := TPathData.Create;
path.MoveTo(PointF(20,130));
path.LineTo(PointF(130,130));
path.LineTo(PointF(75,20));
path.ClosePath;
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
FillPath(path,1.0);
end;
path.Free;
end; |
保存・ビルド（コンパイル）・実行をすると下図のようになります。
４頂点(20,130)〜(130,130)〜(75,20)〜(20,130)を結ぶ、透過率 1.0 （完全不透明状態）で青色の多角形を描画します。多角形塗り潰し(FillPolygon)と同様、パス図形描画(DrawPath)とは異なり、下記のように閉じていない図形（開図形）の場合は自動的に最終点と第１点が結ばれるようになります（自動的に閉図形となります）。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
path : TPathData ;
begin
path := TPathData.Create;
path.MoveTo(PointF(20,130));
path.LineTo(PointF(130,130));
path.LineTo(PointF(75,20));
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
FillPath(path,1.0);
end;
path.Free;
end; |
頂点数が０個・１個・２個の場合は、描画は行われません。３点あっても、点座標が重複していたり、３点が１直線上に並ぶような場合には、描画は行われません。
これまで図形描画系(Draw〜)では、Strokeブラシで描画していましたが、塗り潰しの場合には、Fillブラシの状態で塗り潰しを描画します。
Fill.Kind でブラシの種類（色、ビットマップ、グラデーション）、
を指定します（内容は Strokeブラシのブラシの種類と同じです）。
Fillブラシは、TBrush型ですので、Strokeブラシのような Thickness（線幅）、Dash（線種）、Cap（線端状態）、Join（結合部状態）のプロパティはありません。
例えば下記のようにすると、
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
path : TPathData ;
begin
path := TPathData.Create;
path.MoveTo(PointF(20,130));
path.LineTo(PointF(130,130));
path.LineTo(PointF(75,20));
path.ClosePath;
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkGradient;
Fill.Gradient.Color := claRed ;
Fill.Gradient.Color1 := claYellow ;
FillPath(path,1.0);
end;
path.Free;
end; |
下図のように描画されます。
第２引数 AOpacity 、透過率を指定する事が出来ます。
0.0（完全透明）〜1.0（完全不透明）の範囲内で指定します。
path := TPathData.Create ;
path.MoveTo(PointF(20,130));
path.LineTo(PointF(130,130));
path.LineTo(PointF(75,20));
path.ClosePath;
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
FillPath(path, 0.5);
end;
path.Clear ;
path.Data := 'M20,20 C120,20,120,20,120,120 L20,120 Z';
with Canvas do begin
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claRed;
FillPath(path, 0.5);
end;
path.Free ; |
とした場合は、下図のようになります。
パス図形のエッジ部分を描画したい場合には、DrawPath メソッドを利用しますが、描画する順番によって見え方が変わってきますので注意して下さい。
path := TPathData.Create ;
path.MoveTo(PointF(20,130));
path.LineTo(PointF(130,130));
path.LineTo(PointF(75,20));
path.ClosePath;
with Canvas do begin
Clear(claWhite);
Stroke.Kind := TBrushKind.bkSolid ;
Stroke.Color := claRed ;
Stroke.Thickness := 20 ;
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
DrawPath(path, 1.0);
FillPath(path, 1.0);
end;
path.Free ; |
のように、先にエッジ部分を描画した場合は
となり、
・・・
FillPath(path, 1.0);
DrawPath(path, 1.0);
・・・ |
のように、先に塗り潰し部分を描画した場合は
となります。
・・・
FillPath(path, 0.5);
DrawPath(path, 0.5);
・・・ |
のように透過させてみるとわかりますが、
エッジ部分の線幅は、線の両側方向へ太くなる仕組みになっていますから、線幅を指定した場合には塗り潰し部分と重なる部分が出てきます。通常は、塗り潰し部分→エッジ部分、の順で描画する事になると思われますが…。
放射グラデーションでのパス図形塗り潰しの例です。
path := TPathData.Create ;
path.MoveTo(PointF(20,130));
path.LineTo(PointF(130,130));
path.LineTo(PointF(75,20));
path.ClosePath;
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 + 40/(130-20) ;
Fill.Gradient.RadialTransform.RotationAngle := 0.0 ;
FillPath(path, 1.0);
end;
path.Free ; |
ビットマップイメージでのパス図形塗り潰しの例です。
実行プログラムと同じフォルダに画像「star.gif」を入れておく必要があります。無ければ例外が発生します。
path := TPathData.Create ;
path.MoveTo(PointF(20,130));
path.LineTo(PointF(130,130));
path.LineTo(PointF(75,20));
path.ClosePath;
with Canvas do begin
Clear(claWhite);
Fill.Kind := TBrushKind.bkBitmap;
Fill.Bitmap.WrapMode := TWrapMode.wmTile ;
Fill.Bitmap.Bitmap.LoadFromFile('star.gif');
FillPath(path, 1.0);
end;
path.Free ; |
パス図形に複数の図形を登録した場合、塗り潰しの重なり合った部分は、抜き図形のようになります。
path := TPathData.Create ;
path.MoveTo(PointF(20,130));
path.LineTo(PointF(130,130));
path.LineTo(PointF(75,20));
path.LineTo(PointF(20,130));
path.AddEllipse(RectF(10,10,140,80));
with Canvas do begin
Clear(claWhite);
Stroke.Kind := TBrushKind.bkSolid ;
Stroke.Color := claRed ;
Stroke.Thickness := 20 ;
Fill.Kind := TBrushKind.bkSolid ;
Fill.Color := claBlue ;
DrawPath(path, 1.0);
FillPath(path, 1.0);
end;
path.Free ; |
「path.ClosePath;」の代わりに「path.LineTo(PointF(20,130));」としましたが、「path.ClosePath;」にすると描画されない様子です。先に楕円を登録したあとに三角形登録で「path.ClosePath;」をする分については大丈夫のようです。
|
|
バッチファイル
ＢＡＳＩＣ
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Dehi入門編
>Delphi2010
>DelphiXE3
▲2014/05/30
2014/05/31
▼2014/06/01
シェアウェア
Script!World
データベース
|
