信息提示面板

课程链接：www.bilibili.com/cheese/play…

代码链接：github.com/buglas/robo…

课程目标

• 创建关节信息提示面板

1-信息提示面板的功能

当鼠标划入link 的时候，可以显示一个信息提示面板，告诉用户相应link 的名称，以及可以拖拽变换的关节信息。

2-信息提示逻辑

我们之前说旋转拖拽的时候说过，鼠标划入的对象肯定是一个link对象，而我们要拖拽变换的joint 是link 的父对象。

如果这个joint 的type 是fixed或其它不可变换的类型，我们需要再往其父级寻找可以变换的joint。

3-代码实现

1.在RobotVisual 类中，创建2个对应提示面板css样式和提示信息的属性。

• src/robot/RobotVisual.ts

class RobotVisual extends EventDispatcher<any> {
  //...
  tipStyle = ref({
    display: "none",
    top: "0",
    left: "0",
  })
  tipMsg= ref({
    jointName: "",
    jointValue: "",
    linkName: "",
  });
  //...
}

2.在urdfDragControls对象的鼠标事件，设置上面的两个属性。

• src/robot/RobotVisual.ts

class RobotVisual extends EventDispatcher<any> {
  //...
  tipStyle = ref({
    display: "none",
    top: "0",
    left: "0",
  })
  tipMsg= ref({
    jointName: "",
    jointValue: "",
    linkName: "",
  });
  //...
  // 监听事件
  listen() {
    const {
      tipStyle,
      tipMsg:{value:tipMsgValue},
      urdfDragControls,
    } = this;
    /* 
      协调orbitControls和 urdfDragControls 的有效性
      控制关节信息提示面板的相关数据 
    */
    urdfDragControls.addEventListener('beginDrag', () => {
      this.orbitControls.enabled = false;
      tipStyle.value.display = "none";
    });
    urdfDragControls.addEventListener("pointerMoveOnRobot", ({ x, y, joint,link }) => {
      tipStyle.value.display = "block";
      tipStyle.value.left = x + "px";
      tipStyle.value.top = y + "px";
      if(joint){
        tipMsgValue.jointName=joint.name
        tipMsgValue.jointValue=joint.userData.value.toFixed(4)
      }else{
        tipMsgValue.jointName='null'
        tipMsgValue.jointValue='null'
      }
      tipMsgValue.linkName = link.name;
    });
    urdfDragControls.addEventListener("pointerOutRobot", () => {
      tipStyle.value.display = "none";
    });
    //...
  }
  //...
}

3.在App.vue中创建信息提示面板。

<script setup lang="ts">
//...
const robotVisual = new RobotVisual(hdrURL);
const {tipStyle, tipMsg, urdfDragControls } = robotVisual;
//...
</script>
<template>
  <div id="robotVisual">
      <!-- ... -->
      <div id="cont">
          <!-- ... -->
          <div id="canvasWrapper" ref="canvasWrapperRef">
            <div id="robotTip" :style="tipStyle">
              <p>joint name：{{ tipMsg.jointName }}</p>
              <p>joint value：{{ tipMsg.jointValue }}</p>
              <p>link name：{{ tipMsg.linkName }}</p>
            </div>
          </div>
      </div>
  </div>
</template>     
<style scoped>
    /* ... */
    #robotTip {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.65);
      color: #fff;
      padding: 6px 9px;
      transform: translate(18px, -100%);
      border-radius: 2px;
      box-shadow: rgba(0, 0, 0, 0.4) 0 3px 3px;
    }
    #robotTip p {
      margin: 0;
      font-size: 13px;
      line-height: 24px;
    }
</style>

效果如下：

总结

这一章我们创建了机器人的信息提示面板，其实现过程比较简单，大家以此原理可以在面板里写入更多的提示内容。

下一章我们会创建URDF模型的辅助对象。