根据鼠标位置进行缩放

//监听滚轮时间
   gun(e){
      let wheelFlag = e.wheelDelta > 0 ? true : false
      let oldWidth = this.$refs.mainMap.offsetWidth
      let oldHeight = this.$refs.mainMap.offsetHeight
      // 分别计算出scaleX,scaleY的倍数
      let scaleX = e.offsetX / oldWidth
      let scaleY = e.offsetY / oldHeight
      if (wheelFlag) {
        this.toBig()
      } else {
        this.toSmall()
      }
      // 鼠标为中心的开始点,如果去掉这个将会以左上角开始滚动图片
      let newWidth = this.$refs.mainMap.offsetWidth
      let newHeight = this.$refs.mainMap.offsetHeight
      this.$refs.mainMap.style.left = this.$refs.mainMap.offsetLeft - scaleX * (newWidth - oldWidth) + 'px'
      this.$refs.mainMap.style.top = this.$refs.mainMap.offsetTop - scaleY * (newHeight - oldHeight) + 'px'
   }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值