zoukankan      html  css  js  c++  java
  • 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,
             0,
            height: 0
          }
  • 相关阅读:
    loadrunner-3-19LR常见函数
    loadrunner-3-18Service-Level Agreement(服务水平协议)
    loadrunner-3-15IP欺骗
    loadrunner-3-14集合点
    Python 静态类型检查 mypy 示例
    JavaScript 中 == 和 === 的区别
    Python 一键安装全部依赖包
    TypeError: 'NoneType' object is not subscriptable
    前端开发神器 VSCode 使用总结
    Next.js 配置接口跨域代理转发
  • 原文地址:https://www.cnblogs.com/candy-Yao/p/9945357.html
Copyright © 2011-2022 走看看