Pan Manipulator を使用する¶

Kanzi アプリケーションでユーザーがノードを移動できるようにするには、Pan Manipulator を使用します。

例えば、Pan Manipulator を使用してユーザーが地図を移動できるようにすることができます。ノードにパンジェスチャーを有効にするを参照してください。

Pan Manipulator トリガーを使用して、パンジェスチャーに反応します。たとえば、ユーザーがそのノードをパンしたときにノードの外観を設定できます。

Pan Manipulator トリガーを使用するを参照してください。

Pan Manipulator は、Kanzi アプリケーションのノードにジェスチャー認識を追加するために使用できる入力マニピュレーターの1つです。

入力マニピュレータの使用を参照してください。

Pan Manipulator を使用する方法をチュートリアルで学びましょう。チュートリアル: パン、ズーム、タップをご覧ください。

ノードにパンジェスチャーを有効にする¶

ノードにパンジェスチャーを有効にするには:

Kanzi Studio で Application テンプレートを使用してプロジェクトを作成します。
Node Tree で、パンジェスチャーを有効にしたいノードを作成します。

例えば、Image ノードを作成し、PanNode と名付けます。
Node Tree で前のステップで作成したノードを選択し、Properties で Input > Hit Testable プロパティを追加し、有効に設定します。

このプロパティを有効にすると、ユーザーがノードを選択できるようになります。

デフォルトで、ヒットテストは Button、Toggle Button、List Box Item Container、Scroll View、Slider、および Text Box ノードに対して有効になっています。

どのノードが入力を受け取るかを定義するを参照してください。
Node Components Alt を押しながら右クリック Input Manipulators で、Pan Manipulator を選択します。

この方法で、PanNode ノードがパンジェスチャーに反応するようにします。

ノードに Pan Manipulator コンポーネントを追加することで、そのノードに PanManipulator をインストールします。

PanManipulator の動作を制御するには、Pan Manipulator コンポーネントにこれらのプロパティを追加して設定できます。
- Recognition Threshold は、Kanzi がパンジェスチャーとして認識する前にポインターが移動しなければならない x 軸と y 軸のしきい値をピクセル単位で設定します。デフォルト値は両軸ともに 5 ピクセルです。
  
  パンジェスチャーをいずれかの軸で無効にするには、その軸の Recognition Threshold プロパティフィールドを -1 に設定します。
- Minimum Touch Points は、インストールされた PanManipulator がパンジェスチャーを認識するためにノードエリアで必要な最小タッチ数を設定します。デフォルト値は1です。
- Maximum Touch Points は、インストールされた PanManipulator がパンジェスチャーを認識するために、ノードエリアで許可される最大タッチ数を設定します。デフォルト値は10です。
Node Tree Alt を押しながら右クリックで作成したノードを選択し、Alias を選択します。

Kanzi Studio は、エイリアスを作成したノードを指すエイリアスを作成し、リソースディクショナリを含む最も近い先祖ノードのリソースディクショナリにそれを追加します。

エイリアスの名前の前に # 記号を付けて、エイリアスターゲットノードにアクセスします。
File > Export > Export KZB を選択します。

Kanzi Studio は、Kanzi Studio プロジェクトから kzb ファイルと構成ファイルを作成します。Kanzi Studio は、エクスポートされたファイルを <ProjectName>/Application/bin ディレクトリ、または Project > Properties の Binary Export Directory プロパティで設定した場所に保存します。kzb ファイルには、ローカライゼーションテーブルでロケールパックとしてマークしたリソースを除き、Kanzi Studio プロジェクトのすべてのノードとリソースが含まれています。

Visual Studioから Kanzi アプリケーションを実行すると、アプリケーションはkzbファイルと構成ファイルを読み込みます。
Kanzi Studio で、File > Open Kanzi Command Prompt を選択します。

Kanzi Command Prompt は、Kanzi 環境変数が設定された Windows コマンドプロンプトを開き、Kanzi のバージョンに対して Kanzi Command Prompt を開きます。

Kanzi Command Prompt を使用して、絶対パスや環境変数を設定せずに、Gradle、SCons、CMake などの Kanzi ユーティリティおよびビルドツールにアクセスします。

ヒント

Kanzi Command Prompt は、Rightware ディレクトリの Windows スタートメニューで見つけることができます。

Kanzi のバージョンが複数インストールされている場合は、そのコマンドプロンプトで作業したい Kanzi のバージョンに対応する Kanzi Command Prompt を起動するようにしてください。
<ProjectName>/Application ディレクトリ内の Kanzi Command Prompt で、アプリケーション用の Visual Studio ソリューションを生成するスクリプトを実行します。

たとえば、Visual Studio 2019 を使用している場合は、次のコマンドを実行します。
```
generate_cmake_vs2019_solution.bat
```
このスクリプトは、ディレクトリ <ProjectName>/Application/build_vs2019 内のアプリケーション用の Visual Studio ソリューションを生成します。

Visual Studioで <ProjectName>/Application/build_vs<Version>/<ProjectName>.sln Visual Studioソリューションを開き、アプリケーションのロジックを実装しているファイルで、パンジェスチャーにどのように反応するかを定義します。

パンメッセージのハンドラを定義します。

例えば、アプリケーションのロジックを実装するクラスのパブリックセクションの後に、次を追加します。

private:

    // Define the handler for the PanManipulator::StartedMessage message from 2D nodes
    // that have an input manipulator which generates pan messages.
    // This handler prepares a 2D node for a pan gesture.
    void onPanStarted(PanManipulator::StartedMessageArguments& messageArguments)
    {
        // Get from the message arguments the node that the user pans.
        Node2DSharedPtr node2d = dynamic_pointer_cast<Node2D>(messageArguments.getSource());

        if (!node2d)
        {
            return;
        }

        // When starting a pan gesture on the node, bring the node to front.
        node2d->moveToFront();
    }

    // Define the handler for the PanManipulator::MovedMessage message from 2D nodes
    // that have an input manipulator which generates pan messages.
    // This handler translates a 2D node by the amount of the pan gesture.
    void onPanMoved(PanManipulator::MovedMessageArguments& messageArguments)
    {
        // Get from the message arguments the node that the user pans.
        Node2DSharedPtr node2d = dynamic_pointer_cast<Node2D>(messageArguments.getSource());

        if (!node2d)
        {
            return;
        }

        // Get the distance in pixels that the pan has progressed
        // since the last message in the pan gesture sequence.
        Vector2 translationDelta = messageArguments.getDelta();

        // Get the Render Transformation property of the node.
        SRTValue2D nodeTransform = node2d->getRenderTransformation();

        // Get the current translation of the node.
        Vector2 translation = nodeTransform.getTranslation();

        // Apply the translation from the pan message.
        Vector2 translationTarget = translation + translationDelta;

        // Set the new translation.
        nodeTransform.setTranslation(translationTarget);

        // Apply the new transform to the node.
        node2d->setRenderTransformation(nodeTransform);
    }

Application::onProjectLoaded 関数で PanManipulator メッセージを購読します。

たとえば、追加します:

void onProjectLoaded() override
{
    ScreenSharedPtr screen = getScreen();

    // Get the PanNode node using its alias.
    NodeSharedPtr panNode = screen->lookupNode<Node>("#PanNode");

    // Subscribe to the PanManipulator::StartedMessage message at the PanNode node.
    // The PanManipulator generates this message when the user starts to drag a finger on the attached node and
    // the pan recognizition treshold is exceeded.
    panNode->addMessageHandler(PanManipulator::StartedMessage, bind(&MyProject::onPanStarted, this, placeholders::_1));

    // Subscribe to the PanManipulator::MovedMessage message at the PanNode node.
    // The PanManipulator generates this message when the user continues to drag a finger on the attached node.
    panNode->addMessageHandler(PanManipulator::MovedMessage, bind(&MyProject::onPanMoved, this, placeholders::_1));
}

アプリケーションをビルドして実行します。Kanzi アプリケーションのデプロイを参照してください。

アプリケーション内で、パンジェスチャーを有効にしたノードをクリックしてドラッグします。

Pan Manipulator トリガーを使用する¶

Pan Manipulator には次のトリガーがあります。

Pan Started トリガーは、ユーザーがノードをクリックしたが、まだそのノードをドラッグしていないときに発動します。
Pan Moved トリガーは、ユーザーがパンジェスチャーでノードを移動したときに発動します。
Pan Finished トリガーは、ユーザーがマウスボタンを離してパンジェスチャーを終了したときに発動します。
Pan Canceled トリガーは、パンジェスチャー中にフォーカスがノードから外れると発動します。
Pan Entered トリガーは、パンジェスチャーがノードに入ると発動します。
Pan Left トリガーは、パンジェスチャーがノードを離れるときに発動します。

Pan Manipulator トリガーを使用するには、

ノードにパンジェスチャーを有効にします。ノードにパンジェスチャーを有効にするを参照してください。
Pan Manipulator トリガーで設定したい動作を定義します。

例えば、Pan Started、Pan Moved、および Pan Finished トリガーが発動したときにノードの外観を設定する状態を定義するステートマネージャーを作成します。ステートマネージャーの作成を参照してください。
Pan Manipulator トリガーを追加して設定します。
1. Node Tree でトリガーを追加したいノードを選択し、Node Components > Triggers で Pan Manipulator トリガーの1つを追加します。
  
  例えば、Node Tree でパンジェスチャーを有効にしたノードを選択し、Node Components Alt を押しながら右クリック Triggers で選択し、Message Trigger > Pan Manipulator > Pan Started を選択します。
2. 前のステップで作成したトリガーで、Set Message Handled プロパティを無効にします。
  
  Set Message Handled プロパティを無効にすると、このトリガーはメッセージをインターセプトしますが、停止はしません。この方法で、入力マニピュレータがメッセージを処理することを許可します。
3. Node Components Alt を押しながら右クリックで作成したトリガーの中で、アクションを選択し、設定してください。
  
  例えば、Dispatch Message Action > State Manager > Go to State を選択し、アクションセットで:
  - パンジェスチャーを有効にしたノードに Target Item します。
  - Pan Started トリガーがオフになったときにノードの外観を設定する状態に State します。
前の手順を繰り返して、追加の Pan Manipulator トリガーを追加および構成します。

例えば、Pan Moved トリガーと Pan Finished トリガーを追加します。

各トリガーの Go to State アクションで、State をそのトリガーが発動されたときにノードの外観を設定する状態に設定します。
File > Export > Export KZB を選択します。
アプリケーションをビルドして実行します。Kanzi アプリケーションのデプロイを参照してください。

アプリケーション内で、パンジェスチャーを有効にしたノードをクリックしてドラッグします。

Pan Manipulator を使用する¶

ノードにパンジェスチャーを有効にする¶

Pan Manipulator トリガーを使用する¶

関連項目¶