ステップ 1 - スピードニードルを作成する¶
ステップ 1 では、速度計の針をゲージに追加し、その位置を調整し、作成したプロパティの値に応じて変化するように設定します。
チュートリアルを入手する¶
チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Gauges チュートリアルの横にある 
をクリックします。
Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。
<KanziWorkspace>/Tutorials/Gauges/Assetsディレクトリにあるチュートリアルの開始地点プロジェクト。<KanziWorkspace>/Tutorials/Gauges/Completedディレクトリにある完成したチュートリアル。
プロジェクトを開いて速度計を追加する¶
このセクションでは、プロジェクトを開き、Preview を調整し、スピードニードルをゲージに追加します。
プロジェクトを開いて速度計を追加するには、以下のようにします。
Kanzi Studio Quick Start ウィンドウで、Examples をクリックします。Gauges チュートリアルの横にある Open をクリックし、Start project を選択します。
プロジェクトには、このチュートリアルのすべてのゲージの背景として使用される Gauges Image ノードと、ゲージ内の針のピボットポイントを正確に設定するために使用できる Guides Image ノードが含まれています。
ヒント
Preview で3つのゲージすべてが見えない場合は、Preview の右上隅にある Preview のズームレベルを調整できます。
ヒント
Preview の背景はデフォルトで、黒です。Preview が Interact モード
のときに、背景からコンテンツを際立たせるには、Preview Background Color を設定できます。すべての Kanzi Studio プロジェクトに対して、Edit > User Preferences で。
特定の Kanzi Studio プロジェクトの場合、Project > Properties。
プレビューの背景色を設定する を参照してください。
Kanzi Studio UIの下部にある Assets から、SpeedNeedle 画像をドラッグして Preview の Gauges にドロップします。
Assets から Preview に画像をドラッグすると、Kanzi Studio はドラッグした画像を表示する新しい Image ノードを作成し、画面の左上隅に配置します。次のセクションでは、SpeedNeedle ノードを正しい位置に配置します。
SpeedNeedle の位置を調整する¶
Kanzi Studio では、Preview 内のノードの位置を Preview ツールを使用して調整するか、Node Tree でノードを選択し、Properties でノードプロパティの値を調整することができます。このセクションでは、両方のアプローチを組み合わせて使用します。
このセクションでは、SpeedNeedle をスピードゲージの中心に配置し、その原点を調整してゲージの中心を正しく回転するようにします。
ヒント
ノードの位置を正確に配置するには、インターフェイス上の主なすべての要素の正確な位置を示す画像を作成します。ガイド画像をプロジェクトにインポートし、ノードを配置する際のガイドとして使用します。このチュートリアルのプロジェクトには、そのような画像が含まれています。
SpeedNeedle の位置を調整するには、以下のようにします。
Node Tree で Guides ノードを選択し、Ctrl H を押して、ゲージ内の針の正確な位置を設定するために使用できるガイドを表示します。
Preview で Node tool
を使用して SpeedNeedle を選択します。
Node tool で、SpeedNeedle ノードを親ノードである RootPage ノードの上部中央に揃えるために、上部中央の四角形
をクリックします。
Node tool で
をクリックし、ターゲット変換のために Render Transformation を選択します。以下の方法で変換を適用することができます。
レイアウト変換では、レイアウトパスの適用前にアイテムを変換します。
レンダー変換では、レイアウトパス適用後、アイテムをレンダリングする前に、アイテムを変換します。
Render Transformation を常に使用してください。ただし、レイアウトを再計算する必要があるとわかっている場合を除きます。
Preview で Node tool
を選択し、
をクリックしてノードやガイドへのスナップを無効にします。スナッピングを無効にすると、Node tool を使用して Preview 内でノードを移動させることができ、ノードやガイドにスナップしなくなります。
Node tool を使用して、Guides の十字線の上に針の底を正確に配置します。
ヒント
ノードを真の水平または垂直線で移動するには、Node tool を持つノードをドラッグする際に Shift キーを押し続けます。
Node Tree で SpeedNeedle ノードを選択し、Properties で右クリックして、Add Property > Transform 2D > Render Transformation Origin を選択し、次を設定します:
X 属性を 0,5 に設定
Y 属性を 0,9 に設定
Kanzi ではデフォルトで、すべての2Dノードの原点はノードの左上隅にあります。針を針の下部中央で回転させたい場合は、Render Transformation Origin を使用してピボットをそこに配置する必要があります。
SpeedNeedle をカスタムプロパティで制御する¶
プロパティは、ノードの状態、見た目、動作を指定したり調べたりする手段となります。例えば、プロパティは色を定義したり、ボタンが押されているかどうかを示したり、アイテムの配置を指定したりすることができます。
このセクションでは、カスタムプロパティを作成して使用し、ゲージ内の SpeedNeedle の位置を制御します。
このセクションでは、カスタムプロパティタイプを作成し、それを使用して SpeedNeedle ノードの回転を制御します。
カスタムプロパティで SpeedNeedle ノードを制御するには：
Library で、Alt を押しながら右クリック Property Types を選択し、Property Type を選択します。
New Property Type ウィンドウで、次を設定します。
Name から Gauges.Speed へ
Display Name から Speed へ
Category から Gauges へ
Data Type から Integer へ
Lower Bound を 0 に
Upper Bound を240に
Save をクリックして、定義したプロパティを持つプロパティタイプを作成します。
このカスタムプロパティタイプを使用して、Gauges ノード内の SpeedNeedle ノードの位置を制御します。
Node Tree で Gauges ノードを選択し、Properties で右クリックして、Add Property > Gauges > Speed を選択します。
Node Tree で SpeedNeedle ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Render Transformation へ
Property Field から Rotation Z へ
Expression へ
{@../Gauges/Gauges.Speed} - 140ゲージ上で針を正しく位置させるためには、Speed プロパティの値が0のとき、そのプロパティの値から140を引く必要があります。
Save をクリックします。
このモディファイアバインディングを使用して、前のステップで追加した Gauges ノード内の Speed プロパティで SpeedNeedle をz軸周りに回転させます。
ヒント
Binding Editor でバインディングの式を書くとき、ノードとそのプロパティを式に追加する最も速くて正確な方法は、Properties から Binding Editor の Expression エディタにドラッグすることです。
例えば、Gauges ノードに Speed プロパティを追加するには、Node Tree で Gauges ノードを選択し、Properties から Speed プロパティを Binding Editor の Expression フィールドにドラッグします。
これで、Gauges ノードの Speed プロパティの値を調整することで、針を回転させることができます。
現在の速度を数値として表示する¶
現在の速度を数値として表示するノードを作成します。
現在の速度を数値として表示するには、以下ようにします。
Node Tree Alt を押しながら右クリック の Gauges > SpeedView ノードで、Text Block 2D を選択し、ノードに SpeedValue と名前を付けます。
SpeedView は Stack Layout 2D ノードです。Stack Layout ノードは、Direction プロパティで設定された軸に沿って子ノードをスタックに配置します。SpeedView は、速度単位を表示する Text Block 2D ノード SpeedUnit を含んでいます。
このセクションでは、SpeedValue ノードを使用して、SpeedNeedle の現在の値を表示します。
Node Tree で、ゲージ内の速度単位の上に速度値を表示するために、SpeedUnit ノードの上に SpeedValue ノードをドラッグします。
Node Tree で SpeedValue ノードを選択し、Properties で：
+ Add Binding をクリックし、Binding Editor で設定します:
Property から Text へ
Expression へ
{@../../Gauges.Speed}
Save をクリックします。
このバインディングを使用すると、SpeedValue ノード内の Gauges.Speed プロパティの現在の値を表示します。
追加と設定:
Font Size から 80 まで
Fixed Character Width から44へ
Fixed Character Width プロパティを使用して、任意のフォントを等幅フォントに変換します。
Gauges ノードの Speed プロパティの値を変更すると、針が回転し、SpeedValue ノードにプロパティの値が表示されます。