AFsoft WebSite(エーエフソフト・ウェブサイト)
 

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

プログラミングについて
ホームページについて
キャドについて
電子カタログについて
書籍・雑誌
イベント
リンク集
DelphiXE3 [FMX] 多角形塗り潰し 2014/05/30
 
前回は、楕円弧塗り潰し(FillArc)について記述しました。今回は、多角形塗り潰し(FillPolygon)について述べていきます。
 
各引数の内容は、多角形描画(DrawPolygon)と同じです。
 
以下、ヘルプより
TCanvas.
FillPolygon
procedure FillPolygon(const Points: TPolygon;
 const AOpacity: Single);
現在の TCanvas 上に、多角形を塗りつぶし、表示します。
 
FillPolygon は、TPolygon 頂点間の TPathData で表される多角形を、Fill プロパティで指定される現在のブラシで塗りつぶします。
 
Points パラメータは、塗りつぶされる TPolygon の頂点を示します。
 
AOpacity パラメータは、Fill 色の透明度を示します。
 
Points 配列の最初の点と最後の点が一致しない場合、多角形の表面は、Points 配列の最初の点と最後の点の間の辺で閉じられます。
 
Points 配列が空の場合、FillPolygon は何も行いません。 この場合、エラーを発生させません。
ヘルプ内に「TPathData で表される多角形を」とありますが、この機能では、TPathData は関係無いと思われます。
 
[Shapes]内のペイントボックス(PaintBox)を配置し、ClipChildernプロパティを True にしておきます。uses節に「UIConsts」を追記します。

OnPaintイベントハンドラを下記のようにしてみます。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
 pt : TPolygon ;
begin
 SetLength(pt, 4);
 pt[0] := PointF(10,20);
 pt[1] := PointF(140,20);
 pt[2] := PointF(75,130);
 pt[3] := PointF(10,20);
 with Canvas do begin
  Clear(claWhite);
  Fill.Kind := TBrushKind.bkSolid ;
  Fill.Color := claBlue ;
  FillPolygon(Pt,1.0);
 end;
 pt := nil ;
end;
保存・ビルド(コンパイル)・実行をすると下図のようになります。

 
4頂点(10,20)〜(140,20)〜(75,130)〜(10,20)を結ぶ、透過率 1.0 (完全不透明状態)で青色の多角形を描画します。多角形描画(DrawPolygon)とは異なり、下記のように閉じていない図形(開図形)の場合は自動的に最終点と第1点が結ばれるようになります(自動的に閉図形となります)。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
 pt : TPolygon ;
begin
 SetLength(pt, 3);
 pt[0] := PointF(10,20);
 pt[1] := PointF(140,20);
 pt[2] := PointF(75,130);
 with Canvas do begin
  Clear(claWhite);
  Fill.Kind := TBrushKind.bkSolid ;
  Fill.Color := claBlue ;
  FillPolygon(Pt,1.0);
 end;
 pt := nil ;
end;
 
頂点数が0個・1個・2個の場合は、描画は行われません。3点あっても、点座標が重複していたり、3点が1直線上に並ぶような場合には、描画は行われません。
 
これまで図形描画系(Draw〜)では、Strokeブラシで描画していましたが、塗り潰しの場合には、Fillブラシの状態で塗り潰しを描画します。
Fill.Kind でブラシの種類(色、ビットマップ、グラデーション)、
を指定します(内容は Strokeブラシのブラシの種類と同じです)
Fillブラシは、TBrush型ですので、Strokeブラシのような Thickness(線幅)、Dash(線種)、Cap(線端状態)、Join(結合部状態)のプロパティはありません。
 
例えば下記のようにすると、
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
 pt : TPolygon ;
begin
 SetLength(pt, 3);
 pt[0] := PointF(10,20);
 pt[1] := PointF(140,20);
 pt[2] := PointF(75,130);
 with Canvas do begin
  Clear(claWhite);
  Fill.Kind := TBrushKind.bkGradient;
  Fill.Gradient.Color := claRed ;
  Fill.Gradient.Color1 := claYellow ;
  FillPolygon(Pt,1.0);
 end;
 pt := nil ;
end;
下図のように描画されます。

 
 
第2引数 AOpacity 、透過率を指定する事が出来ます。
0.0(完全透明)〜1.0(完全不透明)の範囲内で指定します。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
var
 pt1, pt2 : TPolygon ;
begin
 SetLength(pt1, 3);
 pt1[0] := PointF(20,20);
 pt1[1] := PointF(100,20);
 pt1[2] := PointF(60,100);
 
 SetLength(pt2, 4);
 pt2[0] := PointF(80,130);
 pt2[1] := PointF(120,130);
 pt2[2] := PointF(80,40);
 pt2[3] := PointF(40,130);
 
 with Canvas do begin
  Clear(claWhite);
  Fill.Kind := TBrushKind.bkSolid ;
  Fill.Color := claBlue ;
  FillPolygon(Pt1, 0.5);
  Fill.Color := claRed ;
  FillPolygon(Pt2, 0.5);
 end;
 pt1 := nil ;
 pt2 := nil ;
end;
とした場合は、下図のようになります。

 
 
多角形のエッジ部分を描画したい場合には、DrawPolygon メソッドを利用しますが、描画する順番によって見え方が変わってきますので注意して下さい。
SetLength(pt, 4);
pt[0] := PointF(20,20);
pt[1] := PointF(130,20);
pt[2] := PointF(75,130);
pt[3] := PointF(20,20);
with Canvas do begin
 Clear(claWhite);
 Stroke.Kind := TBrushKind.bkSolid ;
 Stroke.Color := claRed ;
 Stroke.Thickness := 20 ;
 Fill.Kind := TBrushKind.bkSolid ;
 Fill.Color := claBlue ;
 DrawPolygon(Pt,1.0);
 FillPolygon(Pt,1.0);
end;
pt := nil ;
のように、先にエッジ部分を描画した場合は

となり、
・・・
FillPolygon(Pt,1.0);
DrawPolygon(Pt,1.0);
・・・
のように、先に塗り潰し部分を描画した場合は

となります。
・・・
FillPolygon(Pt,0.5);
DrawPolygon(Pt,0.5);
・・・
のように透過させてみるとわかりますが、

エッジ部分の線幅は、線の両側方向へ太くなる仕組みになっていますから、線幅を指定した場合には塗り潰し部分と重なる部分が出てきます。通常は、塗り潰し部分→エッジ部分、の順で描画する事になると思われますが…。
 
 
放射グラデーションでの多角形塗り潰しの例です。
SetLength(pt, 3);
pt[0] := PointF(10,20);
pt[1] := PointF(140,20);
pt[2] := PointF(75,130);
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 + 10/(140-10) ;
 Fill.Gradient.RadialTransform.RotationCenter.Y
  := 0.5 + 20/(130-20) ;
 Fill.Gradient.RadialTransform.RotationAngle := 0.0 ;
 FillPolygon(Pt,1.0);
end;
pt := nil ;
 

放射点は、三角形の境界ボックスの中心としていますが、重心点の方が良い等あるかもしれません。
 
 
ビットマップイメージでの多角形塗り潰しの例です。
実行プログラムと同じフォルダに画像「star.gif」を入れておく必要があります。無ければ例外が発生します。
SetLength(pt, 3);
pt[0] := PointF(10,20);
pt[1] := PointF(140,20);
pt[2] := PointF(75,130);
with Canvas do begin
 Clear(claWhite);
 Fill.Kind := TBrushKind.bkBitmap;
 Fill.Bitmap.WrapMode := TWrapMode.wmTile ;
 Fill.Bitmap.Bitmap.LoadFromFile('star.gif');
 FillPolygon(Pt,1.0);
end;
pt := nil ;
 

 
 
バッチファイル
BASIC
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Dehi入門編
>Delphi2010
>DelphiXE3
▲2014/05/29
 2014/05/30
▼2014/05/31
 
シェアウェア
Script!World
データベース
 
お問い合わせ 
本サイトはリンクフリーです
リンクバナー
(C)Copyright 1999-2015. By AFsoft All Rights Reserved.