使用 Click Manipulator

使用 Click Manipulator 使用户能够在您的 Kanzi 应用程序中点击节点。

请参阅 为节点启用点击手势 和 使用 Kanzi Studio Preview 工具为节点启用点击手势。。

您可以使用以下方法响应点击手势:

../../_images/click-manipulator.gif

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

要为节点启用双击手势,使用 Multi-Click Manipulator。请参阅 使用 Multi-Click Manipulator。

为节点启用点击手势

要为节点启用点击手势:

  1. 在 Node Tree 中创建一个您想启用点击手势的节点。

    例如,创建一个 Empty Node 2D 节点,将其命名为 ClickNode,并向该节点添加内容。

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

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

    ../../_images/clicknode-properties.png
  3. 在 Node Components 按 Alt 并右键单击 Input Manipulators 中,选择 Click Manipulator。

    通过这种方式,您可以使 ClickNode 节点对点击手势做出反应。通过向节点添加 Click Manipulator 组件,您可以在该节点上安装 ClickManipulator。

    ../../_images/add-click-manipulator.png ../../_images/click-manipulator-properties.png
  4. 使用 Click Manipulator 触发器对点击手势做出反应。例如,您可以在用户点击该节点时更改节点的外观。

    请参阅 使用 Click Manipulator 触发器。

使用 Kanzi Studio Preview 工具为节点启用点击手势。

要使用 Kanzi Studio Preview 工具为节点启用点击手势:

  1. 选择或创建您希望对点击作出反应的节点。

    例如,创建一个 Image 节点。

    ../../_images/clickablenode-in-project.png
  2. 在 Preview 中选择 Node tool image0,右键单击您想要响应点击的节点,然后在 Create click trigger with action 菜单中选择一个操作。

    例如,选择 Log > Write Log 操作。

    ../../_images/create-click-trigger-with-action.png

    当您创建带有动作的点击触发器时,Kanzi Studio 添加到该节点:

    • Input > Hit Testable 属性并将其设置为启用。

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

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

    • Click Manipulator 节点组件

      通过向节点添加 Click Manipulator 组件,您可以在该节点上安装 ClickManipulator。这样,您就可以为节点启用点击手势。

    • Click 触发您选择的操作。

      当用户在指针仍在节点区域内时按下并释放节点,并且 Kanzi 未识别到其他手势时,Click 触发器被激活。

    ../../_images/hit-testable-and-click-enabled-properties.png ../../_images/click-manipulator-with-trigger.png ../../_images/click-trigger-with-write-log-null.png
  3. 在 Node Components > Triggers 中配置当用户触发触发器时 Click 触发器执行的操作。

    例如:在 Write Log 操作中,将 Log Text 设置为您希望在用户单击该节点时写入 Log 窗口的消息。

    要了解有关 Write Log 操作的更多信息,请参阅 使用 Write Log 操作。

    ../../_images/writelog-for-clickablenode.png
  4. 在 Preview 中,单击 image1 以切换到 Interact 模式。

    在 Preview 中,当您单击设置为对单击做出反应的节点时,触发器会在 Preview 中执行您在 Create click trigger with action 中选择的操作。

使用 Click Manipulator 触发器

使用 Click Manipulator 触发器对点击手势做出反应。例如,您可以在用户点击该节点时更改节点的外观。

Click Manipulator 具有以下触发器:

  • 当用户在指针仍在节点区域内时按下并释放节点,并且 Kanzi 未识别到其他手势时,Click 触发器被激活。

  • 当用户按下节点时,Begin 触发器被激活。

  • Cancel 触发器已激活:

    • 当用户先按下一个节点,然后将指针移到节点区域之外,并松开指针。

    • 当在点击手势期间焦点从节点移开时。

    • 当 Kanzi 触发 Long Press 触发器时。

  • Enter 触发器已触发:

    • 当用户按下一个节点。

    • 当用户按下节点,在按住指针的同时将指针移动到节点区域之外,然后移回到节点区域。

  • Leave 触发器已关闭:

    • 当用户按下一个节点并释放按压时。

    • 当用户触发 Long Press 触发器时。

    • 当用户按下节点,然后将指针移到节点区域之外时。

要使用 Click Manipulator 触发器:

  1. 启用节点的点击手势。请参阅 为节点启用点击手势。

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

    例如,创建状态机,您可以定义状态以设置节点在不同的 Click Manipulator 触发器被触发时的外观。请参阅 创建状态机。

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

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

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

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

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

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

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

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

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

      ../../_images/click-click-click-click-go-to-state.png ../../_images/go-to-state-action-for-click.png

使用 Kanzi Engine API 对点击手势做出反应。

要使用 Kanzi Engine API 响应点击手势:

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

    ../../_images/create-project-with-application.png
  2. 启用节点的点击手势。请参阅 为节点启用点击手势。

    当您在 Kanzi Studio 中为节点启用点击手势时,您会在该节点中创建一个 ClickManipulatorComponent,它会为该节点安装一个 ClickManipulator。

  3. 在 Node Tree 按 Alt 并右键单击 中,创建的节点并选择 Alias。

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

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

    ../../_images/clicknode-create-alias.png ../../_images/clicknode-in-dictionaries.png
  4. 选择 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
  5. 在 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 启动。

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

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

    generate_cmake_vs2019_solution.bat
    

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

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

    1. 定义不同点击消息的处理程序。在每个处理程序中添加定义特定点击事件行为的代码。

      您还可以在 Kanzi Studio 中使用 Click Manipulator 触发器定义行为。请参阅 使用 Click Manipulator 触发器。

      例如,要为 ClickManipulator::ClickMessage 和 ClickManipulator::ClickCancelMessage 消息定义处理程序,在实现应用程序逻辑的类的公共部分之后添加:

      private:
          // Define the handler for the ClickManipulator::ClickMessage message from the nodes
          // that have an input manipulator which generates the ClickMessage message.
          void onNodeClicked(ClickManipulator::ClickMessageArguments&)
          {
              // Add the code that handles the click event.
          }
      
          // Define the handler for the ClickManipulator::ClickCancelMessage message from the nodes
          // that have an input manipulator which generates the ClickCancelMessage message.
          void onNodeClickCanceled(ClickManipulator::ClickCancelMessageArguments&)
          {
              // Add the code that handles the click cancel event.
          }
      
    2. 在 Application::onProjectLoaded 函数中订阅 ClickManipulator 消息。

      例如,添加:

      void onProjectLoaded() override
      {
          ScreenSharedPtr screen = getScreen();
      
          // Get the ClickNode node using its alias.
          NodeSharedPtr clickNode = screen->lookupNode<Node>("#ClickNode");
      
          // Subscribe to the ClickManipulator::ClickMessage message at the ClickNode node.
          // The ClickManipulator manipulator generates this message when the user clicks the node.
          clickNode->addMessageHandler(ClickManipulator::ClickMessage, bind(&MyProject::onNodeClicked, this, placeholders::_1));
      
          // Subscribe to the ClickManipulator::ClickCancelMessage message at the ClickNode node.
          // The ClickManipulator manipulator generates this message when the user first presses down
          // the node, then moves the pointer outside of the node area, and lifts the pointer.
          clickNode->addMessageHandler(ClickManipulator::ClickCancelMessage, bind(&MyProject::onNodeClickCanceled, this, placeholders::_1));
      }
      
  8. 构建并运行您的应用程序。请参阅 部署 Kanzi 应用程序。

    在该应用程序中:

    • 单击您启用了点击手势的节点。应用程序执行您在 ClickManipulator::ClickMessage 消息的处理程序中定义的行为。

    • 按下已启用点击手势的节点,然后将指针移到节点区域之外,再松开指针。应用程序执行您在 ClickManipulator::ClickCancelMessage 消息的处理程序中定义的行为。

另请参阅

处理用户输入

使用 Multi-Click Manipulator

使用 Long-Press Manipulator

部署 Kanzi 应用程序

使用触发器