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

1.起因

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

2.经过

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

3.结果

在这里插入图片描述

先实现图片缩放效果

<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 -= 100console.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方向的偏移值和图片元素此时的高度之比也是固定的.通过这两个比值的范围,可以粗略判断当前点击位置是否在图片对应的位置上

 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('单击小新的嘴巴')}},

在这里插入图片描述

综合代码如下:

<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 -= 100console.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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710039.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[LeetCode]143.重排链表

143. 重排链表 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/reorder-list/description/ 题目 示例 解题思路 寻找链表中点 链表逆序 合并链表 注意到目标链表即为将原链表的左半端和反转后的右半端合并后的结果。 这样我们的任务即可划分为三步&a…

Python中的os库

一.OS库简介 OS是Operating System的简写&#xff0c;即操作系统。 OS库是一个操作系统接口模块&#xff0c;提供一些方便使用操作系统相关功能的函数。 二.OS库常用函数 2.1文件和目录 2.1.1&#xff1a;os.getcwd() 作用&#xff1a;返回当前工作目录&#xff0c;结果是…

Python中re(正则)模块的使用

re 是 Python 标准库中的一个模块&#xff0c;用于支持正则表达式操作。通过 re 模块&#xff0c;可以使用各种正则表达式来搜索、匹配和操作字符串数据。 使用 re 模块可以帮助在处理字符串时进行高效的搜索和替换操作&#xff0c;特别适用于需要处理文本数据的情况。 # 导入…

如何在Window系统部署BUG管理软件并结合内网穿透实现远程管理本地BUG

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…

微信小程序开启横屏调试

我们先打开小程序项目 开启真机运行 目前是一个竖屏的 然后打开全局配置文件 app.json 给下面的 window 对象 下面加一个 pageOrientation 属性 值为 landscape 运行结果如下 然后 我们开启真机运行 此时 就变成了个横屏的效果

Android、ios 打包一键生成自定义尺寸应用图标

这里以uniapp 打包为例 这里是打包时分别需要使用的尺寸 打开一键生成应用图标 在线工具 一键生成应用图标https://icon.wuruihong.com/ 上传你的应用图标 上传后在这里添加你需要用到的尺寸 开始生成 下载你批量生成的图标

使用Python,networkx绘制有向层级结构图

使用Python&#xff0c;networkx绘制有向层级结构图 1. 效果图2. 源码2.1 tree.txt2.2 pyNetworkx.py参考 上一篇介绍了&#xff1a;1. 使用Python&#xff0c;networkx对卡勒德胡赛尼三部曲之《群山回唱》人物关系图谱绘制 当前博客介绍&#xff1a; 2. 使用Python&#xff0c…

仿牛客网项目---社区首页的开发实现

从今天开始我们来写一个新项目&#xff0c;这个项目是一个完整的校园论坛的项目。主要功能模块&#xff1a;用户登录注册&#xff0c;帖子发布和热帖排行&#xff0c;点赞关注&#xff0c;发送私信&#xff0c;消息通知&#xff0c;社区搜索等。这篇文章我们先试着写一下用户的…

个人玩航拍,如何申请无人机空域?

我们在《年会不能停》一文中&#xff0c;有分享我们在西岭雪山用无人机拍摄的照片和视频&#xff0c;有兴趣可以去回顾。 春节的时候&#xff0c;趁着回老家一趟&#xff0c;又将无人机带了回去&#xff0c;计划拍一下老家的风景。 原本以为穷乡僻壤的地方可以随便飞&#xf…

Javaweb之SpringBootWeb案例之 SpringBoot原理的详细解析

3. SpringBoot原理 SpringBoot使我们能够集中精力地去关注业务功能的开发&#xff0c;而不用过多地关注框架本身的配置使用。而我们前面所讲解的都是面向应用层面的技术&#xff0c;接下来我们开始学习SpringBoot的原理&#xff0c;这部分内容偏向于底层的原理分析。 在剖析Sp…

Go开发 入门以VSCode为例

一、Go环境搭建 1.1 安装 进入Golang官网 https://go.dev&#xff0c;点击 Download 若无法打开网页可以使用国内的Go语言中文网 https://studygolang.com/dl 进入下载 找到合适的平台点击链接下载即可&#xff08;这里以Windows距离&#xff09; 下载完成后 Next Next 安…

threejs 大场景下,对小模型进行贴图处理

接上篇小模型的删除☞threeJS 大模型中对小模型进行删除-CSDN博客 针对已有模型&#xff0c;根据数据状态进行贴图处理&#xff0c;例如&#xff1a;机房内电脑告警状态、电脑开关机状态下的不同状态贴图等 示例模型还是以丛林小屋为例&#xff1a;针对该模型中的树干进行贴图…

Android进阶之路 - RecyclerView停止滑动后Item自动居中(SnapHelper辅助类)

之前一直没注意 SnapHelper 辅助类的功能&#xff0c;去年的时候看到项目中仅通过俩行代码设置 RecyclerView 后就提升了用户体验&#xff0c;觉得还是很有必要了解一下&#xff0c;尝试过后才发现其 PagerSnapHelper、LinearSnapHelper 子类可以作用于不同场景&#xff0c;且听…

加速AI测试领域的进化,顶尖专家与名校教授强强联合,助你快速成为人工智能测试领域的精英

随着人工智能在各行各业的广泛应用&#xff0c;学习并掌握AI技术在软件测试中的应用变得至关重要。不仅能使你跟上行业的发展趋势&#xff0c;还能提升你的竞争力。而且&#xff0c;市场对具备AI测试技能的测试工程师的需求正日益增长&#xff0c;这使得掌握这些技能能够帮助你…

走进中国电车领跑企业“NI蔚来”丨共谋商业,共话ESG

期盼与热望将冬季的寒冷拂去&#xff0c;复旦大学-华盛顿大学EMBA项目迎来了一位新朋友——美国圣路易斯华盛顿大学奥林商学院的新任院长Michael Mazzeo教授。Mazzeo院长在上海进行了为期3天的访问。这里是 Mazzeo院长上任后国际访问交流之旅的第一站。      漫步校园&…

【Python_Zebra斑马打印机编程学习笔记(四)】ZPL的一些简单指令

ZPL的一些简单指令 ZPL的一些简单指令前言一、ZPL 介绍二、ZPL 语法解析1、标签开始、标签结束2、标签原点位置设置3、标签长度设置4、标签文本打印深度设置5、标签打印宽度设置6、标签方向设置7、标签元素定位8、标签绘制矩形9、标签输入字段10、标签设置字段字体、大小11、标…

Go 互斥锁的实现原理?

Go sync包提供了两种锁类型&#xff1a;互斥锁sync.Mutex 和 读写互斥锁sync.RWMutex&#xff0c;都属于悲观锁。 概念 Mutex是互斥锁&#xff0c;当一个 goroutine 获得了锁后&#xff0c;其他 goroutine 不能获取锁&#xff08;只能存在一个写者或读者&#xff0c;不能同时…

STM32 IIC协议基础概念

文章目录 前言一、IIC协议介绍二、IIC硬件框图和程序层次三、IIC协议1.IIC协议通信流程2.IIC的引脚为什么需要加入上拉电阻3.IIC的引脚为什么需要配置为开漏输出 四、STM32 IIC硬件结构总结 前言 本篇文章将带大家学习IIC通信协议的一些基础概念和使用。 一、IIC协议介绍 I2…

jsjiami.v7关于js加密运行环境的探索

浏览器环境、Node.js 环境和 vm2 环境之间存在一些区别&#xff0c;包括全局对象、核心模块和一些环境特定的 API。下面是一些区别的简要概述&#xff0c;以及一些代码示例来突显它们之间的不同。 1. 浏览器环境&#xff1a; 全局对象&#xff1a; 浏览器环境&#xff1a; 全…

数据结构·栈和队列

1. 栈 1.1 栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一段称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守 后进先出 LIFO(Last In First Out)的原则&#xff0c;后进来的数…