AFsoft WebSite (AFsoft.JP)

DelphiXE3　[FMX] 折り畳み効果（WrapEffect）2013/11/29

　
前回は [Effects]内の「波効果」（WaveEffect）について見てみました。次は同じく [Effects]内の「折り畳み効果」（WrapEffect）を見てみます。
　
　
[Effects]内

FMX

　
ヘルプより。

TWrapEffect は、ビジュアルオブジェクトのテクスチャを 2 本の曲線に沿って折りたたむ効果を作成するためのクラスです。詳細は、「TImageFXEffect」および「FireMonkey の画像効果」を参照してください。
　
TWrapEffect ではベジエ曲線を使用します。ベジエ曲線は 4 つの点で定義されます。
　
TWrapEffect のプロパティでは、曲線ごとに、終了点、開始点、2 つの制御点を定義します。折りたたみは、画像を左端と右端から曲げることで適用されます。
LeftControl1、LeftControl2、LeftEnd、LeftStart の各プロパティは、テクスチャの左辺で使用される曲線を定義する点を指定します。
RightControl1、RightControl2、RightEnd、RightStart の各プロパティは、テクスチャの右辺で使用される曲線を定義する点を指定します。

LeftStart

ラッピングに使用される左 Bezier 曲線の開始点の水平座標を決定するための値を示します。
LeftStart は System.Single 値で、0.00 から 1.00 の範囲の値を取ります。
LeftControl1 および LeftStart プロパティで決定される、曲線の第 1 制御点および開始点は、ラップされるイメージの上辺の上のみに置かれます。開始点の垂直座標は、ラップされるイメージの上辺の垂直座標と同じです。 LeftControl1 および LeftStart プロパティがアニメーションされる場合、曲線の第 1 制御点および開始点は、ラップされるイメージの上辺に沿って移動します。
LeftStart が明示的に設定されていない場合、0 に等しいと見なされます。

LeftEnd

ラッピングに使用される左 Bezier 曲線の終了点の水平座標を決定するための値を示します。
LeftEnd は System.Single 値で、0.00 から 1.00 の範囲の値を取ります。
LeftControl2 および LeftEnd プロパティで決定される、曲線の第 2 制御点および終了点は、ラップされるイメージの下辺の上のみに置かれます。終了点の垂直座標は、ラップされるイメージの下辺の垂直座標と同じです。 LeftControl2 および LeftEnd プロパティがアニメーションされる場合、曲線の第 2 制御点および終了点は、ラップされるイメージの下辺に沿って移動します。
LeftEnd が明示的に設定されていない場合、0 に等しいと見なされます。

LeftControl1

ラッピングに使用される左 Bezier 曲線の第 1 制御点の水平座標を決定するための値を示します。
LeftControl1 は System.Single 値で、0.00 から 1.00 の範囲の値を取ります。
LeftControl1 および LeftStart プロパティで決定される、曲線の第 1 制御点および開始点は、ラップされるイメージの上辺の上のみに置かれます。第 1 制御点の垂直座標は、ラップされるイメージの上辺の垂直座標と同じです。LeftControl1 および LeftStart プロパティがアニメーションされる場合、曲線の第 1 制御点および開始点は、ラップされるイメージの上辺に沿って移動します。
LeftControl1 が明示的に設定されていない場合、0.25 に等しいと見なされます。

LeftControl2

ラッピングに使用される左 Bezier 曲線の第 2 制御点の水平座標を決定するための値を示します。
LeftControl2 は System.Single 値で、0.00 から 1.00 の範囲の値を取ります。
LeftControl2 および LeftEnd プロパティで決定される、曲線の第 2 制御点および終了点は、ラップされるイメージの下辺の上のみに置かれます。第 2 制御点の垂直座標は、ラップされるイメージの下辺の垂直座標と同じです。 LeftControl2 および LeftEnd プロパティがアニメーションされる場合、曲線の第 2 制御点および終了点は、ラップされるイメージの下辺に沿って移動します。
LeftControl2 が明示的に設定されていない場合、0.25 に等しいと見なされます。

RightStart

ラッピングに使用される右 Bezier 曲線の開始点の水平座標を決定するための値を示します。
　
RightStart は System.Single 値で、0.00 から 1.00 の範囲の値を取ります。
　
RightControl1 および RightStart プロパティで決定される、曲線の第 1 制御点および開始点は、ラップされるイメージの上辺の上のみに置かれます。開始点の垂直座標は、ラップされるイメージの上辺の垂直座標と同じです。 RightControl1 および Rightstart プロパティがアニメーションされる場合、曲線の第 1 制御点および開始点は、ラップされるイメージの上辺に沿って移動します。
　
RightStart が明示的に設定されていない場合、1 に等しいと見なされます。

RightEnd

ラッピングに使用される右 Bezier 曲線の終了点の水平座標を決定するための値を示します。
　
RightEnd は System.Single 値で、0.00 から 1.00 の範囲の値を取ります。

RightControl1

ラッピングに使用される右 Bezier 曲線の第 1 制御点の水平座標を決定するための値を示します。
　
RightControl1 は System.Single 値で、0.00 から 1.00 の範囲の値を取ります。
　
RightControl1 が明示的に設定されていない場合、0.75 に等しいと見なされます。

RightControl2

ラッピングに使用される右 Bezier 曲線の第 2 制御点の水平座標を決定するための値を示します。
　
RightControl2 は System.Single 値で、0.00 から 1.00 の範囲の値を取ります。
　
RightControl2 が明示的に設定されていない場合、0.75 に等しいと見なされます。

Trigger

トリガ条件を保有するプロパティ。
それぞれのトリガ条件は、プロパティ名、等号記号、トリガ値で構成されます。すべての組み込みトリガはブール値です。したがって、それらの値は True または False でなければなりません。例：
IsMouseOver=true;IsPressed=false
トリガの値を設定は、オブジェクトインスペクタで最も簡単に行えます。

トリガ	説明
IsDragOver	コントロールがドラッグされている（マウスボタンがクリックされ、かつ押されたままになっている）際に、効果を発生させます。
IsFocused	コントロール上にフォーカスがある際に、効果を発生させます。
IsMouseOver	マウスがコントロールの上を通過した際に、効果を発生させます（HitTest が True に設定されている必要があります）。
IsVisible	コントロールが画面上に表示されている際に、効果を発生させます。

その他の組み込みトリガには、以下のものがあります。
・IsActive（TCustomForm）
・IsChecked (TMenuItem)
・IsOpen (TEffect)
・IsPressed (TCustomButton)
・IsSelected（MenuItem、TTabItem、TListBoxItem、TTreeViewItem）
効果トリガに関するさらなる情報については、「FireMonkey の画像効果」の「効果のトリガ」を参照してください。

　
それでは少し試してみます。
　
まずはフォーム上にボタンを配置します。

本コンポーネントを配置し、構造ビューでドラッグしてボタンの子になるようにします。

初期状態で

左	右
開　始：0	開　始：1
制御１：0.25	制御１：0.75
制御２：0.25	制御２：0.75
終　了：0	終　了：1

という状態です。数値は全て水平座標での比率です。
数値範囲は、0 ～ 1 となっていますのでマイナス値等は使えません。

左開始位置 LeftStart を「0.3」にしてみました。

更に、
右終了位置 RightEnd を「0.7」にしてみました。

左	右
開　始：0.2	開　始：0.8
制御１：0	制御１：1
制御２：0	制御２：1
終　了：0.2	終　了：0.8

としてみました。

　
いまいちクッキリ表示されていませんが、他のバージョンでは異なるかもしれません。縦変化もありませんが、あればあったで煩雑になると思われますから１効果としてはこれくらいで良いのかもしれません。
　
次に、これまでの説明と同様の画面で試してみます。
　
ボタン、チェックボックス、ラベル、イメージ(Image)、RoundRect等を配置します。イメージには、BMPファイル、透過付PNGファイルを指定します。背景色が白色だと分かりにくいかもしれないので、Gray色にしておきます。

各コンポーネントにそれぞれ、本コンポーネントを子としてみます。

各コンポーネントに効果が掛けられます。
トラックバーを操作することにより左側制御点を変更させるようにしてみます。トラックバーの変更イベントハンドラを以下のように記述します。トラックバーのMin・Maxには、0、1、を指定しておきます。

procedure TForm1.TrackBar1Change(Sender: TObject);
var
　i : integer ;
　t : TComponent ;
　v : Single ;
begin
　v := TrackBar1.Value ;
　for i := 1 to 9 do begin
　　t := FindComponent('WrapEffect'+IntToStr(i));
　　if (t <> nil) then begin
　　　TWrapEffect(t).LeftControl1 := v ;
　　　TWrapEffect(t).LeftControl2 := v ;
　　end;
　end;
end;

保存・コンパイル・実行を行います。

↓

↓

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