調整 Banner 圖片位置 ［Vue］

使用 JS 寫一個調整介面讓使用者調整 banner

▍問題

今天設計一個 banner，但是因為美觀與一致性，所以設定了高度，這導致使用上傳的圖片如果不府和必須卡掉部分圖片。

解決方法可以請使用者上傳時限制上傳圖片大小，或是自己用個介面讓使用去選擇他要的圖片部份。

本篇只針對 JS 做講解。

▍原始碼及畫面結果

畫面上方是顯示給使用者的 banner，而下方是可以透過拖曳去調整 banner。

▍需要完成的事

1. 拖曳圖片範圍框可以移動
2. 在一定範圍內才能拖曳
3. 使用者畫面必須是拖曳完後的畫面

▍JS 程式設計

1. 拖曳圖片範圍框可以移動

#html
<div class=”box” ref=”box” @drag=”moveBox” :style=”boxStyle”>

這裡使用 vue 的 drag 事件。

下面事寫在 moveBox() 事件裡面可以移動畫面的 code。

#javascript
const { box, cutEdit } = this.$refs
const boxHalfHeight = this.boxHeightHandle(box)
let { top: cutEditTop } = cutEdit.getBoundingClientRect()
const intY = event.clientY - cutEditTop - boxHalfHeight

this.boxStyle.top = `${intY}px`
this.boxImgStyle.transform = `translateY(-${intY}px)`

boxHalfHeight：.box 框框高度的一半

cutEditTop：取得 #cutEdit 距離視窗最上面距離

event.clientY：這裡的 event 是滑鼠拖曳的事件，藉由這個來取得滑鼠到畫面視窗最上面距離

intY：取得 .box 和 #cutEdit 之間的距離

利用 intY 來設定 .box 距離 #cutEdit 之間的距離，和圖片 transform 位置，每次拖曳更新。而之所以剪掉 boxHalfHeight 是因為要讓拖曳時滑鼠在 .box 中間。

intY圖示

2. 在一定範圍內才能拖曳

利用 if 來判斷，如果超過 #cutEdit 圖片範圍框就不脆繼續移動。

if (
      event.pageY + boxHalfHeight <=
      cutEdit.offsetTop + cutEdit.clientHeight &&
      event.pageY - boxHalfHeight >= cutEdit.offsetTop
 ) {
    ......
 }

event.pageY - boxHalfHeight 就是網頁最上面到 .box 上邊緣距離（下圖線條 A）

event.pageY + boxHalfHeight 就是網頁最上面到 .box 下邊緣距離（下圖線條 B）

cutEdit.offsetTop 就是 #cutEdit 上邊緣到最上面距離（下圖線條 C）

cutEdit.offsetTop + cutEdit.clientHeight 就是 #cutEdit 下邊緣到最上面距離（下圖線條 D）

3. 使用者畫面必須是拖曳完後的畫面

拖曳完成後，最上面的 Banner 要與所以拖曳的畫面一樣。

this.crop = boxTop — cutEditTop

利用 crop 紀錄距離，然後畫面中的 Banner 套用 css transform。如此一來圖片就會跟著拖曳而改變。這邊牽扯的 vue css 綁定值，完整請看原始程式碼。

this.bannerImgStyle.transform = `translateY(-${this.crop}px)`