shuangchuangzhou_2022/src/pages/mobilescene/birdview/ViewOperation.vue

<template>
  <div class="per-layout" ref="layout">
    <div id="box" class="content" :style="contentStyle">
      <slot />
    </div>
  </div>
</template>

<script>
import {setGesture} from '@/utils'
import browser from '@/utils/browser'

const MAXSCALE = 1
const MINSCALE = 1
const RANGE = 0.1
const wh = {width: window.innerHeight * (1920 / 1080), height: window.innerHeight}

export default {
  data () {
    return {
      wh,
      width: wh.width,
      height: wh.height,
      tscale: 1,
      translate: {
        x: 0,
        y: 0
      },
      isFireFox: browser.gecko,
      ismobile: browser.mobile
    }
  },
  computed: {
    contentStyle () {
      let tempW = Math.round(this.tscale * wh.width)
      let tempH = Math.round(this.tscale * wh.height)

      let val = `translateX(calc(-50% + ${this.translate.x}px))
        translateY(calc(-50% + ${this.translate.y}px))
        `
      let width = `${tempW % 2 === 0 ? tempW : tempW + 1}px`
      let height = `${tempH % 2 === 0 ? tempH : tempH + 1}px`
      let top = `${Math.round(0.5 * wh.height)}px`
      return {transform: val, width, height, top}
    },
    wLimit () {
      return this.ismobile ? ((wh.width * Math.max(this.tscale, 1))) / 2 - window.innerWidth / 2 : ((wh.width * this.tscale) - wh.width) / 2
    },
    hLimit () {
      return ((wh.height * this.tscale) - wh.height) / 2
    }
  },
  watch: {
    tscale () {
      this.$emit('closeItem')
      this.translate.x = Math.min(Math.max(this.translate.x, -this.wLimit), this.wLimit)
      this.translate.y = Math.min(Math.max(this.translate.y, -this.hLimit), this.hLimit)
    }
  },
  methods: {
    readyMove (ev) {
      // ev.preventDefault()
      ev.stopPropagation()
      let startX, startY
      if (ev.screenX) {
        startX = ev.screenX
        startY = ev.screenY
      } else {
        startX = ev.touches[0].clientX
        startY = ev.touches[0].clientY
      }

      let x = this.translate.x
      let y = this.translate.y
      let moveHandle = ev => {
        let moveX, moveY
        if (ev.screenX) {
          moveX = ev.screenX
          moveY = ev.screenY
        } else {
          moveX = ev.touches[0].clientX
          moveY = ev.touches[0].clientY
        }

        this.translate.x = Math.min(Math.max((x + moveX - startX), -this.wLimit), this.wLimit)
        this.translate.y = Math.min(Math.max((y + moveY - startY), -this.hLimit), this.hLimit)
      }

      let upHandle = () => {
        document.removeEventListener('touchmove', moveHandle, { passive: false })
        document.removeEventListener('touchend', upHandle)
        document.removeEventListener('mousemove', moveHandle, { passive: false })
        document.removeEventListener('mouseup', upHandle)
      }

      document.addEventListener('touchmove', moveHandle, { passive: false })
      document.addEventListener('touchend', upHandle)
      document.addEventListener('mousemove', moveHandle, { passive: false })
      document.addEventListener('mouseup', upHandle)
    },
    scrollFunc  (e) {
      e = e || window.event
      let up = () => {
        this.tscale < MAXSCALE && (this.tscale += RANGE)
      }
      let down = () => {
        let scaleFuc = (y) => {
          this.translate = {
            x: 0,
            y
          }
        }
        this.tscale > MINSCALE && (this.tscale -= RANGE)
        this.ismobile ? (this.tscale === 3 && scaleFuc(184)) : (this.tscale === 1 && scaleFuc(0))
      }
      if (this.isFireFox) {
        switch (true) {
          case e.detail > 0: // 当滑轮向下滚动时
            down()
            break
          default:
            up()
            break
        }
      } else { // 判断浏览器IE，谷歌滑轮事件
        switch (true) {
          case e.wheelDelta > 0:// 当滑轮向上滚动时
            up()
            break
          default:
            down()
            break
        }
      }
    }
  },
  mounted () {
    var box = document.querySelector('#box')

    this.readyMove = this.readyMove.bind(this)
    this.$refs.layout.addEventListener('mousedown', this.readyMove,  { capture: false })
    this.$refs.layout.addEventListener('touchstart', this.readyMove,  { capture: false })
    /* IE、Opera注册事件 */
    if (document.attachEvent) {
      box.attachEvent('onmousewheel', this.scrollFunc)
    }
    // Firefox使用addEventListener添加滚轮事件
    if (document.addEventListener) { // firefox
      box.addEventListener('DOMMouseScroll', this.scrollFunc, false)
    }
    // Safari与Chrome属于同一类型
    window.onmousewheel = box.onmousewheel = this.scrollFunc

    var boxGesture = setGesture(box) // 得到一个对象
    boxGesture.gesturestart = function () { // 双指开始
    }
    boxGesture.gesturemove = () => { // 双指移动
      // let temp = this.tscale + e.dec
      // // this.tscale = Math.max(MINSCALE, Math.min(MAXSCALE, temp))
      // this.tscale = temp < MAXSCALE ? temp : MAXSCALE
      // this.tscale = temp > MINSCALE ? temp : MINSCALE
    }
    boxGesture.gestureend = function () { // 双指结束
    }
  },
  beforeDestroy () {
    this.$refs.layout.removeEventListener('mousedown', this.readyMove)
    this.$refs.layout.removeEventListener('touchstart', this.readyMove)
  }
}
</script>

<style lang="less" scoped>
.per-layout{
  width: 100%;
  height: 100%;
  touch-action:none;
}

.content{
  width: 120%;
  will-change: transform;
  position: relative;
  left: 50%;
  height: 100%;
  touch-action:none;
}

</style>