


 
 
 
 
 
 
 |
DelphiXE3 [FMX] 直線(Line)2013/12/17 |
前回は [Viewports]内の「3Dビューポート」(Viewport3D)について見てみました。[Viewports]内はこの1つのみですので次に行きます。次の[3D Scene]内については、3Dの機能ですので、「3D FireMonkey アプリケーション」の際に記述する事にします。今回から、更に次の、[Shapes]内を見ていきたいと思います。
[Shapes]内の「直線」(Line)について見てみます。
[Shapes]内
FMX |  |
ヘルプより。
TLine は 2 次元の直線を定義したものです。TControl を継承しており、コントロールを作成するためのスタイルで使用できます。
描画する直線の端点は、TLine オブジェクトの以下のプロパティで定義されます。
・ShapeRect と LineType によって描画対象の直線分が定義されます。
・LineType では線分の方向が定義されます。
・この線分とローカルの四角形の交点によって、
直線分の端点が定義されます。
・RotationCenter では描画する直線を取得するために直線分を回転
させるときの回転軸が、RotationAngle ではその回転角が、
それぞれ定義されます。
メモ:拡大縮小を行うと、倍率に応じて直線の長さが変わるだけでなく、
直線の StrokeThickness もそれぞれの軸の倍率に応じて変わり
ます。
親の TControl は、Paint メソッドを使って TLine を描画します。
TLine を描画する際に、Paint メソッドでは、TLine オブジェクトに定義された Stroke、StrokeThickness、StrokeCap、StrokeDash、StrokeJoin の各プロパティを持つ描画ペンを使用します。 |
 |  |


 |
LineType
形状の四角形の内部に直線を配置する方法を示します。
LineType の値は、TLineType 型で定義される次の定数の 1 つになります: ltDiagonal、ltTop、ltLeft。
デフォルトは ltDiagonal で、形状の四角形の対角線として描画します。 |
Stroke
グラフィックス プリミティブの直線や形状の輪郭を描画する際に使用される、色やパターンを決定します。
Stroke の値は FMX.Types.TBrush オブジェクトです。 |
StrokeCap
直線や曲線の終端を描画するために使用される、グラフィック スタイルを示します。
取り得る値は FMX.Types.TStrokeCap 型で定義されている、scFlat および scRound 定数です。
デフォルトは scFlat -- 四角形の線の終端です。
曲線または直線には、複数の線要素が含まれている場合があります。 StrokeDash が sdSolid ではない場合、StrokeCap は各線要素の終端に影響を及ぼします。 |
StrokeDash
直線または形状の曲線の、一点鎖線スタイルを示します。
曲線または直線には、複数のセグメント(ダッシュとドットのグループ)を含めることができ、異なる長さおよびそのセグメント間のスペースで構成されます。
取り得る値は sdSolid、sdDash、sdDot、sdDashDot、sdDashDotDot、または sdCustom 定数で、FMX.Types.TStrokeDash 型で定義されています。
デフォルトは sdSolid で、単一の実線です。
新しいカスタム スタイルを作成するには、FMX.Types.TCanvas.SetCustomDash を使用します。
StrokeDash が sdSolid でなかった場合、StrokeCap は、曲線の各線のセグメントの終端がに影響する点に注意してください。 |
StrokeJoin
直線のセグメント、形状曲線のセグメント、またはパスのセグメントをつなぐ、結合点のスタイルを示します。
取り得る値は、sjMiter、sjRound、sjBevel 定数で、FMX.Types.TStrokeJoin 型で定義されています。
デフォルトは sjMiter で、線のセグメント群を、セグメント間でシャープな角をなめらかにすることなしに、結合します。 |
StrokeThickness
直接または形の曲線を描画する、ストローク アウトラインの幅をピクセルで示します。 |
|
LineType プロパティは下記のようになります。
ltDiagonal
(デフォルト) |  |
ltTop |  |
ltLeft |  |
このプロパティで「/」という線は指定出来ないようですね。
StrokeThickness プロパティは線幅を指定します。
1(デフォルト) |  |
1.5 |  |
2 |  |
3 |  |
5 |  |
10 |  |
20 |  |
30 |  |
ピクセル(ドット)値で指定します。Single型ですので小数点以下の指定も出来、中間色っぽい補正が行われるようです。
この値は、Stroke.Thickness プロパティと同じになるようです。
StrokeCap プロパティは線端状態を指定します。
FMX.Types.TStrokeCap.scFlat
0 (デフォルト) |  |
FMX.Types.TStrokeCap.scRound
1 |  |
この値は、Stroke.Cap プロパティと同じになるようです。
StrokeDash プロパティは線種を指定します。
FMX.Types.TStrokeDash.sdSolid
0 (デフォルト) |  |
FMX.Types.TStrokeDash.sdDash
1 |  |
FMX.Types.TStrokeDash.sdDot
2 |  |
FMX.Types.TStrokeDash.sdDashDot
3 |  |
FMX.Types.TStrokeDash.sdDashDotDot
4 |  |
FMX.Types.TStrokeDash.sdCustom
5 | (任意) |
この値は、Stroke.Dash プロパティと同じになるようです。
上記は端点状態がフラットの場合です。
最後のカスタムについでですが、ヘルプでは、
FMX.Types.TCanvas.SetCustomDash |
アウトラインのスタイルをカスタマイズします。
SetCustomDash を使用すると、現在の TCanvas 上に形状を描画するための、新しい線のスタイルを作成することができます。
Dash パラメータは、要素の長さと、要素間の空間を表す、値の配列です。配列の項目の値は交互になっています。ある項目が要素の長さを表すのなら、その次の項目は、次の要素までの空間を表します。形の輪郭は、Dash が指定するルールに一致する、一連のシーケンスから構成されます。
Offset パラメータは、ダッシュ シーケンスにおいて、ストロークが開始される位置からどの程度離れているかを示します。 |
とありますが、一連のシーケンスというのがどういう風に書くのか等も含め、よく分かりませんでした。
StrokeJoin プロパティは線と線の結合部をどのように描画するかを指定します。といっても、直線は直線1本だけですので、このプロパティは意味はないと思われます。
FMX.Types.TStrokeJoin.sjMiter
0 (デフォルト) |  |
FMX.Types.TStrokeJoin.sjRound
1 |  |
FMX.Types.TStrokeJoin.sjBevel
2 |  |
この値は、Stroke.Join プロパティと同じになるようです。
直線の色等は、Stroke プロパティにて指定します。
Stroke プロパティは、ブラシ TBrush型ですが、ブラシの種類は、Stroke.Kind プロパティにて指定します。
bkBitmap | 外部ビットマップ イメージ |
bkGradient | グラデーション グラデーションの種類と色を設定できる |
bkNone | なし(透明塗り潰し) |
bkResource | 指定されたブラシのリソース |
bkSolid | 固定色 Color プロパティを使用して設定できる |
bkGrab | 指定コントロールのスナップショット(※無効) |
Stroke.Kind = bkSolid 時
 | Line1.Stroke.Color := #FF000000(Black、α=255) |
 |
Line1.Stroke.Color := #80000000(Black、α=128)
透過させたい場合は、恒例の通り、Opacity プロパティを指定する事でも可能です。 |
Stroke.Kind = bkNone 時
 | 透明状態になります。 |
Stroke.Kind = bkBitmap 時
 |
Bitmap は 画像「 」を使用
WrapMode = wmTile |
 | WrapMode = wmTileOriginal |
 | WrapMode = wmTileStretch |
Stroke.Kind = bkGrab 時
 |
Control に スナップショットするコントトール名を指定するようですが、どうも想定したように動作せず、透明状態になります。
DelphiXE4 では、この指定はなくなっています。 |
Stroke.Kind = bkGradient 時
 | 初期状態 |
 |
初期状態から、下記画面を出してそのまま[OK]
 |
Stroke.Kind = bkResource 時
 |
フォーム起動時のイベントハンドラで
procedure TForm1.FormShow(Sender: TObject);
var
myBrush: TBrushObject;
begin
myBrush := TBrushObject.Create(Self);
myBrush.Brush.Kind:=TBrushKind.bkGradient;
myBrush.Brush.Gradient.Color := $FF0000FF;
myBrush.Brush.Gradient.Color1:= $FFFF0000;
Line1.Stroke.Kind :=TBrushKind.bkResource;
Line1.Stroke.Resource.StyleResource
:= myBrush;
end; |
のようにした場合 |
(ヘルプより)
FMX.Types.TBrush.Resource |
ブラシのパターンを定義するリソースを示します。
Resource は、ブラシのパターンや色を定義するために使用される、TBrushResource オブジェクトを指しています。TBrushResource.StyleResource プロパティを TBrushObject に設定します。これには、パターンの特性(色、種類、グラデーションなど)が保持されています。TBrushObject は、複数のコントロールを同じように塗るのに使用できます。
メモ: Resource プロパティを適切に使用するには、Kind プロパティを bkResource に設定する必要があります。 |
基本的には、画面デザインをする際に用いるコンポーネントで、例えばドローソフトやCADソフト等での直線データの描画に使う、というような事はしないと思われます。ですがおそらく、Strokeプロパティの指定等は、何かのキャンバスへの描画と同等だと思われますから、このコンポーネントにより、この辺りの使い方に慣れておくのも良いかと思われます。
|
|
バッチファイル
BASIC
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Delphi入門編
>Delphi2010
>DelphiXE3
▲2013/12/16
2013/12/17
▼2013/12/18
シェアウェア
Script!World
データベース
|