1. 程式人生 > >js 實現頁面區域性(或圖片)放大功能(vue)

js 實現頁面區域性(或圖片)放大功能(vue)

方法:

  adjustStart1 (e) {
      e.preventDefault()
      let event = e.touches
      if (event.length === 2) {
        this.styles = 'transform: scale(2)'
      }
    },
    // 調整開始
    adjustStart (e) {
      let event = e.touches
      this.fingerA.startX = event[0].pageX
      this.fingerA.startY = event[0].pageY
      
// 移動 if (event.length === 1) { this.isDrag = true this.isScale = false // 縮放 } else if (event.length === 2) { this.isScale = true this.isDrag = false this.fingerB.startX = event[1].pageX this.fingerB.startY = event[1].pageY } },
// 調整中,移動或縮放 adjustIng (e) { let event = e.touches this.fingerA.endX = event[0].pageX this.fingerA.endY = event[0].pageY // 移動 if (this.isDrag) { // 本次移動距離要加上之前移動的距離 this.move.x = this.fingerA.endX - this.fingerA.startX + this.move.temX this.move.y = this
.fingerA.endY - this.fingerA.startY + this.move.temY this.styles = `transform: translate(${this.move.x}px,${this.move.y}px) scale(${this.move.scale})` } else if (this.isScale) { // 縮放 this.fingerB.endX = event[1].pageX this.fingerB.endY = event[1].pageY // 兩手指間距離 let distanceStart = Math.sqrt( Math.pow(this.fingerA.startX - this.fingerB.startX, 2) + Math.pow(this.fingerA.startY - this.fingerB.startY, 2) ) let distanceEnd = Math.sqrt( Math.pow(this.fingerA.endX - this.fingerB.endX, 2) + Math.pow(this.fingerA.endY - this.fingerB.endY, 2) ) this.move.scale = (distanceEnd / distanceStart) * this.move.temScale // 向量叉乘,求出旋轉方向及角度 // 開始兩個手指的向量 var vector1 = new this.Vector( this.fingerA.startX, this.fingerA.startY, this.fingerB.startX, this.fingerB.startY ) // 結束時兩個手指的向量 var vector2 = new this.Vector( this.fingerA.endX, this.fingerA.endY, this.fingerB.endX, this.fingerB.endY ) var cos = this.calculateVM(vector1, vector2) var angle = (Math.acos(cos) * 180) / Math.PI var direction = this.calculateVC(vector1, vector2) this.move.allDeg = direction * angle + this.move.temDeg this.styles = `transform: translate(${this.move.x}px,${this.move.y}px) scale(${this.move.scale})` } }, // 調整結束 adjustEnd (e) { this.move.temX = this.move.x this.move.temY = this.move.y this.move.temScale = this.move.scale this.move.temDeg = this.move.allDeg this.isDrag = false this.isScale = false }, calculateVM (vector1, vector2) { return ( (vector1.x * vector2.x + vector1.y * vector2.y) / (Math.sqrt(vector1.x * vector1.x + vector1.y * vector1.y) * Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y)) ) }, calculateVC (vector1, vector2) { return vector1.x * vector2.y - vector2.x * vector1.y > 0 ? 1 : -1 }, Vector (x1, y1, x2, y2) { this.x = x2 - x1 this.y = y2 - y1 }

呼叫方法:

<div :style="styles" @touchstart.stop="adjustStart($event)" @touchmove.stop="adjustIng" @touchend.stop="adjustEnd"></div>

data 中定義變數:

   isScale: false,
     isDrag: false,
     styles: '',
      actived: 1,
      value1: '',
      limitHourValue: '',
      hourList: ['11', '12', '13', '14', '17', '18', '19', '20', '21'],
      // 手指A
      fingerA: {
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0
      },
      // 手指B
      fingerB: {
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0
      },
      // 調整資料
      move: {
        x: 0,
        y: 0,
        temX: 0,
        temY: 0,
        scale: 1,
        temScale: 1,
        allDeg: 0,
        temDeg: 0
      },
      // 預設樣式
      imgPosition: {
        left: 0,
        top: 0,
        width: 0,
        height: 0
      }