


 
 
 
 
 
 
 |
DelphiXE3 [FMX] ブラシ 2014/05/14 |
FireMonkey(FMX)にて、キャンバス(Canvas)に直線等の作図を行う際、色や線幅を指定するのに利用されるのが、ブラシ(Brush)です。VCLアプリケーションでは、線の色・線幅等はペン(Pen)・塗り潰し等はブラシ(Brush)、という具合に別れていましたが、FMXの場合は、ペン型(TPen)というものはなく、ブラシ型(TBrush)で統一されています。
[Shapes]内のペイントボックス(PaintBox)を配置し、OnPaintイベントハンドラを下記のようにしてみます。uses節に「UIConsts」を追記します。
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
begin
with Canvas do begin
Stroke.Color := claBlue ;
DrawLine(PointF(0,0), PointF(100,100), 1.0);
end;
end; |
保存・ビルド(コンパイル)・実行をすると下図のようになります。
キャンバス(Canvas)にはブラシ型の Strokeプロパティがあり、作図を行う前に色等をしておきます。上記では、Colorプロパティにて色(claBlue=青色)を指定しています。
bkBitmap | 外部ビットマップ イメージ |
bkGradient | グラデーション グラデーションの種類と色を設定できる |
bkNone | なし(透明塗り潰し) |
bkResource | 指定されたブラシのリソース |
bkSolid | 固定色 Color プロパティを使用して設定できる |
bkGrab | 指定コントロールのスナップショット(※無効) |
Stroke.Kind = bkSolid 時
 |
with Canvas do begin
StrokeThickness := 20 ;
Stroke.Kind := TBrushKind.bkSolid ;
Stroke.Color := claBlack ;
DrawLine(PointF(0,20), PointF(100,80), 1.0);
Stroke.Color := claBlue ;
DrawLine(PointF(30,0), PointF(70,100), 1.0);
end; |
 |
with Canvas do begin
StrokeThickness := 20 ;
Stroke.Kind := TBrushKind.bkSolid ;
Stroke.Color := $80000000 ;
DrawLine(PointF(0,20), PointF(100,80), 1.0);
Stroke.Color := claBlue ;
DrawLine(PointF(30,0), PointF(70,100), 0.5);
end; |
Stroke.Kind = bkNone 時 以降、手間なので with文は省略します
 |
Stroke.Color := claBlack ;
DrawLine(PointF(0,20), PointF(100,80), 1.0);
Stroke.Kind := TBrushKind.bkNone ;
Stroke.Color := claBlue ;
DrawLine(PointF(30,0), PointF(70,100), 1.0); |
描かない状態を描かせるという事は余り無いので、使用する事は無いかもしれません。
Stroke.Kind = bkBitmap 時
 |
StrokeThickness := 20 ;
Stroke.Color := claBlack ;
DrawLine(PointF(0,20), PointF(100,80), 1.0);
Stroke.Kind := TBrushKind.bkBitmap ;
Stroke.Bitmap.WrapMode := TWrapMode.wmTile ;
Stroke.Bitmap.Bitmap.LoadFromFile('star.gif');
DrawLine(PointF(10,10), PointF(10,100), 1.0); |
 |
StrokeThickness := 20 ;
Stroke.Color := claBlack ;
DrawLine(PointF(0,20), PointF(100,80), 1.0);
Stroke.Kind := TBrushKind.bkBitmap ;
Stroke.Bitmap.WrapMode := TWrapMode.wmTileOriginal ;
Stroke.Bitmap.Bitmap.LoadFromFile('star.gif');
DrawLine(PointF(10,10), PointF(10,100), 1.0); |
 |
StrokeThickness := 20 ;
Stroke.Color := claBlack ;
DrawLine(PointF(0,20), PointF(100,80), 1.0);
Stroke.Kind := TBrushKind.bkBitmap ;
Stroke.Bitmap.WrapMode := TWrapMode.wmTileStretch ;
Stroke.Bitmap.Bitmap.LoadFromFile('star.gif');
DrawLine(PointF(10,10), PointF(10,100), 1.0); |
結構、謎仕様なので、基本的には「wmTile」で使うのが通例でしょうか。
Stroke.Kind = bkGrab 時
|
Control に スナップショットするコントトール名を指定するようですが、どうも想定したように動作しません。
DelphiXE4 では、この指定はなくなっています。 |
Stroke.Kind = bkGradient 時
 |
StrokeThickness := 20 ;
Stroke.Color := claBlack ;
DrawLine(PointF(0,20), PointF(100,80), 1.0);
Stroke.Kind := TBrushKind.bkGradient ;
Stroke.Gradient.Color := claRed ;
Stroke.Gradient.Color1 := claYellow ;
DrawLine(PointF(20,0), PointF(80,100), 1.0); |
Stroke.Kind = bkResource 時
 |
var
myBrush: TBrushObject;
begin
myBrush := TBrushObject.Create(Self);
myBrush.Brush.Kind:=TBrushKind.bkGradient;
myBrush.Brush.Gradient.Color := claGreen ;
myBrush.Brush.Gradient.Color1:= claRed ;
with Canvas do begin
StrokeThickness := 20 ;
Stroke.Color := claBlack ;
DrawLine(PointF(0,20), PointF(100,80),1);
Stroke.Kind := TBrushKind.bkResource ;
Stroke.Resource.StyleResource := myBrush;
DrawLine(PointF(20,0), PointF(80,100),1);
end;
myBrush.Free;
end; |
(ヘルプより)
FMX.Types.TBrush.Resource |
ブラシのパターンを定義するリソースを示します。
Resource は、ブラシのパターンや色を定義するために使用される、TBrushResource オブジェクトを指しています。TBrushResource.StyleResource プロパティを TBrushObject に設定します。これには、パターンの特性(色、種類、グラデーションなど)が保持されています。TBrushObject は、複数のコントロールを同じように塗るのに使用できます。
メモ: Resource プロパティを適切に使用するには、Kind プロパティを bkResource に設定する必要があります。 |
キャンバス Canvas の Stroke プロパティは、ブラシ型ですが、TBrush型ではなく、TStrokeBrush型となっています。この TStrokeBrush は、TBrush から派生したクラスですが、TBrush の機能を少し拡張したクラスです。
Stroke.Thickness プロパティは線幅を指定します。
1(デフォルト) |  |
1.5 |  |
2 |  |
3 |  |
5 |  |
10 |  |
20 |  |
30 |  |
ピクセル(ドット)値で指定します。Single型ですので小数点以下の指定も出来、中間色っぽい補正が行われるようです。
Stroke.Cap プロパティは線端状態を指定します。
TStrokeCap.scFlat
0 (デフォルト) |  |
TStrokeCap.scRound
1 |  |
Stroke.Dash プロパティは線種を指定します。
TStrokeDash.sdSolid
0 (デフォルト) |  |
TStrokeDash.sdDash
1 |  |
TStrokeDash.sdDot
2 |  |
TStrokeDash.sdDashDot
3 |  |
TStrokeDash.sdDashDotDot
4 |  |
TStrokeDash.sdCustom
5 | (任意) |
上記は端点状態がフラットの場合です。
最後のカスタムについでですが、ヘルプでは、
FMX.Types.TCanvas.SetCustomDash |
アウトラインのスタイルをカスタマイズします。
SetCustomDash を使用すると、現在の TCanvas 上に形状を描画するための、新しい線のスタイルを作成することができます。
Dash パラメータは、要素の長さと、要素間の空間を表す、値の配列です。配列の項目の値は交互になっています。ある項目が要素の長さを表すのなら、その次の項目は、次の要素までの空間を表します。形の輪郭は、Dash が指定するルールに一致する、一連のシーケンスから構成されます。
Offset パラメータは、ダッシュ シーケンスにおいて、ストロークが開始される位置からどの程度離れているかを示します。 |
とありますが、一連のシーケンスというのがどういう風に書くのか等も含め、よく分かりませんでした。
Stroke.Join プロパティは線と線の結合部をどのように描画するかを指定します。直線は直線1本だけですのでこのプロパティは意味はないですが、四角形等では影響があります。
TStrokeJoin.sjMiter
0 (デフォルト) |  |
TStrokeJoin.sjRound
1 |  |
TStrokeJoin.sjBevel
2 |  |
|
|
バッチファイル
BASIC
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Dehi入門編
>Delphi2010
>DelphiXE3
▲2014/05/13
2014/05/14
▼2014/05/15
シェアウェア
Script!World
データベース
|