最近實現(xiàn)了一個新的需求，大體內(nèi)容是要對所播放的視頻做一個放大縮小的處理，同時在視頻放大的同時要實現(xiàn)視頻的一個拖拽，拖拽的同時，要對視頻拖動的范圍作出一個限制，下面來看看我的一個實現(xiàn)的思路。

技術(shù)棧：Vue3.2 + TS文章來源地址http://www.zghlxwxcb.cn/news/detail-823735.html

1.放大縮小采用的形式是什么？

/1.肯定不能單純的采用px放大，這樣會出現(xiàn)視頻放大的時候位置發(fā)生變動
/2.采用scale放大，這樣每次放大都是視頻的中心點

2.拖動實現(xiàn)

/1.當鼠標按下和視頻已經(jīng)放大之后，才允許用戶拖動
/2.同時需要對視頻拖動的范圍作出限制
/3.按鈕抬起的時候，需要把拖動取消掉，同時拖動限制離開范圍也需要把按鈕給取消掉

3.實現(xiàn)

//頁面結(jié)構(gòu)
//給外層div綁定mouseleave，給視頻綁定鼠標抬起，按下，移動相關(guān)事件，同時視頻放大之后，綁定動態(tài)的class
<div class="videoBox" @mouseleave="endDrag">
   <video
     ref="videoRef"
     id="customVideo"
     class="video-js vjs-big-play-centered"
     @mouseup="endDrag" 
     @mousedown="dragging" 
     @mousemove="handleDrag"
     :class="{'videoPoint': scale > 1}" 
     :style="{ width: '100%', height: '100%' }">
    </video>
</div>
//點擊事件
//點擊事件綁定一個就可以，同時傳遞不同的參數(shù)，來進行控制
<a-tooltip content="放大">
  <a-button :style="{ color: 'red' }" @click="scaleUp(1)">
    放大
  </a-button>
</a-tooltip>
<a-tooltip content="縮小">
  <a-button :style="{ color: 'red' }" @click="scaleUp(-1)">
    縮小
  </a-button>
</a-tooltip>
<a-tooltip content="還原">
  <a-button :style="{ color: 'red' }" @click="scaleUp(0)">
    還原
  </a-button>
</a-tooltip>

//業(yè)務(wù)邏輯實現(xiàn)
// 1.視頻放大縮小邏輯實現(xiàn)
// 視頻放大，縮小，還原
const scale = ref(1) //控制視頻放大縮小倍數(shù)
const videoRef = ref(null)//定義ref，拿到video標簽相關(guān)的屬性
const scaleUp = (flag) => {
  // 根據(jù)flag的值，對視頻進行放大縮小和還原的處理
  switch (flag) {
    case 1:
      if (scale.value.toFixed(2) >= 2.5) {//js的精度誤差，所以加了一個toFixed保留兩位小數(shù)
        return
      }
      scale.value += 0.1
      videoRef.value.style.transform = `scale(${scale.value})`;
      break;
    case -1:
      if (scale.value.toFixed(2) <= 0.1) {
        return
      }
      scale.value -= 0.1
      videoRef.value.style.transform = `scale(${scale.value})`;
      break;
    default:
      resetPosition()
  }
}
//還原：還原他的縮放倍數(shù)，還原拖動位置
const resetPosition = () => {
  videoRef.value.style.transform = `scale(1)`;
  scale.value = 1
  videoPosition.x = 0;
  videoPosition.y = 0;
  videoRef.value.style.left = '0px';
  videoRef.value.style.top = '0px';
}

2.視頻拖動
這一塊是比較困難的，需要把詳細的思路理清楚
//定義鼠標的起始點擊位置
const dragStartX = ref(0)
const dragStartY = ref(0)
//控制鼠標是否按下
const isClick = ref(false)
//控制視頻位置的變化
const videoPosition = reactive({
  x:0,
  y:0
})
// 判斷是否可以拖動 滿足放大和按下，才可拖動，使用計算屬性控制
const isDragging = computed(() => {
  return scale.value > 1 && isClick.value ? true :false
});
//鼠標按下
const dragging = (e) => {
  isClick.value = true
  dragStartX.value = e.clientX - videoPosition.x;
  dragStartY.value = e.clientY - videoPosition.y;
  window.addEventListener('mouseup', endDrag);
}
let containerRect = null
const handleDrag = (e) => {
  if (isClick.value) {
    const {w,h} = getVideoSize()
    videoPosition.x = e.clientX - dragStartX.value;
    videoPosition.y = e.clientY - dragStartY.value;
    // 限制取極值
    videoPosition.x = Math.min(Math.max(-w, videoPosition.x), w);
    videoPosition.y = Math.min(Math.max(-h, videoPosition.y), h);
  }
  // 滿足點擊和放大，才進行拖動
  if (isDragging.value) {
    videoRef.value.style.left = `${videoPosition.x}px`;
    videoRef.value.style.top = `${videoPosition.y}px`;
  }
}

const getVideoSize = () => {
  containerRect = videoRef.value.getBoundingClientRect()
  const { width, height } = containerRect
  const w = width / 3
  const h = height  / 2
  console.log(width);
  return {w,h}
}

//取消拖動
const endDrag = () => {
  isClick.value = false
  window.removeEventListener('mouseup', endDrag);
};

到了這里，關(guān)于前端Vue3+TS實現(xiàn)視頻放大縮小，放大后實現(xiàn)視頻的拖動+拖動邊框限制的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！