Slider ノードを使用する

最小値と最大値の範囲内で、視覚的なインジケーターを使用してユーザーが数値を変更できるようにするには、Slider ノードを使用します。

ノブをトラジェクトリに沿って動かすと、スライダーはメッセージを生成します：ドラッグ開始、ドラッグ終了、値変更。

チュートリアルを完了してスライダーの作成方法を学ぶには、チュートリアル: スライダーの作成 を参照してください。

Slider ノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。Slider ノードにフォーカスがある場合、そのスライダーのノブを動かすには、次のデフォルトのキーボードキーを使用できます。

• スライダーのノブをレールの始点に移動するには、Home

• スライダーのノブをレールの端まで移動するには、End を使用します。

• ← と → を使用して、水平スライダーのノブを移動します。

• ↑ と ↓ を使用して、垂直スライダーのノブを移動します。

スライダーノブを矢印キーで移動させるには、その Slider ノードで、各キー押下時にノブが移動する量を Step Value プロパティで設定します。

Factory Content のスライダーを使用して

Kanzi Factory Content アセットパッケージには、ニーズに合わせてカスタマイズできる2Dスライダーが含まれています。

Factory Content からスライダーを使用するには、

1. Asset Packages > Factory Content から Slider をドラッグし、Preview または Node Tree の2Dノードにドロップします。

   Kanzi Studio は Slider アセットをプロジェクトにインポートし、スライダーからプレハブを作成し、そのプレハブをプロジェクト内にインスタンス化します。

   

2. （オプション） スライダーの外観と動作を設定するには、Node Tree または Prefabs で Slider を選択し、Properties で次を追加して設定します。

   • スライダーの最高値を設定するには、Maximum Value を使用します。デフォルト値は100です。

   • スライダーの最小値を設定するには、Minimum Value を使用します。デフォルト値は0です。

   • Step Value は、ノブがレール上で移動する際の増分を設定します。デフォルト値は1です。

   • Value は、レール上のノブの初期位置を設定します。スライダーの位置で別のプロパティを制御するためにバインディングを使用できます。バインディングの使用 を参照してください。

   • Knob Style は、ノブの形状を四角形または円形に設定するか、ノブを表示しないように設定します。

   • ノブのサイズを設定するには、Knob Size を使用します。

   • ノブの色を設定するには、Knob Color を使用します。

   • レールの厚さを設定するには、Rail Thickness を使用します。

   • レールの端を丸めるかどうかを設定するには、Rail Rounded Ends を使用します。

   • Rail Background Color は、ノブからレールの端までのレールの色を設定します。

   • レールの開始からノブまでのレールの色を設定するための Rail Fill Color。

   

独自のスライダーを作成する

Kanzi に付属するスライダーが要件を満たさない場合は、独自のスライダーを作成できます。

独自のスライダーを作成するには:

1. Prefabs で をクリックし、Slider 3D または Slider 2D のいずれかを選択します。

2. 作成したスライダープレハブを右クリックして、次を作成します:

   • 3Dスライダーの場合:

     • スライダーノブが移動するレールを視覚的に表現するノード。

       例えば、スライダーが移動する軌跡を視覚化したい場合は、メッシュを使用してください。

     • スライダーノブを移動させたいレールとして機能する Trajectory Layout 3D。

       Kanzi Studio はデフォルトで円のトラジェクトリを作成して使用します。角度、弧、円、楕円、直線、長方形、スパイラル、スプライン、または台形のトラジェクトリを使用できます。トラジェクトリ (Trajectories) を参照してください。

     • Trajectory Layout 3D の中に、スライダーノブとして使用したいノードを作成します。

       たとえば、Sphere を作成します。

     

   • 2Dスライダーの場合:

     • スライダーノブが移動するレールを視覚的に表現するノードです。例えば、レールの視覚的な表現を作成するには、Content Layout 2D ノード、Image ノード、またはレイアウト内で複数の Image ノードや Empty Node 2D ノードを使用できます。

       例えば、Content Layout 2D ノードを作成し、Rail と名付けます。

     • スライダーノブを移動させたいレールとして機能する Trajectory Layout 2D ノード。

       Kanzi Studio はデフォルトで円のトラジェクトリを作成して使用します。角度、弧、円、楕円、直線、長方形、スパイラル、スプライン、または台形のトラジェクトリを使用できます。トラジェクトリ (Trajectories) を参照してください。

     • Trajectory Layout 2D ノードの中に、スライダーのノブの視覚的表現として使用したいノードを作成します。

       例えば、Content Layout 2D ノードを作成し、Knob と名付けます。

     

3. ノブとして使用したいノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

   • Property から Trajectory Override Offset へ

   • Expression へ

     {@../../RangeConcept.NormalizedValue}
     

   Save をクリックします。バインディングの使用 を参照してください。

   

4. Kanzi がスライダーのレールとして使用するトラジェクトリをスライダーに伝えるためのエイリアスを作成します。

   1. Prefabs で Slider 2D プレハブを選択し、Dictionaries ウィンドウで + Add Resource をクリックし、Create > Alias を選択します。

      

   2. エイリアス $layout を命名し、Slider 2D プレハブ内の Trajectory Layout 2D ノードを指すように設定します。

      Kanzi は、このエイリアスを使用して、スライダーノブを移動させるトラジェクトリをスライダーに指示します。

      

5. スライダーのノブが移動するレールのサイズを設定します。

   • 3Dスライダーの場合: Library > Trajectories でスライダー内の Trajectory Layout 3D ノードが使用するトラジェクトリを選択し、Line Trajectory の Length プロパティまたは Circle Trajectory の Radius プロパティを設定します。

   • 2Dスライダーの場合: Prefabs で Trajectory Layout 2D を選択し、Properties で Layout Width プロパティを設定します。

6. （オプション） スライダーを選択し、Properties で次のように追加して設定することでスライダーのパラメータを設定できます。

   • Maximum Value はスライダーの最大値を定義します。

   • Minimum Value はスライダーの最小値を定義します。

   • Step Value は、ノブがレール上で移動する際の増分を定義します。

   • Value プロパティは、レール上のノブの初期位置を設定します。Minimum Value プロパティと Maximum Value プロパティを設定しない場合、範囲は0から1の間です。

7. Prefabs から Node Tree まで作成したスライダーをドラッグし、スライダーを使用したいノードにドロップします。

プロパティでスライダーの値を更新する

スライダーの値は、その Value プロパティを他のプロパティにバインドすることで制御できます。例えば：

• 他のプロパティの値が変わったときにスライダーの値を変更するには、to-source バインディングを使用します。

• 他のプロパティの値が変わったときにスライダーの値を変更し、逆も同様にするには、双方向バインディングを使用します。スライダーを使用してグリッドリストボックスノードをスクロールする を参照してください。

スライダーノブを移動すると、スライダーは内部的に Value プロパティをターゲットとする一方向バインディングを上書きします。バインディング (Bindings) を参照してください。

他のプロパティの値が変わったときにスライダーの値を変更するには:

1. Slider を作成します。

   例えば、Asset Packages > Factory Content から、Slider を Node Tree にドラッグし、2Dノードにドロップします。

   

2. Node Tree で、スライダーの値を制御したいノードを選択します。

   例えば、あなたが作成した Slider を選択します。

   

3. Properties で、+ Add Binding をクリックし、Binding Editor で設定します。

   • Binding Mode から To source へ

   • Push Target を Slider ノードを指すパスにします。

     例えば、Slider ノードにバインディングを追加した場合、それを . に設定します。

   • Property から Value へ

   • スライダーの値を設定するために使用したいプロパティの値を取得する式に Expression します。

     例えば、カスタムプロパティを使用します。プロパティタイプの作成 を参照してください。

   

4. Node Tree で、Slider ノードを選択します。Properties で、追加して設定します。

   • Minimum Value をカスタムプロパティの Lower Bound と同じ値にします。

   • Maximum Value をカスタムプロパティの Upper Bound と同じ値にします。

   

スライダーの値を調整するには、以下のようにします。

• Preview で、スライダーノブを動かします。

• Properties で、カスタムプロパティの値を調整します。

スライダーを使用してグリッドリストボックスノードをスクロールする

Slider ノードを使用して、Grid List Box ノードをスクロールできます。この例では、スライダーを使用して縦方向の連絡先リストをスクロールします。

Grid List Box ノードをスクロールするためにスライダーを使用するには：

1. スクロールしたい Grid List Box ノードを作成します。

   例：

   1. Node Tree で Stack Layout 2D ノードを作成します。

      

   2. Asset Packages > Factory Content から Contact List を Node Tree にドラッグし、Stack Layout 2D ノードにドロップします。ファクトリーコンテンツ (Factory Content) のアセット を参照してください。

      

2. Grid List Box ノードをスクロールするために使用する Slider ノードを作成し、Slider ノードのサイズと向きを Grid List Box ノードに合わせて設定します。

   例：

   1. Asset Packages > Factory Content から Slider を Node Tree にドラッグし、Stack Layout 2D ノードにドロップします。

      

   2. Node Tree で Slider ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

      • Property から Layout Width へ

      • Expression へ

        {@../Contact List/Node.Height}
        

      この方法で、スライダーのレールの長さを Contact List ノードの高さに合わせることができます。

      

   3. Properties で、Transform 2D > Layout Transformation プロパティを追加し、Rotation プロパティフィールドを90に設定します。

      この方法で、スライダーを縦にします。

      

   4. Properties で + Add Binding をクリックし、Binding Editor で設定します。

      • Property から Maximum Value へ

      • Expression へ

        # Get the number of items in the Contact List node.
        itemCount = {@../Contact List/ListBoxConcept.ItemCount}
        
        # Get the height of a cell that hosts a contact item in the Contact List node.
        itemHeight = {@../Contact List/GridListBoxConcept.CellHeight}
        
        # Get the height of the Contact List node.
        listBoxHeight = {@../Contact List/Node.Height}
        
        # Return the height of the invisible area of the Contact List node.
        itemCount * itemHeight - listBoxHeight
        

      Slider ノードの最大値を Contact List ノードの不可視領域の高さにバインドします。Slider ノードの最小値はデフォルトで 0 です。このようにして、スライダーの値の範囲を連絡先リストの長さに合わせて設定します。

      

3. Node Tree で Slider ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

   • Binding Mode から Two way へ

   • Property から Value へ

   • スクロールしたい Grid List Box ノードの Scroll Position プロパティ X または Y プロパティフィールドに Source を設定します。

     たとえば、次のように設定します:

     {@../Contact List/GridListBoxConcept.ScrollPosition}.Y
     

   Slider ノードの Value プロパティを、Contact List ノードの Scroll Position プロパティ Y プロパティフィールドにバインドします。この方法で、スライダーノブの位置とリストボックスの垂直スクロール位置の間に双方向の接続を作成します。

   

Preview では、スライダーノブを動かすと連絡先リストがスクロールし、連絡先リストをスクロールするとスライダーノブが動きます。

スライダー付きのカラーピッカーを作成する

Slider ノードを使用して、スライダーの値がカラースウォッチの色を設定するカラーピッカーを作成できます。

スライダー付きのカラーピッカーを作成するには:

1. カラーホイールに沿ってリング状のノブが動くスライダーを作成します。

   1. Assets で、Import Assets をクリックし、カラーホイールとリング状のスライダーノブを表示する画像をインポートします。

      例えば、これらの画像を保存してインポートします。

      

   2. Prefabs で、Slider 2D プレハブを作成し、Color Picker と名付けます。Properties で、追加して設定します。

      • Layout Width と Layout Height をカラーホイールを表示する画像の寸法に合わせます。

        たとえば、それらを700に設定します。

      • Horizontal Alignment と Vertical Alignment を Center に

      

   3. Color Picker プレハブを Node Tree にドラッグし、RootPage ノードにドロップします。

      この方法で、ノードツリー内にプレハブをインスタンス化し、Preview でスライダーの作成を追跡できます。

      

   4. Prefabs > Color Picker プレハブ内で：

      1. Image ノードを作成し、カラーホイールを表示してスライダーノブが移動するレールを視覚的に表現します。Properties で、Horizontal Alignment と Vertical Alignment プロパティを Center に追加して設定します。

         

      2. スライダーノブを移動させるレールとして機能する Trajectory Layout 2D ノードを作成します。Properties で、次を追加して設定します。

         • Layout Width と Layout Height は、カラーホイールとスライダーノブを表示する画像の寸法の違いを示します。

           たとえば、それらを665に設定します。

         • Horizontal Alignment と Vertical Alignment を Center に

         これにより、トラジェクトリレイアウトが色相環に重ねて配置されます。

         

         ヒント

         トラジェクトリを表示するには、Preview で をクリックして Analyze モードに入り、 を右クリックして Debug objects を選択します。

         

      3. Trajectory Layout 2D ノード内で、スライダーのノブの視覚的表現として使用する Image ノードを作成します。

         

   5. Prefabs で、Trajectory Layout 2D ノードを選択します。Trajectory プロパティの隣にある Properties で、 をクリックしてそのリソースに移動し、設定します。

      • Radius を Trajectory Layout 2D ノードの幅の半分に

        たとえば、それを332に設定します。

      • Angle から 180 まで

        これにより、トラジェクトリの開始点の色が赤、色相 0 に設定されます。

      

   6. Kanzi がスライダーのレールとして使用するトラジェクトリをスライダーに伝えるためのエイリアスを作成します。

      1. Prefabs で、Color Picker プレハブを選択します。Dictionaries で、+ Add Resource をクリックし、Create > Alias を選択し、エイリアスに $layout という名前を付けます。

         

      2. Color Picker プレハブ内の Trajectory Layout 2D ノードを指すように $layout エイリアスを設定します。

         

   7. Prefabs で、Knob ノードを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します。

      • Property から Trajectory Override Offset へ

      • Expression へ

        {@../../RangeConcept.NormalizedValue}
        

      Save をクリックします。

      このバインディングにより、スライダーのノブがスライダーのレールを定義するトラジェクトリ上を移動します。

      

2. ユーザーがカラーホイールで選択した色を保存します。

   1. Library > Property Types で、プロパティタイプを作成し、設定します。

      • Name から ColorPicker.Color へ

      • Data Type から Color へ

      

   2. Prefabs で、Color Picker プレハブを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で、次を設定します。

      • Property から ColorPicker.Color へ

      • Expression へ

        # This binding expression calculates the color of the color wheel
        # in the position defined by the value of the slider.
        
        # The color wheel shows a continuous range of colors in the HSL color space.
        # Create a variable that you use to store the color value and set the
        # initial values of the color channels:
        # - Hue to 0
        # - Saturation to 1
        # - Lightness to 0.5
        # - Alpha to 1
        hslVector = Vector4(0, 1, 0.5, 1)
        
        # Set the hue of the color to the value of the slider in the 0...1 range.
        # For example, value 0 corresponds to red, and value 0.5 to cyan.
        hslVector.x = {@./RangeConcept.Value}
        
        # Convert the color from HSL to sRGB color space.
        srgbColor = Color4(hslToSrgb(hslVector))
        
        # Convert the color from sRGB to linear color space and return the color.
        # A binding takes the value of the last expression, whether it is an assignment,
        # unary or binary operation, or just a constant value or variable itself.
        sRGBToLinear(srgbColor)
        

      Save をクリックします。

      スライダーの Value プロパティに基づいて計算した色の値に ColorPicker.Color プロパティをバインドします。色空間を変換するために、hslToSrgb と sRGBToLinear のバインディング関数を使用します。

      

3. 現在選択されている色を表示する色見本を以下のように作成します。

   1. Node Tree で、Empty Node 2D ノードを作成し、Color Swatch と名付けます。Properties で、追加して設定します:

      • Foreground Brush と + Color Brush を選択

      • Layout Width と Layout Height を300に

      • Horizontal Alignment と Vertical Alignment を Center に

      このノードを使用すると、スライダーを使ってユーザーが色相環で選択した色が表示されます。

      

   2. Node Tree で、Color Swatch ノードを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します。

      • Binding Mode から To source へ

      • Push Target から .Node2D.ForegroundBrush へ

      • Property から Brush Color へ

      • Expression へ

        {@../Color Picker/ColorPicker.Color}
        

      Save をクリックします。

      この方法で、Color Swatch ノードの Foreground Brush で使用されるブラシの Brush Color プロパティの値を設定します。Color Picker ノード内で、Brush Color プロパティの値を ColorPicker.Color プロパティの値にバインドします。

      

   Preview では、カラーホイールに沿ってノブをドラッグすると、カラースウォッチにノブの下の色が表示されます。

   

4. （オプション） カラーホイール、スライダーノブ、およびカラースウォッチにシャドウを適用します。

   1. Library で、Alt を押しながら右クリック Effects を選択し、Shadow Effect 2D を選択します。

      Shadow Effect 2D エフェクトは、2Dノード内のコンテンツの視覚的な形状に影を適用します。Shadow Effect 2D エフェクトを使用する を参照してください。

      

   2. Library > Effects > 2D Effects から、Shadow Effect 2D エフェクトを Prefabs にドラッグし、カラーホイールを表示するノードにドロップします。

      この方法で、そのノードに Effect Prefab プロパティを Shadow Effect 2D エフェクトに設定します。

      

   3. スライダーノブとカラースウォッチを表示するノードに対して、前のステップを繰り返します。

      

   4. 影効果の外観を調整します。

      例えば、Library > Effects > 2D Effects で、Shadow Effect 2D エフェクトを選択します。Properties で、追加して設定します。

      • Shadow Blur Radius から 5 まで

      • Shadow Distance から 2 へ

      • Shadow Color を完全に不透明な黒にする

      

   5. Prefabs で、Color Picker プレハブを選択します。Properties で、レイアウト内の影に十分なスペースを残す値に Layout Width と Layout Height プロパティを設定します。

      例えば、Layout Width と Layout Height を 710 に設定します。

      
   

Slider ノードが使用中かどうかを制御する

Slider ノードが使用中かどうかを制御するには、Input > Enabled プロパティを使用します。無効化された Slider ノードはユーザー入力に反応しません。Slider ノードを無効にすると、Kanzi は進行中のジェスチャーを停止し、スライダーの値を保持します。

ノードの Enabled プロパティを無効にすると、そのノードとその子孫ノードが同じオーバーレイフォーカススコープ内で実質的に無効になります。

ノードが効果的に有効になっているかどうかを確認するには、ステートマネージャーまたはバインディングで Input > Effectively Enabled プロパティを使用します。たとえば、ノードが使用中であるかどうかをユーザーに視覚的に示すために、ステートマネージャーを作成し、そのコントローラープロパティとして Effectively Enabled プロパティを使用します。

ノードが入力にどのように反応するかを制御する を参照してください。

Slider 2D ノードの外観を設定する

2D ノードの外観を設定するには:

• 2Dノードを単色、テクスチャ、またはマテリアルで塗りつぶすことができます。2Dノードの外観の調整 を参照してください。

  

• 2Dノードにポストプロセッシングエフェクトを適用できます。2Dノードのエフェクト を参照してください。

  

• 2Dノードを3つの軸すべてで回転させて、3Dのパースペクティブ効果を作成できます。2Dノードに3Dパースペクティブ効果を作成する を参照してください。

  

• 2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成できます。2Dノードにカスタムレンダリングを適用する を参照してください。

  

• 2Dノードをピクセルパーフェクトとしてレンダリングできます。ピクセルパーフェクトな2Dノードのレンダリング を参照してください。

  

APIで Slider 3D ノードを使用する

カスタム外観を持つ Slider 3D ノードを作成するには:

// Create a Slider 3D node named Custom 3D slider.
Slider3DSharedPtr slider3d = Slider3D::create(domain, "Custom 3D slider");
// Add the Slider 3D node to the Scene node.
scene->addChild(slider3d);

// Set the size of the Slider 3D node to be 4 device independent units wide,
// 2 device independent units high, and 1 device independent unit deep.
slider3d->setWidth(4.0f);
slider3d->setHeight(2.0f);
slider3d->setDepth(1.0f);

// Use the Trajectory Layout 3D node to define the rail along which the knob of the slider moves.
// Create a Trajectory Layout 3D node named Slider rail.
TrajectoryLayout3DSharedPtr trajectoryLayout = TrajectoryLayout3D::create(domain, "Slider rail");

// Use the Sphere node to define the look of the knob that moves on the slider rail.
// Create a blue Sphere node named Slider knob whose radius is 1 device independent unit.
Model3DSharedPtr sliderKnob = Model3D::createSphere(domain, "Slider knob", 1.0f, 20, 20, ThemeBlue);
// Set the Sphere node to be the child of the trajectoryLayout Trajectory Layout 3D node.
trajectoryLayout->addChild(sliderKnob);

// Add the layout as a child node of the Slider 3D node.
// You can place the Trajectory Layout 3D node that defines the rail anywhere
// in the node tree and it does not have to be the direct child of the Slider 3D node.
slider3d->addChild(trajectoryLayout);

// The knob movement on the rail is based on modifying the TrajectoryLayout3D::StaticTrajectoryOffsetProperty
// which is set based on the Slider3D::ValueProperty.
// "../.." is the path from the knob (Sphere node) to the Slider 3D node.
AbstractBindingSharedPtr binding = Binding::create("../..", Slider3D::ValueProperty, PropertyFieldWhole);
// Add to the knob the binding that enables the knob to move on the rail.
sliderKnob->setBinding(binding, TrajectoryLayout3D::OverrideOffsetProperty, PropertyFieldWhole);

// Create an alias pointing to the Trajectory Layout 3D node that defines the slider rail.
ResourceID alias("$layout");
string path("obj:///" + trajectoryLayout->getName());
// Add the alias to the resource dictionary of the Slider 3D node.
slider3d->addResource(alias, path);

// Create the trajectory of the Trajectory Layout 3D node that is used as the rail of the Slider 3D node.
// Create a line trajectory on the x axis, that is 5 device independent units long, and name it Line trajectory.
TrajectorySharedPtr trajectory = Trajectory::createLine(Vector3(), Vector3(1.0f, 0.0f, 0.0f), 5.0f, domain, "Line trajectory");
// Set the Trajectory Layout 3D node to use the line trajectory.
trajectoryLayout->setTrajectory(trajectory);

// Set the Trajectory Layout 3D node so that it sets its size
// based on the size of its parent node (in this case the Slider 3D node).
trajectoryLayout->setHorizontalAlignment(Node::HorizontalAlignmentStretch);
trajectoryLayout->setVerticalAlignment(Node::VerticalAlignmentStretch);
trajectoryLayout->setDepthAlignment(Node::DepthAlignmentStretch);

詳細については、Slider3D クラスを参照してください。

APIで Slider 2D ノードを使用する

カスタム外観を持つ Slider 2D ノードを作成するには：

// Create a Slider 2D node named Custom 2D slider.
Slider2DSharedPtr slider = Slider2D::create(domain, "Custom 2D slider");
// Set the size of the Slider 2D node to be 400 pixels wide and 200 pixels high.
slider->setSize(400.0f, 200.0f);

// Use the Trajectory Layout 2D node to define the rail along which the knob of the slider moves.
// Create a Trajectory Layout 2D node named Slider rail.
TrajectoryLayout2DSharedPtr trajectoryLayout = TrajectoryLayout2D::create(domain, "Slider rail");

// Use the Image node to define the look of the knob that moves on the slider rail.
// Create an Image node named Slider knob.
Image2DSharedPtr knob = Image2D::create(domain, "Slider knob");
// Set the Image node to be the child of the trajectoryLayout Trajectory Layout 2D node.
trajectoryLayout->addChild(knob);

// Create an alias pointing to the Trajectory Layout 2D node that defines the slider rail.
ResourceID alias("$layout");
string path("obj:///" + trajectoryLayout->getName());
// Add the alias to the resource dictionary of the Slider 2D node.
slider->addResource(alias, path);

// Add the layout as a child node of the Slider 2D node.
// You can place the Trajectory Layout 2D node that defines the rail anywhere
// in the node tree and it does not have to be the direct child of the Slider 2D node.
slider->addChild(trajectoryLayout);

// Create the trajectory of the Trajectory Layout 2D node that is used as the rail of the Slider 2D node.
// Create a line trajectory on the x axis, that is 350 pixels long, and name it Line trajectory.
TrajectorySharedPtr trajectory = Trajectory::createLine(Vector3(), Vector3(1.0f, 0.0f, 0.0f), 350.0f, domain, "Line trajectory");
// Set the Trajectory Layout 2D node to use the line trajectory.
trajectoryLayout->setTrajectory(trajectory);

// Set the Trajectory Layout 2D node so that it sets its size
// based on the size of its parent node (in this case the Slider 2D node).
trajectoryLayout->setHorizontalAlignment(Node::HorizontalAlignmentStretch);
trajectoryLayout->setVerticalAlignment(Node::VerticalAlignmentStretch);

// The knob movement on the rail is based on modifying the TrajectoryLayout2D::StaticTrajectoryOffsetProperty
// which is set based on the Slider2D::ValueProperty.
// "../.." is the path from the knob (Image node) to the Slider 2D node.
AbstractBindingSharedPtr binding = Binding::create("../..", Slider2D::ValueProperty, PropertyFieldWhole);

// Add the Slider 2D node to the Viewport 2D node.
viewportNode->addChild(slider);

// Get the knob instance from the instance of the prefab template.
Node2DSharedPtr knobInstance = slider->getPresenter()->getLayout()->getChild(0);
// Set to the knob the binding that enables the knob to move on the rail.
knobInstance->setBinding(binding, TrajectoryLayout2D::OverrideOffsetProperty, PropertyFieldWhole);

詳細については、Slider2D クラスを参照してください。

Slider プロパティタイプとメッセージ

Slider ノードの利用可能なプロパティタイプとメッセージのリストについては、Slider 2D と Slider 3D を参照してください。

関連項目

チュートリアル: スライダーの作成

ファクトリーコンテンツ (Factory Content) のアセット

トラジェクトリ (Trajectories)

プロパティタイプを作成する

バインディングの使用

Grid List Box ノードを使用する

2Dノードのエフェクト