优化狗名称框

src/assets/scss/myVideo.scss

@@ -19,9 +19,7 @@
   border-left: 2px solid #0079fe;
   border-right: 2px solid #0079fe;
   border-bottom: 3px solid #0079fe;
-  top: -22px;
-  left: -10px;
-  min-width: 50px;
+  min-width: 60px;
   padding: 2px 5px;
 }
 

src/components/MyVideo/track/index.ts

@@ -65,29 +65,26 @@ class DogTrack extends Component {
     if (!dogs) return
     for (const [key, value] of dogs.entries()) {
       const myel = this.dogDiv.get(key)
-      if (!this.player_.isFullscreen()) {
       //跟踪框大小
-        myel.style.width = `${(value.x2 - value.x1) * this.player_.currentWidth()}px`
-        myel.style.height = `${(value.y2 - value.y1) * (this.player_.currentHeight() + 30)}px`
+      myel[0].style.width = `${(value.x2 - value.x1) * this.player_.currentWidth()}px`
+      myel[0].style.height = `${(value.y2 - value.y1) * (this.player_.currentHeight() + 30)}px`
       //跟踪框位置
-        myel.style.top = `${value.y1 * this.player_.currentHeight()}px`
-        myel.style.left = `${value.x1 * this.player_.currentWidth()}px`
-        // console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.player_.currentWidth()},screen-height:${this.player_.currentHeight()},dogs:${JSON.stringify(value)}`)
-      } else {
-        myel.style.width = `${(value.x2 - value.x1) * this.player_.currentWidth()}px`
-        myel.style.height = `${(value.y2 - value.y1) * (this.player_.currentHeight() + 30)}px`
-        //跟踪框位置
-        myel.style.top = `${value.y1 * this.player_.currentHeight()}px`
-        myel.style.left = `${value.x1 * this.player_.currentWidth()}px`
-        // console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.player_.currentWidth()},screen-height:${this.player_.currentHeight()},dogs:${JSON.stringify(value)}`)
-      }
+      const t = value.y1 * this.player_.currentHeight()
+      const l = value.x1 * this.player_.currentWidth()
+      myel[0].style.top = `${t}px`
+      myel[0].style.left = `${l}px`
+      myel[1].style.top = `${t - 21}px`
+      myel[1].style.left = `${l - 5}px`
 
-      myel.className = myel.className.replace(/display-none/ig, "")
+      myel[0].className = myel[0].className.replace(/display-none/ig, "")
+      myel[1].className = myel[1].className.replace(/display-none/ig, "")
     }
     //清理掉当前frame没有的dog追踪
     for (const id of this.dogDiv.keys()) {
       if (!dogs.has(id)) {
-        this.dogDiv.get(id).classList.add("display-none")
+        const arrEl = this.dogDiv.get(id)
+        arrEl[0].classList.add("display-none")
+        arrEl[1].classList.add("display-none")
       }
     }
   }
@@ -126,6 +123,7 @@ class DogTrack extends Component {
       //dog name
       const dogNameEl = document.createElement("div")
       dogNameEl.classList.add("najiu-dog-track-dog-name")
+      dogNameEl.id = `dog_name_${key}`
       //@ts-ignore
       const dogName = document.createTextNode(`狗${value.obj_id}`)
       if (key == currentDogId) {
@@ -138,13 +136,15 @@ class DogTrack extends Component {
       el.appendChild(dogNameEl)
       //@ts-ignore
       myContainer.appendChild(el)
-      this.dogDiv.set(key, el)
+      myContainer.appendChild(dogNameEl)
+      this.dogDiv.set(key, [el, dogNameEl])
     }
   }
 
   clearOldDogDiv() {
     for (const value of this.dogDiv.values()) {
-      value.remove()
+      value[0].remove()
+      value[1].remove()
     }
   }