奇怪的需求之与图片做交互

1.起因

客户想要展示自己的地图,该地图上有各种工作数据,和工作点位,已有的地图不能满足需求.于是提出将这张图片当成大背景

2.经过

鉴于文件格式和尺寸的原因,协商后客户提出将图片做成缩放效果,同时具有点击效果,原先直接进入的主页,现在为点击图片中的某条线路进入主页面.

3.结果

先实现图片缩放效果

html 复制代码
<template>
    <div class="container">
        <div class="test">
            <img src="../assets/xiaoxin.png" alt="" >
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      imgWidth: 200
    }
  },
  mounted () {
    this.scrollEvent()
  },
  computed: {
  },
  methods: {
    scrollEvent () {
      document.querySelector('.test img').addEventListener('wheel', e => {
        const img = document.querySelector('.test img')
        // 判断滚轮是上滚还是下滚,对应的进行放大缩小操作
        // 判断条件可以设置图片的最大宽高进行限制
        if (e.deltaY < 0 && this.imgWidth < 3720) {
          console.log('往上滚,放大图片')
          this.imgWidth += 100
        }
        if (e.deltaY > 0 && this.imgWidth > 200) {
          this.imgWidth -= 100
          console.log('往下滚,缩小图片')
        }
        img.style.width = `${this.imgWidth}px`
      })
    }
  }
}
</script>
<style lang='scss'  scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: pink;
}

.test {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

点击效果实现

1.鉴于图片可以放大缩小,点击点就无法做成固定的位置.只能先给图片元素添加点击事件.

2.观察点击事件传入的参数,e.target.clientWidth和e.target.clientHeight是图片被点击时的宽和高,同时存在e.offsetX和e.offsetY,代表鼠标点击位置相较于点击对象的偏移值.

3.由已知条件可知:点击事件发生时鼠标在X方向的偏移值与图片元素此时的宽度的比值是固定的,同理Y方向的偏移值和图片元素此时的高度之比也是固定的.通过这两个比值的范围,可以粗略判断当前点击位置是否在图片对应的位置上

javascript 复制代码
 imgClickEvent (e) {
      const stationX = (e.offsetX / e.target.clientWidth).toFixed(2)
      const stationY = (e.offsetY / e.target.clientHeight).toFixed(2)
      console.log(stationX, stationY, 'message')
      if (stationX > 0.40 && stationX < 0.43 && stationY > 0.70 && stationY < 0.73) {
        console.log('单击小新的嘴巴')
      }
    },

综合代码如下:

html 复制代码
<template>
    <div class="container">
        <div class="test">
            <img src="../assets/xiaoxin.png" alt="" @click="imgClickEvent">
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      imgWidth: 200
    }
  },
  mounted () {
    this.scrollEvent()
  },
  computed: {
  },
  methods: {
    imgClickEvent (e) {
      const stationX = (e.offsetX / e.target.clientWidth).toFixed(2)
      const stationY = (e.offsetY / e.target.clientHeight).toFixed(2)
      console.log(stationX, stationY, 'message')
      if (stationX > 0.40 && stationX < 0.43 && stationY > 0.70 && stationY < 0.73) {
        console.log('单击小新的嘴巴')
      }
    },
    scrollEvent () {
      document.querySelector('.test img').addEventListener('wheel', e => {
        const img = document.querySelector('.test img')
        // 判断滚轮是上滚还是下滚,对应的进行放大缩小操作
        // 判断条件可以设置图片的最大宽高进行限制
        if (e.deltaY < 0 && this.imgWidth < 3720) {
          console.log('往上滚,放大图片')
          this.imgWidth += 100
        }
        if (e.deltaY > 0 && this.imgWidth > 200) {
          this.imgWidth -= 100
          console.log('往下滚,缩小图片')
        }
        img.style.width = `${this.imgWidth}px`
      })
    }
  }
}
</script>
<style lang='scss'  scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: pink;
}

.test {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
相关推荐
小桥风满袖10 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心10 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~13 分钟前
CSS3的新特性
前端·javascript·css3
我是菜鸟0713号18 分钟前
Qt 中 OPC UA 通讯实战
开发语言·qt
IT_陈寒20 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
JCBP_20 分钟前
QT(4)
开发语言·汇编·c++·qt·算法
Brookty24 分钟前
【JavaEE】线程安全-内存可见性、指令全排序
java·开发语言·后端·java-ee·线程安全·内存可见性·指令重排序
智能化咨询36 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
百锦再38 分钟前
[特殊字符] Python在CentOS系统执行深度指南
开发语言·python·plotly·django·centos·virtualenv·pygame
Anson Jiang38 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件