vue图片之放大、缩小、1:1、刷新、左切换、全屏、右切换、左旋咋、右旋转、x轴翻转、y轴翻转

先上效果,代码在下面

 

 

 

<template><!-- 图片列表 --><div class="image-list"><img:src="imageSrc"v-for="(imageSrc, index) in images":key="index"@click="openImage(index)"@error="handleImageError(index)"alt="Thumbnail Image"/></div><!-- 点击的图片 --><divv-if="selectedImage"class="enlarged-image-box"@wheel="onZoom"@click="closeImage"><img:src="selectedImage"draggable="true"@dragstart="onDragStart"@dragend="onDragEnd"@load="onImageLoad"@click.stopref="enlargedImageRef":style="{left: `${imageLeft}px`,top: `${imageTop}px`,transform: `translate(-50%, -60%) scale(${scale}) ${isFlippedX ? 'scaleX(-1)' : 'scaleX(1)'} ${isFlippedY ? 'scaleY(-1)' : 'scaleY(1)'} rotate(${rotation}deg)`,}"/></div><!-- 控制按钮 --><div class="control-buttons" v-if="selectedImage" v-show="areControlsVisible"><img:src="buttonSrc"v-for="(buttonSrc, index) in controlButtons":key="index"@click="onControlButtonClick(index)"@error="handleButtonError(index)":class="{ active: activeControlIndex === index }"alt="Control Button"/></div><!-- 中间显示的倍数 --><div class="zoom-percentage" v-if="isZoomVisible">{{ zoomPercentage.toFixed(0) }}%</div><!-- 全屏的背景图片 --><div class="fullscreen-overlay" v-if="isFullscreen"><img :src="selectedImage" class="fullscreen-image" /></div><!-- 点击叉号 --><div v-if="selectedImage" @click="closeImage" class="close-button"><img src="/assets/叉号.svg" class="close-icon" /></div><!-- 最下面显示的图片 --><div class="thumbnail-container" v-if="selectedImage"><img:src="imageSrc"v-for="(imageSrc, index) in images":key="index":style="{ transform: `translateX(${-thumbnailOffsetLeft}px)` }"class="thumbnail"@click="onThumbnailClick(index)":class="{ active: activeThumbnailIndex === index }"/></div>
</template><script setup>
import { ref, computed } from "vue";// 状态变量
const selectedImage = ref(""); // 当前显示的大图
const scale = ref(1); // 缩放比例
const isZoomVisible = ref(false); // 控制倍数显示与隐藏
const zoomTimeout = ref(null); // 定时器 ID
const oneToOneScale = ref(1); // 1:1 缩放比例
const imageLeft = ref(window.innerWidth / 2); // 图片初始 left
const imageTop = ref(window.innerHeight / 2); // 图片初始 top
const startPosition = ref({ x: 0, y: 0 }); // 拖拽开始时的鼠标位置
const isAtOneToOne = ref(false); // 是否处于1:1状态
const initialScale = ref(1); // 初始缩放比例
const lastScale = ref(1); // 上一次的缩放比例
const activeControlIndex = ref(null); // 当前激活的控制按钮索引
const activeThumbnailIndex = ref(null); // 当前激活的缩略图索引
const rotation = ref(0); // 图片旋转角度
const isFullscreen = ref(false); // 全屏遮罩
const areControlsVisible = ref(true); // 控制按钮显示与隐藏
const isFlippedX = ref(false); // 是否水平翻转
const isFlippedY = ref(false); // 是否上下翻转
const thumbnailOffsetLeft = ref(0); // 缩略图左侧的偏移量
const zoomPercentage = computed(() => scale.value * initialScale.value * 100); // 计算属性:百分比显示
const enlargedImageRef = ref(null);// 图片数据
const images = ref(["/assets/tibet-1.jpg","/assets/tibet-2.jpg","/assets/tibet-3.jpg","/assets/tibet-4.jpg","/assets/tibet-5.jpg","/assets/tibet-6.jpg","/assets/tibet-7.jpg","/assets/tibet-8.jpg","/assets/tibet-9.jpg",
]);
// 控制按钮数据
const controlButtons = ref(["/assets/加号.svg", // 加号"/assets/减号.svg", // 减号"/assets/1_1.svg", // 1:1"/assets/刷新.svg", // 刷新"/assets/左箭头.svg", // 左箭头"/assets/播放.svg", // 播放"/assets/右箭头.svg", // 右箭头"/assets/左旋转.svg", // 左旋转"/assets/右旋转.svg", // 右旋转"/assets/左右箭头.svg", // 左右箭头"/assets/上下箭头.svg", // 上下箭头
]);
// 点击关闭
const closeImage = () => {selectedImage.value = "";
};
// 重置所有相关状态的函数
const resetImageState = () => {scale.value = 1;imageLeft.value = window.innerWidth / 2;imageTop.value = window.innerHeight / 2;isAtOneToOne.value = false;rotation.value = 0;isFlippedX.value = false;isFlippedY.value = false;activeControlIndex.value = null;
};
// 图片点击事件
const openImage = (index) => {activeThumbnailIndex.value = index;selectedImage.value = images.value[index];resetImageState(); // 重置所有状态
};
// 图片加载完成事件,用于计算初始缩放比例
const onImageLoad = () => {if (enlargedImageRef.value) {const naturalWidth = enlargedImageRef.value.naturalWidth;const rect = enlargedImageRef.value.getBoundingClientRect();const displayedWidth = rect.width;// 计算初始缩放比例(显示尺寸与自然尺寸的比例)initialScale.value = displayedWidth / naturalWidth;// 初始化缩放比例为1scale.value = 1;// 设置 1:1 缩放比例oneToOneScale.value = 1 / initialScale.value;}
};
// 拖拽开始事件
const onDragStart = (event) => {startPosition.value = { x: event.clientX, y: event.clientY }; // 记录开始时的鼠标位置
};
// 拖拽结束事件
const onDragEnd = (event) => {imageLeft.value += event.clientX - startPosition.value.x; // 更新元素的左偏移量imageTop.value += event.clientY - startPosition.value.y; // 更新元素的上偏移量
};
// 图片缩放处理函数
const onZoom = (event) => {isZoomVisible.value = true;// 重置定时器clearTimeout(zoomTimeout.value);zoomTimeout.value = setTimeout(() => {isZoomVisible.value = false;}, 1000);// 判断滚动方向并设置新的缩放比例if (event.deltaY < 0) {// 向上滚动scale.value += 0.1;} else {// 向下滚动scale.value -= 0.1;scale.value = Math.max(scale.value, 0.3); // 确保最小缩放比例为0.3}
};// 控制按钮点击事件
const onControlButtonClick = (index) => {switch (index) {case 0: // 加号if (scale.value < 3) {// 最大缩放比例为3scale.value += 0.1;isZoomVisible.value = true;}break;case 1: // 减号if (scale.value > 0.5) {// 最小缩放比例为0.5scale.value -= 0.1;scale.value = Math.max(scale.value, 0.1);isZoomVisible.value = true;}break;case 2: // 1:1if (!isAtOneToOne.value) {lastScale.value = scale.value;scale.value = oneToOneScale.value;isAtOneToOne.value = true;} else {scale.value = lastScale.value;isAtOneToOne.value = false;}isZoomVisible.value = true;break;case 3: // 刷新resetImageState(); // 重置所有状态isZoomVisible.value = true;break;case 4: // 左箭头navigateToPreviousImage();break;case 5: // 全屏toggleFullscreen();break;case 6: // 右箭头navigateToNextImage();break;case 7: // 左旋转rotation.value -= 90;break;case 8: // 右旋转rotation.value += 90;break;case 9: // 左右翻转isFlippedX.value = !isFlippedX.value; // 切换翻转状态break;case 10: // 上下翻转isFlippedY.value = !isFlippedY.value; // 切换翻转状态break;default:break;}// 设置当前激活的控制按钮索引activeControlIndex.value = index;// 重置定时器clearTimeout(zoomTimeout.value);zoomTimeout.value = setTimeout(() => {isZoomVisible.value = false;}, 1000);
};// 导航到上一张图片
const navigateToPreviousImage = () => {if (activeThumbnailIndex.value > 0) {activeThumbnailIndex.value -= 1;} else {// 跳转到最后一张图片activeThumbnailIndex.value = images.value.length - 1;}selectImage(activeThumbnailIndex.value);
};// 导航到下一张图片
const navigateToNextImage = () => {if (activeThumbnailIndex.value < images.value.length - 1) {activeThumbnailIndex.value += 1;} else {// 跳转到第一张图片activeThumbnailIndex.value = 0;}selectImage(activeThumbnailIndex.value);
};// 选择图片并更新状态
const selectImage = (index) => {selectedImage.value = images.value[index];activeThumbnailIndex.value = index;resetImageState(); // 重置所有状态
};// 全屏切换函数
const toggleFullscreen = () => {const element = document.documentElement; // 全屏元素可以是 `document.documentElement`,也可以是图片元素等if (!document.fullscreenElement &&!document.webkitFullscreenElement &&!document.mozFullScreenElement &&!document.msFullscreenElement) {// 进入全屏if (element.requestFullscreen) {element.requestFullscreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();}isFullscreen.value = true;areControlsVisible.value = false;} else {// 退出全屏if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}isFullscreen.value = false;areControlsVisible.value = true;}
};// 监听全屏变化以确保遮罩层正确隐藏
document.addEventListener("fullscreenchange", () => {if (!document.fullscreenElement) {isFullscreen.value = false; // 确保退出全屏时隐藏遮罩层areControlsVisible.value = true;}
});// 点击缩略图事件
const onThumbnailClick = (index) => {activeThumbnailIndex.value = index;selectedImage.value = images.value[index];const thumbnailWidth = 32; // 图片宽度(30px)加上左右间距(2px)const centerIndex = 4; // 中间显示第5张图片(索引为4)if (index <= centerIndex) {thumbnailOffsetLeft.value = (centerIndex - index) * thumbnailWidth;} else {// 点击右边的图片,调整右边距,清零左边距thumbnailOffsetLeft.value = (centerIndex - index) * thumbnailWidth;}resetImageState(); // 重置所有状态
};// 错误处理函数:图片加载失败
const handleImageError = (index) => {console.error(`图片加载失败: ${images.value[index]}`);// 可选:设置为占位图images.value[index] = "/assets/placeholder.png";
};// 错误处理函数:控制按钮图片加载失败
const handleButtonError = (index) => {console.error(`按钮图片加载失败: ${controlButtons.value[index]}`);// 可选:设置为占位图controlButtons.value[index] = "/assets/button-placeholder.png";
};
</script><style scoped>
/* 图片列表 */
.image-list {width: 540px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;flex-wrap: wrap;gap: 4px;
}
.image-list img {width: 170px;height: 170px;cursor: pointer;object-fit: cover;border-radius: 4px;transition: transform 0.3s;
}/* 放大的图片框架 */
.enlarged-image-box {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5); /* 背景加深 */display: flex;justify-content: center;align-items: center;z-index: 1003;
}/* 放大的图片 */
.enlarged-image-box img {height: 70%;position: absolute;z-index: 9999;cursor: grab; /* 鼠标样式为抓取 */user-select: none; /* 禁止用户选择图片 */transition: transform 0.3s ease; /* 平滑缩放 */
}/* 控制按钮图片 */
.control-buttons {position: fixed;top: 85%;left: 50%;transform: translate(-50%);display: flex;z-index: 1008;
}
.control-buttons img {width: 20px;height: 20px;background-color: rgba(0, 0, 0, 0.5);z-index: 5;padding: 3px;margin-right: 2px;border-radius: 50%;cursor: pointer;transition: background-color 0.3s, transform 0.3s;
}
.control-buttons img.active {background-color: rgba(0, 0, 0, 0.8);
}/* 激活缩略图 */
.thumbnail-container .thumbnail.active {filter: brightness(100%) !important;
}/* 中间显示的倍数 */
.zoom-percentage {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.7);color: white;border-radius: 5px;padding: 8px 12px;font-size: 18px;z-index: 1111;opacity: 0.9;transition: opacity 0.3s;
}/* 全屏遮罩 */
.fullscreen-overlay {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background-color: black;z-index: 1010;
}
.fullscreen-image {height: 100%;position: fixed;top: 50%;left: 50%;z-index: 2000;transform: translate(-50%, -50%);
}/* 点击叉号 */
.close-button {background-color: rgba(0, 0, 0, 0.7);position: fixed;right: 0;top: 0;border-bottom-left-radius: 50px;padding: 4px 4px 5px 8px;z-index: 1005;
}
.close-icon {height: 17px;width: 17px;
}/* 最下面显示的缩略图 */
.thumbnail-container {background-color: rgba(0, 0, 0, 0.5);position: fixed;bottom: 0;left: 0;height: 50px;width: 100vw;display: flex;justify-content: center;z-index: 1008;
}
.thumbnail-container .thumbnail {height: 100%;width: 30px;margin-right: 2px;filter: brightness(70%);cursor: pointer;transition: filter 0.3s;
}
.thumbnail-container .thumbnail:hover {filter: brightness(50%);
}
.thumbnail-container {transition: transform 0.8s ease;
}
</style>

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

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

相关文章

如何用状态图进行设计05

到目前为止&#xff0c;我们已经讨论了状态图的原理。这些原理对状态图和扩展状态图都适用。第二章后面的部分主要讲述了扩展状态图的扩展功能。我们将围绕这些增强的功能&#xff0c;使你对BetterState Pro的设计能力有很好的了解。 关于这些内容和其他有关扩展状态图特性的完…

【Spark】Spark Join类型及Join实现方式

如果觉得这篇文章对您有帮助&#xff0c;别忘了点赞、分享或关注哦&#xff01;您的一点小小支持&#xff0c;不仅能帮助更多人找到有价值的内容&#xff0c;还能鼓励我持续分享更多精彩的技术文章。感谢您的支持&#xff0c;让我们一起在技术的世界中不断进步&#xff01; Sp…

Vue3 响应式原理:基于 Proxy 的深度解析与实践

# Vue3 响应式原理&#xff1a;基于 Proxy 的深度解析与实践 引言 在 Vue3 中&#xff0c;响应式系统采用了基于 Proxy 的实现方式&#xff0c;通过 Proxy 对象的代理和反射能力&#xff0c;实现了更加高效、灵活和强大的数据监听和变更检测机制。本文将深度解析 Vue3 的响应式…

Linux DNS 协议概述

1. DNS 概述 互联网中&#xff0c;一台计算机与其他计算机通信时&#xff0c;通过 IP 地址唯一的标志自己。此时的 IP 地址就类似于我们日常生活中的电话号码。但是&#xff0c;这种纯数字的标识是比较难记忆的&#xff0c;而且数量也比较庞大。例如&#xff0c;每个 IPv4 地址…

PH热榜 | 2024-12-13

1. AI Santa by Tavus 标语&#xff1a;随时随地&#xff0c;视频连线圣诞老人&#xff01; 介绍&#xff1a;准备好迎接AI圣诞老人了吗&#xff1f;塔武斯公司推出的这款神奇的节日体验&#xff0c;能让你实时用30多种语言与圣诞老人对话&#xff0c;看看自己今年是乖孩子还…

【QT】编写第一个 QT 程序 对象树 Qt 编程事项 内存泄露问题

目录 1. 编写第一个 QT 程序 1.1 使用 标签 实现 &#x1f407; 图形化界面实现 &#x1f407; 纯代码形式实现 1.2 使用 按钮 实现 &#x1f40b; 图形化界面实现 &#x1f40b; 纯代码形式实现 1.3 使用 编辑框 实现 &#x1f95d; 图形化界面实现 &#x1f95…

pytest入门一:用例的执行范围

从一个或多个目录开始查找&#xff0c;可以在命令行指定文件名或目录名。如果未指定&#xff0c;则使用当前目录。 测试文件以 test_ 开头或以 _test 结尾 测试类以 Test 开头 &#xff0c;并且不能带有 init 方法 测试函数以 test_ 开头 断言使用基本的 assert 即可 所有的…

科研绘图系列:R语言绘制热图和散点图以及箱线图(pheatmap, scatterplot boxplot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载图1图2图3系统信息参考介绍 R语言绘制热图和散点图以及箱线图(pheatmap, scatterplot & boxplot) 加载R包 library(magrittr) library(dplyr) library(ve…

ArcGIS MultiPatch数据转换Obj数据

文章目录 ArcGIS MultiPatch数据转换Obj数据1 效果2 技术路线2.1 Multipatch To Collada2.2 Collada To Obj3 代码实现4 附录4.1 环境4.2 一些坑ArcGIS MultiPatch数据转换Obj数据 1 效果 2 技术路线 MultiPatch --MultipatchToCollada–> Collada --Assimp–> Obj 2.…

(5)4T刷题-逻辑代数基础

&#xff08;1&#xff09;逻辑函数的常用表示方法有&#xff1a;真值表、逻辑图、卡诺图、函数表达式 逻辑函数的表达方法中具有唯一性的是&#xff1a;真值表和卡诺图 &#xff08;2&#xff09;异或运算&#xff08;题干意思不明确&#xff0c;应该是按位异或&#xff09; …

Linux(网络基础和网络标准OSI七层结构)

后面也会持续更新&#xff0c;学到新东西会在其中补充。 建议按顺序食用&#xff0c;欢迎批评或者交流&#xff01; 缺什么东西欢迎评论&#xff01;我都会及时修改的&#xff01; 在这里真的很感谢这位老师的教学视频让迷茫的我找到了很好的学习视频 王晓春老师的个人空间…

向达梦告警日志说声hello

为了调试和跟踪一些业务功能&#xff0c;通常会创建一个日志表&#xff0c;写入每个关键步骤的信息。也可以向达梦数据库的告警日志输出信息&#xff0c;然后通过查看告警日志即可。 在达梦的告警日志中输出一个信息可以这样 SQL> DBMS_SYSTEM.KSDWRT(2,hi dm);

详解 ES6 Reflect

一. 概念 Reflect 是 ES6 中新增的一个内置对象&#xff0c;它提供了一组静态方法&#xff0c;用于操作对象。这些方法与 Object 上的方法具有相同的功能。在这些方法中会调用对应 Object 上的方法&#xff0c;并且返回对应结果。Reflect 的出现主要是为了将一些 Object 对象上…

图像分割数据集海洋水体船只分割数据集labelme格式6123张3类别

数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)&#xff1a;6123 标注数量(json文件个数)&#xff1a;6123 标注类别数&#xff1a;3 标注类别名称:["water","sea_obstacle",&…

Docker Compose--安装本地maven

原文网址&#xff1a;Docker Compose--安装本地maven-CSDN博客 简介 本文介绍如何使用Docker Compose安装maven。 脚本及配置 路径&#xff1a;/work/env/maven ├── app ├── config │ └── settings.xml ├── docker-compose.yml ├── repository └── t…

EDA - Spring Boot构建基于事件驱动的消息系统

文章目录 概述事件驱动架构的基本概念工程结构Code创建事件和事件处理器创建事件总线创建消息通道和发送逻辑创建事件处理器消息持久化创建消息发送事件配置 Spring Boot 启动类测试消息消费运行项目 概述 在微服务架构和大规模分布式系统中&#xff0c;事件驱动架构&#xff…

数据链路层(Java)(MAC与IP的区别)

以太网协议&#xff1a; "以太⽹" 不是⼀种具体的⽹络, ⽽是⼀种技术标准; 既包含了数据链路层的内容, 也包含了⼀些物理 层的内容. 例如: 规定了⽹络拓扑结构, 访问控制⽅式, 传输速率等; 例如以太⽹中的⽹线必须使⽤双绞线; 传输速率有10M, 100M, 1000M等; 以太…

UNIX数据恢复—UNIX系统常见故障问题和数据恢复方案

UNIX系统常见故障表现&#xff1a; 1、存储结构出错&#xff1b; 2、数据删除&#xff1b; 3、文件系统格式化&#xff1b; 4、其他原因数据丢失。 UNIX系统常见故障解决方案&#xff1a; 1、检测UNIX系统故障涉及的设备是否存在硬件故障&#xff0c;如果存在硬件故障&#xf…

黑马程序员Java项目实战《苍穹外卖》Day12

苍穹外卖-day12 课程内容 工作台Apache POI导出运营数据Excel报表 功能实现&#xff1a;工作台、数据导出 工作台效果图&#xff1a; 数据导出效果图&#xff1a; 在数据统计页面点击数据导出&#xff1a;生成Excel报表 1. 工作台 1.1 需求分析和设计 1.1.1 产品原…

【竞技宝】LOL:JDG官宣yagao离队

北京时间2024年12月13日,在英雄联盟S14全球总决赛结束之后,各大赛区都已经进入了休赛期,目前休赛期也快进入尾声,LPL大部分队伍都开始陆续官宣转会期的动向,其中JDG就在近期正式官宣中单选手yagao离队,而后者大概率将直接选择退役。 近日,JDG战队在官方微博上连续发布阵容变动消…