Pinch Manipulator を使用する¶

Pinch Manipulator を使用して、ユーザーが Kanzi アプリケーション内のノードをズームおよび回転できるようにします。

例えば、Pinch Manipulator を使用して、ユーザーが地図をズームインおよびズームアウトできるようにすることができます。ノードにピンチジェスチャーを有効にするを参照してください。

Pinch Manipulator トリガーを使用して、ピンチジェスチャーに反応します。たとえば、ユーザーがピンチジェスチャーを使用してノードをズームおよび回転させるときに、ノードの外観を設定できます。

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

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

Pinch Manipulator を使用する方法を学ぶには、チュートリアルを完了してください。チュートリアル: パン、ズーム、タップをご覧ください。

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

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

Kanzi Studio で Application テンプレートを使用してプロジェクトを作成します。
Node Tree でピンチジェスチャーを有効にしたいノードを作成します。例えば、Image ノードを作成し、PinchNode と名付けます。
Node Tree で前のステップで作成したノードを選択し、Properties で Input > Hit Testable プロパティを追加し、有効に設定します。

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

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

どのノードが入力を受け取るかを定義するを参照してください。
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ソリューションを開き、アプリケーションのロジックを実装するファイルで PinchManipulator を作成して設定します。

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

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

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

        if (!node2d)
        {
            return;
        }

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

        // Store the initial value of the Render Transformation scale.
        SRTValue2D nodeTransform = node2d->getRenderTransformation();
        m_pinchInitialScaleFactor = nodeTransform.getScale().getX() - 1.0f;
    }

    // Define the handler for the PinchManipulator::MovedMessage message from the 2D nodes
    // that have an input manipulator which generates pinch messages.
    // This scales and rotates a 2D node for the amount of the pinch gesture.
    void onPinchMoved(PinchManipulator::MovedMessageArguments& messageArguments)
    {
        // Get from the message arguments the node that the user pinches.
        Node2DSharedPtr node2d = dynamic_pointer_cast<Node2D>(messageArguments.getSource());

        if (!node2d)
        {
            return;
        }

        float scale;

        // Get the scale and rotation from the message arguments.
        float scaleDelta = messageArguments.getScale();
        float rotateDelta = messageArguments.getRotation();

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

        // Calculate the scale by adding the initial scale to the pinch value.
        scale = scaleDelta + m_pinchInitialScaleFactor;

        // Apply the rotation.
        nodeTransform.rotate(rotateDelta);

        // Apply the scale.
        nodeTransform.setScale(Vector2(scale, scale));

        // To make the node rotate around its center instead of its upper left corner,
        // set the Render Transformation Origin property to (0.5, 0.5).
        node2d->setRenderTransformationOrigin(Vector2(0.5f, 0.5f));

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

    // Initial scale factor for the pinch gesture.
    float m_pinchInitialScaleFactor;

アプリケーションのロジックを実装するクラスのパブリックセクションに、コンストラクタを追加し、ピンチジェスチャーの初期スケールファクターを設定します。
```
MyProject() :
    m_pinchInitialScaleFactor(0.0f)
{
}
```

Application::onProjectLoaded 関数内で PinchManipulator マニピュレータを作成し、そのメッセージを購読します。

たとえば、追加します:

void onProjectLoaded() override
{
    ScreenSharedPtr screen = getScreen();
    Domain* domain = getDomain();

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

    // Create an input manipulator that generates pinch messages.
    PinchManipulatorSharedPtr pinchManipulator = PinchManipulator::create(domain);

    // Add the input manipulator to the PinchNode.
    pinchNode->addInputManipulator(pinchManipulator);

    // Subscribe to the PinchManipulator::StartedMessage message at the PinchNode.
    // The PinchManipulator generates this message when the user presses two fingers on the attached node.
    pinchNode->addMessageHandler(PinchManipulator::StartedMessage, bind(&MyProject::onPinchStarted, this, placeholders::_1));

    // Subscribe to the PinchManipulator::MovedMessage message at the PinchNode.
    // The PinchManipulator generates this message first when the scale or rotation threshold is exceeded
    // and after that when the tracked touches have moved between updates.
    pinchNode->addMessageHandler(PinchManipulator::MovedMessage, bind(&MyProject::onPinchMoved, this, placeholders::_1));
}

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

アプリケーション内で、ピンチジェスチャーを有効にしたノードをズームおよび回転します。

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

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

Pinch Started トリガーは、ユーザーが2本の指でノードに触れたときに発動します。
Pinch Moved トリガーは、ユーザーがピンチジェスチャーでノードをズームまたは回転させたときに発動します。
Pinch Finished トリガーは、ユーザーが指を離してピンチジェスチャーを終了したときに発動します。
Pinch Canceled トリガーは、ピンチジェスチャー中にフォーカスがノードから外れると発動します。

Pinch Manipulator トリガーを使用するには：

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

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

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

アプリケーション内で、ピンチジェスチャーを有効にしたノードをズームおよび回転します。

Pinch Manipulator を使用する¶

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

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

関連項目¶