AFsoft WebSite (AFsoft.JP)

DelphiXE3　[FMX] 吹き出し四角形（CalloutRectangle）2013/12/28

　
前回は [Shapes]内の「ペイントボックス」（PaintBox）について見てみました。
今回は、同じく[Shapes]内の「吹き出し四角形」（CalloutRectangle）について見てみます。
　【吹き出しパネル(CalloutPanel)】　【四角形（Rectangle）】
　
　
[Shapes]内

FMX

　
ヘルプより。

4辺のいずれか1つに三角形の "突起" の付いた四角形で、主に TCalloutPanel のレンダリングに使用されます。
　
TCalloutRectangle は TRectangle を継承しているため、TCalloutRectangle には、四角形そのものの形状を定義するプロパティ（Corners、CornerType、Sides、XRadius、YRadius など）とメソッドがすべて用意されています。
　
吹き出しはリードコラムの形をとることが多く、その場合、文書から抜粋された特定のテキストのコピーが、大きいフォント、異なる書体、色の付いたボックス、図案化された引用符などを使って、注意を引くように表示されます。たとえば、ボックスで囲まれたテキストが、関心を呼ぶさまざまな要素を参照しており、各ボックスがそれぞれの要素を指す線を付けて描画されるといったことです。
　
TCalloutRectangle は、4 辺のいずれか 1 つに二等辺三角形の付いた四角形で、他の何かを指すのに使用されます。この三角形はオブジェクトの境界四角形に含まれています。三角形の長さが長くなればなるほど、四角形は短くなり、その逆もまた同様です。三角形の長さを変えても四角形を同じサイズに保つには、三角形がどの辺に現れるかに応じて、オブジェクトの高さまたは幅を変更する必要があります。

Corners

四角形のどの角が、CornerType、XRadius、および YRadius プロパティによって影響を受けるかを示します。
Corners は、FMX.Types.TCorner 型で定義された一連の定数です。指定できる定数は次のとおりです：
　crTopLeft
　crTopRight
　crBottomLeft
　crBottomRight
　
SetCorners 関数を使用すると、どの角をカスタマイズできるかを定義できます。すべての角を選択する場合には、AllCorners 定数を使用してください。デフォルトでは、4 つすべての角が選択されます。

CornerType

四角形の角のタイプを示します。
CornerType の値は、TCornerTypeで次の定数として定義されています：
　ctRound
　ctBevel
　ctInnerRound
　ctInnerLine

Sides

四角形のどの辺を表示するのかを示します。
side は、2 つの隣合わせの角またはカスタマイズ角の終端の間の、四角形境界部分です。カスタマイズ角の終端は、XRadius および YRadius で定義されます。角のカスタマイズは、Corners のセットの中に含まれている角に適用されます。
Sides は、FMX.Types.TSide 型で定義された次の一連の定数です：
　sdTop、sdLeft
　sdBottom、sdRight
　
SetSides を使用すると、どの辺を、表示する Sides のセットに含めるのかを定義することができます。デフォルトでは、四角形のすべての辺が表示されます（Sides = AllSides）。

XRadius

四角形の水平辺上での、角からカスタマイズ角の始点への距離を示します。
　
XRadius を定義するには、SetXRadius を使用します。
　
XRadius の取り得る最大値は、四角形の幅の半分です。 XRadius がこの限界を超えた場合は、width/2 が使用されます。

YRadius

四角形の垂直辺上での、角からカスタマイズ角の始点への距離を示します。
　
YRadius を定義するには、SetYRadius を使用します。
　
YRadius の取り得る最大値は、四角形の高さの半分です。 YRadius がこの限界を超えた場合は、height/2 が使用されます。

Fill

形の背景を塗りつぶすのに使用する、色とパターンを決定します。
Fill の値は FMX.Types.TBrush オブジェクトです。これは、形の背景を塗りつぶすための、グラデーション、ブラシパターン、ブラシ色、不透明度、他のパラメータを定義することができます。

Stroke

グラフィックスプリミティブの直線や形状の輪郭を描画する際に使用される、色やパターンを決定します。
　
Stroke の値は FMX.Types.TBrush オブジェクトです。

StrokeDash

直線または形状の曲線の、一点鎖線スタイルを示します。
　
曲線または直線には、複数のセグメント（ダッシュとドットのグループ）を含めることができ、異なる長さおよびそのセグメント間のスペースで構成されます。
　
取り得る値は sdSolid、sdDash、sdDot、sdDashDot、sdDashDotDot、または sdCustom 定数で、FMX.Types.TStrokeDash 型で定義されています。
　
デフォルトは sdSolid で、単一の実線です。
新しいカスタムスタイルを作成するには、FMX.Types.TCanvas.SetCustomDash を使用します。
　
StrokeDash が sdSolid でなかった場合、StrokeCap は、曲線の各線のセグメントの終端がに影響する点に注意してください。

StrokeThickness

直接または形の曲線を描画する、ストロークアウトラインの幅をピクセルで示します。

StrokeCap

直線や曲線の終端を描画するために使用される、グラフィックスタイルを示します。
　
取り得る値は FMX.Types.TStrokeCap 型で定義されている、scFlat および scRound 定数です。
デフォルトは scFlat -- 四角形の線の終端です。
曲線または直線には、複数の線要素が含まれている場合があります。 StrokeDash が sdSolid ではない場合、StrokeCap は各線要素の終端に影響を及ぼします。

StrokeJoin

直線のセグメント、形状曲線のセグメント、またはパスのセグメントをつなぐ、結合点のスタイルを示します。
　
取り得る値は、sjMiter、sjRound、sjBevel 定数で、FMX.Types.TStrokeJoin 型で定義されています。
　
デフォルトは sjMiter で、線のセグメント群を、セグメント間でシャープな角をなめらかにすることなしに、結合します。

CalloutLength

吹き出しのポインタの長さ。
　
TCalloutRectangle は、吹き出しのポインタを、その辺のうちの 1 つの上に、二等辺三角形としてレンダリングします。 CalloutLength は、この三角形の高さです。この三角形は、TCalloutRectangle オブジェクトの境界四角形 ShapeRect 内に含まれます。このため、CalloutLength が長くなるにつれて、吹き出し四角形自身の高さ（または幅）は小さくなり、逆もまた然りです。三角形の長さが変更される際に境界四角形を同じサイズに維持するには、CalloutLength が、三角形が現れる側に応じて、吹き出し四角形 TCalloutRectangle 自身の高さまたは幅を変更する必要があります。

CalloutPosition

四角形の吹き出しのポインタを表示する側を指定します。
　
TCalloutRectangle は、吹き出しのポインタを、4 方向のうちの 1 つの上に、二等辺三角形としてレンダリングします。
　
CalloutPosition を、TCalloutPosition で定義されている cpTop、cpLeft、cpBottom、または cpRight の定数のうちの 1 つに設定して、吹き出しのポインタが現れる側を定義します。
　
デフォルトでは、吹き出しのポインタは、上側に現れます
（CalloutPosition = cpTop）。

CalloutWidth

吹き出しのポインタの幅。
　
TCalloutRectangle は、吹き出しのポインタを、その辺のうちの 1 つの上に、二等辺三角形としてレンダリングします。 CalloutWidth は、三角形のベースの長さです。

CalloutOffset

吹き出しポインタの位置を、それが表示される側の中央または端を基準に表します。
　
TCalloutRectangle は、吹き出しのポインタを、その辺のうちの1つの上に、二等辺三角形としてレンダリングします。 CalloutPosition は、三角形が現れる側を定義します。
　
CalloutOffset は、次の条件に従って実装された三角形のオフセットです。
　
CalloutOffset がゼロの場合、三角形は指定された側の中央に配置。
CalloutOffset が正数の場合、三角形の角に対して最も近い吹き出しポインタの頂点が、次の側の上での CalloutOffset オフセットを持ちます：
　cpTop
-- 左上隅から右へのオフセット。
　cpLeft
-- 左上隅から下へのオフセット。
　cpRight
-- 右上隅から下へのオフセット。
　cpBottom
-- 左下隅から右へのオフセット。
CalloutOffset が負数の場合、三角形の角に対して最も近い吹き出しポインタの頂点が、次の側の上での CalloutOffset オフセットを持ちます：
　cpTop
-- 右上隅から左へのオフセット。
　cpLeft
-- 左下隅から上へのオフセット。
　cpRight
-- 右下隅から上へのオフセット。
　cpBottom
-- 右下隅から左へのオフセット。

　
　
CornerType プロパティは下記のようになります。

ctRound （デフォルト）
ctBevel
ctInnerRound
ctInnerLine

XRadius プロパティ、YRadius プロパティ値をそれぞれ「15」にしました。
　
StrokeThickness プロパティは線幅を指定します。

1（デフォルト）
5
10

ピクセル（ドット）値で指定します。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 プロパティと同じになるようです。
上記は端点状態がフラットの場合です。
　
StrokeJoin プロパティは線と線の結合部をどのように描画するかを指定します。

FMX.Types.TStrokeJoin.sjMiter 0　（デフォルト）
FMX.Types.TStrokeJoin.sjRound 1
FMX.Types.TStrokeJoin.sjBevel 2

この値は、Stroke.Join プロパティと同じになるようです。
　
　
線の色等は、Stroke プロパティにて指定します。
内部の塗り潰しの色等は、Fill プロパティにて指定します。
Stroke、Fill 両プロパティは、ブラシ TBrush型ですが、ブラシの種類は、Stroke.Kind、Fill.Kind プロパティにて指定します。

bkBitmap	外部ビットマップイメージ
bkGradient	グラデーション　グラデーションの種類と色を設定できる
bkNone	なし（透明塗り潰し）
bkResource	指定されたブラシのリソース
bkSolid	固定色　Color プロパティを使用して設定できる
bkGrab	指定コントロールのスナップショット（※無効）

　
　
Stroke.Kind ＝ bkSolid 時

	Color := #FF000000（Black、α=255）
	Color := #80000000（Black、α=128）　透過させたい場合は、恒例の通り、Opacity プロパティを指定する事でも可能です（但し、塗り潰し部分も含めて全体が透過されます）。

　
Stroke.Kind ＝ bkNone 時

透明状態になります。

　
Stroke.Kind ＝ bkBitmap 時

	Bitmap は画像「」を使用 WrapMode ＝ wmTile
	WrapMode ＝ wmTileOriginal
	WrapMode ＝ wmTileStretch

　
Stroke.Kind ＝ bkGrab 時

Control にスナップショットするコントトール名を指定するようですが、どうも想定したように動作せず、透明状態になります。

　
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;
　CalloutRectangle2.Stroke.Kind
　　:= TBrushKind.bkResource;
　CalloutRectangle2.Stroke.Resource.StyleResource
　　:= myBrush;
end;

のようにした場合

（ヘルプより）

FMX.Types.TBrush.Resource

ブラシのパターンを定義するリソースを示します。
　
Resource は、ブラシのパターンや色を定義するために使用される、TBrushResource オブジェクトを指しています。TBrushResource.StyleResource プロパティを TBrushObject に設定します。これには、パターンの特性（色、種類、グラデーションなど）が保持されています。TBrushObject は、複数のコントロールを同じように塗るのに使用できます。
　
メモ： Resource プロパティを適切に使用するには、Kind プロパティを bkResource に設定する必要があります。

　
　
Fill.Kind ＝ bkSolid 時

	Color := #FF000000（Black、α=255）
	Color := #80000000（Black、α=128）　透過させたい場合は、恒例の通り、Opacity プロパティを指定する事でも可能です（但し、エッジ部分も含めて全体が透過されます）。

　
Fill.Kind ＝ bkNone 時

透明状態になります。

　
Fill.Kind ＝ bkBitmap 時

	Bitmap は画像「」を使用 WrapMode ＝ wmTile
	WrapMode ＝ wmTileOriginal
	WrapMode ＝ wmTileStretch

　
Fill.Kind ＝ bkGrab 時

Control にスナップショットするコントトール名を指定するようですが、どうも想定したように動作せず、透明状態になります。

　
Fill.Kind ＝ bkGradient 時

	初期状態
	初期状態から、下記画面を出してそのまま[OK]

　
Fill.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;
　CalloutRectangle2.Fill.Kind
　　:= TBrushKind.bkResource;
　CalloutRectangle2.Fill.Resource.StyleResource
　　:= myBrush;
end;

のようにした場合

バッチファイル
ＢＡＳＩＣ
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Delphi入門編
>Delphi2010
>DelphiXE3
▲2013/12/27
　2013/12/28
▼2013/12/29
　
シェアウェア
Script!World
データベース
　