使用 Pinch Manipulator

使用 Pinch Manipulator 使用户能够在您的 Kanzi 应用程序中缩放和旋转节点。

例如,您可以使用 Pinch Manipulator 使用户能够放大和缩小地图。请参阅 为节点启用捏合手势。

使用 Pinch Manipulator 触发器对捏合手势做出反应。例如,您可以在用户使用捏合手势缩放和旋转节点时设置节点的外观。

请参阅 使用 Pinch Manipulator 触发器。

Pinch Manipulator 是您可以用来在 Kanzi 应用程序中的节点添加手势识别的输入操控器之一。请参阅 使用输入操纵器。

通过完成教程学习如何使用 Pinch Manipulator。请参阅 教程:平移、缩放、轻触。

../../_images/pinch-manipulator.gif

为节点启用捏合手势

要为节点启用捏合手势:

  1. 在 Kanzi Studio 中,使用 Application 模板创建一个项目。

    ../../_images/create-project-with-application.png
  2. 在 Node Tree 中创建一个您想启用捏合手势的节点。例如,创建一个 Image 节点并将其命名为 PinchNode。

    ../../_images/pinchnode-in-project.png
  3. 在 Node Tree 中选择您在上一步中创建的节点,在 Properties 中添加 Input > Hit Testable 属性,并将其设置为启用。

    当您启用属性时,用户能选取节点。

    默认情况下,Button、Toggle Button、List Box Item Container、Scroll View、Slider 和 Text Box 节点启用了命中测试。

    请参阅 定义哪个节点接收输入。

    ../../_images/pinchnode-properties.png
  4. 在 Node Tree 按 Alt 并右键单击 中,创建的节点并选择 Alias。

    Kanzi Studio 创建一个指向您创建别名的节点的别名,并将其添加到其最近的包含资源字典的祖先节点的资源字典中。

    使用 # 符号后跟别名名称访问别名目标节点。

    ../../_images/pinchnode-create-alias.png ../../_images/pinchnode-in-dictionaries.png
  5. 选择 File > Export > Export KZB。

    Kanzi Studio creates the kzb file and configuration files from your Kanzi Studio project. Kanzi Studio stores the exported files in the <ProjectName>/Application/bin directory or the location that you set in Project > Properties in the Binary Export Directory property. The kzb file contains all nodes and resources from your Kanzi Studio project, except the resources that you mark in a localization table as locale packs.

    当您从 Visual Studio 运行您的 Kanzi 应用程序时,您的应用程序会加载 kzb 文件和配置文件。

    ../../_images/export-kzb-binary.png
  6. 在 Kanzi Studio 中,选择 File > Open Kanzi Command Prompt。

    Kanzi Command Prompt 打开 Windows 命令提示符,并为您打开 Kanzi Command Prompt 的 Kanzi 版本设置 Kanzi 环境变量。

    使用 Kanzi Command Prompt 访问 Kanzi 实用程序和构建工具,例如 Gradle、SCons 和 CMake,而无需使用绝对路径或设置环境变量。

    ../../_images/open-kanzi-command-prompt.png

    小技巧

    您可以在 Windows 开始菜单的 Rightware 目录中找到 Kanzi Command Prompt。

    当您安装了多个版本的 Kanzi 时,确保将您要在该命令提示符下使用的 Kanzi 版本的 Kanzi Command Prompt 启动。

  7. 在 <ProjectName>/Application 目录中的 Kanzi Command Prompt 中,运行生成应用程序的 Visual Studio 解决方案的脚本。

    例如,如果您使用 Visual Studio 2019,运行

    generate_cmake_vs2019_solution.bat
    

    此脚本在目录 <ProjectName>/Application/build_vs2019 中为应用程序生成一个 Visual Studio 解决方案。

  8. 在 Visual Studio 中,打开 <ProjectName>/Application/build_vs<Version>/<ProjectName>.sln Visual Studio 解决方案,并在实现应用程序逻辑的文件中创建和配置 PinchManipulator:

    1. 为捏合消息定义处理程序。

      例如,在实现应用程序逻辑的类的 public 部分后添加:

      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;
      
    2. 在实现应用程序逻辑的类的 public 部分,添加构造函数并为捏合手势设置初始比例因子:

      MyProject() :
          m_pinchInitialScaleFactor(0.0f)
      {
      }
      
    3. 在 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));
      }
      
  9. 构建并运行您的应用程序。请参阅 部署 Kanzi 应用程序。

    在应用程序中缩放或旋转已启用捏合手势的节点。

    ../../_images/pinch-manipulator.gif

使用 Pinch Manipulator 触发器

使用 Pinch Manipulator 触发器对捏合手势做出反应。例如,您可以在用户使用捏合手势缩放和旋转节点时设置节点的外观。

Pinch Manipulator 具有以下触发器:

  • 当用户用两根手指触摸节点时,Pinch Started 触发器被激活。

  • 当用户使用捏合手势缩放或旋转节点时,Pinch Moved 触发器被激活。

  • 当用户通过抬起手指结束捏合手势时,Pinch Finished 触发器被触发。

  • 当在捏合手势期间焦点移开节点时,Pinch Canceled 触发器被触发。

要使用 Pinch Manipulator 触发器:

  1. 为节点启用捏合手势。请参阅 为节点启用捏合手势。

  2. 定义您想通过 Pinch Manipulator 触发器设置的行为。

    例如,创建状态机,您可以定义状态以设置节点在 Pinch Moved 和 Pinch Finished 触发器被触发时的外观。请参阅 创建状态机。

  3. 添加和配置 Pinch Manipulator 触发器:

    1. 在 Node Tree 中选择您要添加触发器的节点,然后在 Node Components > Triggers 中添加一个 Pinch Manipulator 触发器。

      例如:在 Node Tree 中,选择您启用了捏合手势的节点,在 Node Components 按 Alt 并右键单击 Triggers 中,选择 Message Trigger > Pinch Manipulator > Pinch Moved。

      ../../_images/pinchnode-in-project.png ../../_images/add-pinch-moved-trigger.png
    2. 在您上一步创建的触发器中,禁用 Set Message Handled 属性。

      当您禁用 Set Message Handled 属性时,此触发器会拦截消息,但不会停止它。这样,您可以让输入操控器处理该消息。

      ../../_images/pinch-moved-trigger-settings.png
    3. 在 Node Components 按 Alt 并右键单击 中,选择您创建的触发器,选择一个操作,并进行配置。

      例如,选择 Dispatch Message Action > State Manager > Go to State,然后在操作集中:

      • 将 Target Item 到您启用捏合手势的节点。

      • State 到状态,该状态设置节点的外观,当 Pinch Moved 触发器被触发时。

      ../../_images/pinch-moved-add-go-to-state-action.png ../../_images/go-to-state-action-for-pinch-moved.png
  4. 重复上一步,以添加并配置更多 Pinch Manipulator 触发器。

    例如,添加 Pinch Finished 触发器,并在触发器的 Go to State 操作中,将 State 设置为在触发器被触发时设置节点外观的状态。

  5. 选择 File > Export > Export KZB。

  6. 构建并运行您的应用程序。请参阅 部署 Kanzi 应用程序。

    在应用程序中缩放或旋转已启用捏合手势的节点。

    ../../_images/pinch-manipulator-with-states.gif

另请参阅

教程:平移、缩放、轻触

处理用户输入

使用 Pan Manipulator

使用 Scroll View 节点

部署 Kanzi 应用程序

使用触发器