当前位置：首页 > news >正文

图片的拖拽+缩放

news 来源：原创 2025/8/24 18:21:23

效果图：

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import ImgBg from '@/assets/img/bg.jpg'
import Img1 from '@/assets/img/1.jpg'const innerStyle = ref({left: 0,top: 0,width: 100,height: 0
})
const wrapStyle = ref({width: 500,height: 0,
})
let bgRatio//原始背景图片分辨率比例
let roleRatio: number//原始role图片分辨率比例
onMounted(() => {const imageBg = new Image()imageBg.src = ImgBgimageBg.onload = () => {bgRatio = imageBg.width / imageBg.heightwrapStyle.value.height = wrapStyle.value.width / bgRatio}const imageRole = new Image()imageRole.src = Img1imageRole.onload = () => {roleRatio = imageRole.width / imageRole.heightinnerStyle.value.height = innerStyle.value.width / roleRatio}
})
const isDrag = ref(false)
const isScale = ref(false)
const refBgWrap = ref()
const refRoleWrap = ref()
const direction = ref(['left-top', 'right-top', 'left-bottom', 'right-bottom'])
const directionType = ref('')
onMounted(() => {window.addEventListener('mousemove', (e) => {const { width: bwidth, height: bheight } = refRoleWrap.value!.getBoundingClientRect()const { width: awidth, height: aheight } = refBgWrap.value!.getBoundingClientRect()if (!isDrag.value) returnconst { movementX, movementY } = elet maxLeft = awidth - bwidthlet maxTop = aheight - bheightlet x = Number(innerStyle.value.left) + movementXlet y = Number(innerStyle.value.top) + movementYif (x <= 0) {x = 0} else if (x >= maxLeft) {x = maxLeft}if (y <= 0) {y = 0} else if (y >= maxTop) {y = maxTop}if (isDrag.value) {if (isScale.value) {if (x >= 0 && x < maxLeft && y >= 0 && y < maxTop) {switch (directionType.value) {case 'left-top'://改变x+y+width+heightinnerStyle.value.width = innerStyle.value.width - movementXinnerStyle.value.height = innerStyle.value.height - movementX / roleRatioinnerStyle.value.left = xinnerStyle.value.top = ybreakcase 'right-top'://改变y+width+heightinnerStyle.value.width = innerStyle.value.width + movementXinnerStyle.value.height = innerStyle.value.height + movementX / roleRatioinnerStyle.value.top = ybreakcase 'left-bottom'://改变x+width+heightinnerStyle.value.width = innerStyle.value.width - movementXinnerStyle.value.height = innerStyle.value.height - movementX / roleRatioinnerStyle.value.left = xbreakcase 'right-bottom'://width+heightinnerStyle.value.width = innerStyle.value.width + movementXinnerStyle.value.height = innerStyle.value.height + movementX / roleRatiobreak}}} else {//只改变位置innerStyle.value.left = xinnerStyle.value.top = y}}})window.addEventListener('mouseup', () => {isDrag.value = falseisScale.value = false})
})const mousedownFn = () => {isDrag.value = true
}
const scale = (val: string) => {directionType.value = valisScale.value = trueisDrag.value = true
}
</script><template><routerView /><div class="wrap"><div class="bg-wrap" ref="refBgWrap" :style="{ width: wrapStyle.width + 'px', height: wrapStyle.height + 'px' }"><img :src="ImgBg" class="img-bg" /><div class="img-role-wrap" ref="refRoleWrap":style="{ 'left': innerStyle.left + 'px', 'top': innerStyle.top + 'px', width: innerStyle.width + 'px', height: innerStyle.height + 'px', }"><img :src="Img1" class="img-role" @mousedown.stop="mousedownFn" draggable="false" /><span class="span-dot" :class="item" @mousedown.stop="scale(item)" v-for="(item, index) in direction":key="index"></span></div></div></div>
</template><style scoped>
.bg-wrap,
.img-bg {width: 500px;position: relative;
}.wrap {display: flex;justify-content: center;align-items: center;
}.img-bg {border: 1px solid #000;
}.wrap {width: 500px;height: 500px;position: relative;
}.img-role-wrap {position: absolute;width: 100px;border: 1px solid #ccc;
}.img-role {width: 100%;
}.span-dot {width: 10px;height: 10px;position: absolute;border-color: rgb(34 211 238);border-style: solid;
}.left-top {left: 0;top: 0;cursor: nw-resize;border-top-width: 3px;border-left-width: 3px;border-right: none;border-bottom: none;
}.right-top {right: 0;top: 0;cursor: ne-resize;border-top-width: 3px;border-right-width: 3px;border-left: none;border-bottom: none;}.left-bottom {left: 0;bottom: 0;cursor: ne-resize;border-left-width: 3px;border-bottom-width: 3px;border-right: none;border-top: none;
}.right-bottom {right: 0;bottom: 0;cursor: nw-resize;border-right-width: 3px;border-bottom-width: 3px;border-top: none;border-left: none;
}
</style>

图片的拖拽+缩放

效果图： <script setup lang"ts"> import { onMounted, ref } from vue; import ImgBg from /assets/img/bg.jpg import Img1 from /assets/img/1.jpgconst innerStyle ref({left: 0,top: 0,width: 100,height: 0 }) const wrapStyle ref({width:…...

编程日记 2025/8/24 18:21:23

Windows软件插件-音视频文件读取器

下载本插件本插件读取音频和视频文件，输出音频样本和视频样本，音频样本为16位PCM，采样率48000；视频样本为RGB32。大部分音频和视频文件格式都可以读取。本插件类型为DLL。本插件是通过创建媒体基础“源读取器”对象实现读取音视…...

编程日记 2025/8/24 18:19:45

考研数一复习之拉格朗日中值定理求解函数极限

最近在复习考研数学,只是简单做题过于乏味,因此便总结了一些笔记,后续若有空,也会将自己的复习笔记分享出来。本篇，我们将重点讲解拉格朗日中值定理在求解函数极限中的应用。同时,作者本人作为python领域创作者，还将在本文分享使用sympy求解高数中函数极…...

编程日记 2025/8/24 18:19:09

聊天服务器分布式改造

目前的聊天室是单节点的，无论是http接口还是socket接口都在同一个进程，无法承受太多人同时在线，容灾性也非常差。因此，一个成熟的IM产品一定是做成分布式的，根据功能分模块，每个模块也使用多个节点并行部署…...

编程日记 2025/8/23 19:04:31

C++11的一些特性

目录一、C11简介二、统一的列表初始化 2.1 ｛｝初始化 2.2 std::initializer_list 三、声明 3.1 auto 3.2 decltype 3.3 nullptr 四、范围for循环五、智能指针 5.1 RAII 5.2 智能指针的原理 5.3 std::auto_ptr…...

编程日记 2025/8/24 18:19:45

【打卡day3】字符串类

例如统计字符个数，字符大小写转换题目描述：输入一行字符串，计算A-Z大写字母出现的次数思路： 1 定义一个整型数组，初始化为0，存储每个字母出现的次数，下标0对应字母A, 2，定义字…...

编程日记 2025/8/24 18:21:23

图像滑块对比功能的开发记录

背景介绍最近，公司需要开发一款在线图像压缩工具，其中的一个关键功能是让用户直观地比较压缩前后的图像效果。因此，我们设计了一个对比组件，它允许用户通过拖动滑块，动态调整两张图像的显示区域，从而清晰…...

编程日记 2025/8/24 18:20:32

【音视频】ffplay常用命令

一、 ffplay常用命令 -x width：强制显示宽度-y height：强制显示高度强制以 640*360的宽高显示 ffplay 2.mp4 -x 640 -y 360 效果如下 -fs 全屏显示 ffplay -fs 2.mp4效果如下： -an 禁用音频（不播放声音）-vn 禁…...

编程日记 2025/8/16 11:21:03

初识Linux

文章目录初识Linux：从开源哲学到技术生态的全面解析一、Linux的背景与发展简史：从代码实验到数字基础设施1.1 起源与开源基因1.2 技术哲学之争1.3 GNU/Linux的融合二、开源：Linux的核心竞争力与生态力量2.1 法律保障与四大自由2.2 社区协作…...

编程日记 2025/8/24 18:20:31

基于遗传算法的IEEE33节点配电网重构程序

一、配电网重构原理配电网重构（Distribution Network Reconfiguration, DNR）是一项优化操作，旨在通过改变配电网中的开关状态，优化电力系统的运行状态，以达到降低网损、均衡负载、改善电压质量等目标。配电网重构的核…...

编程日记 2025/8/24 18:20:32

manus对比ChatGPT-Deep reaserch进行研究类学术相关数据分析！谁更胜一筹?

没有账号，只能挑选一个案例一夜之间被这个用全英文介绍全华班出品的新爆款国产AI产品的小胖刷频。白天还没有切换语言的选项，晚上就加上了。简单看了看团队够成，使用很长实践的Monica创始人也在其中。逐渐可以理解，重心放在海外产…...

编程日记 2025/8/24 18:20:32

线程通信---java

线程我们知道，线程是进程的最小执行单位，一个进程可以拥有多个线程，那么就会引入两个问题： 多个线程之间如何进行通信多个线程对同一个数据进行操作，如何保证程序正确执行，也就是线程安全问题线程的常…...

编程日记 2025/8/24 10:55:38

python面试常见题目

1、python 有几种数据类型数字:整形 （int）,浮点型 （float）布尔 （ bool）:false true字符串 （string）列表 （list）元组 （tuple）字典 &…...

编程日记 2025/8/24 18:20:31

Python中与字符串操作相关的30个常用函数及其示例

以下是Python中与字符串操作相关的30个常用函数及其示例： 1. str.capitalize() 将字符串的第一个字符大写，其余字符小写。 s "hello world" print(s.capitalize()) # 输出: Hello world2. str.lower() 将字符串中的所有字符转换为小写。…...

编程日记 2025/8/24 18:21:23

2025年渗透测试面试题总结-小某鹏汽车-安全工程师（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录小鹏汽车-安全工程师一、XXE漏洞与SSRF漏洞 1. XXE（XML External Entity）漏洞…...

编程日记 2025/8/20 7:25:46

kafka + flink +mysql 案例

假设你有两个Kafka主题：user_activities_topic 和 product_views_topic，并且你希望将user_activities_topic中的数据写入到user_activities表，而将product_views_topic中的数据写入到product_views表。 maven <dependencies><!-- …...

编程日记 2025/8/21 22:49:38

Windows下配置Flutter移动开发环境以及AndroidStudio安装和模拟机配置

截止 2025/3/9 ，版本更新到了 3.29.1 ，但是为了防止出现一些奇怪的bug，我安装的还是老一点的，3.19，其他版本的安装同理。AndroidStudio用的是 2024/3/1 版本。 — 1 环境变量（Windows） PUB_H…...

编程日记 2025/8/24 18:19:46

【工具类】Springboot 项目日志打印项目版本和构建时间

博主介绍：✌全网粉丝22W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程日记 2025/8/24 18:19:09

p5.js：模拟 n个彩色小球在一个3D大球体内部弹跳

向豆包提问：编写一个 p5.js 脚本，模拟 42 个彩色小球在一个3D大球体内部弹跳。每个小球都应留下一条逐渐消失的轨迹。大球体应缓慢旋转，并显示透明的轮廓线。请确保实现适当的碰撞检测，使小球保持在球体内部。 cd p5-demo copy…...

编程日记 2025/8/24 8:07:56

RISC-V医疗芯片工程师复合型转型的路径与策略

从RISC-V到医疗芯片：工程师复合型转型的路径与策略一、引言 1.1 研究背景在科技快速发展的当下，芯片技术已然成为推动各行业进步的核心驱动力之一。其中，RISC-V 架构作为芯片领域的新兴力量，正以其独特的优势迅速崛起，对整个芯片产业的格局产生着深远影响。RISC-V 架…...

编程日记 2025/8/24 18:19:09

HTML 文本格式化

HTML 文本格式化在构建网页的过程中，文本的格式化是一个至关重要的环节。HTML（HyperText Markup Language）提供了丰富的标签和属性来帮助我们实现各种文本格式化的需求。本文将详细介绍HTML中常见的文本格式化方法，包括字体、颜…...

编程日记 2025/8/24 18:19:44

基于RNN+微信小程序+Flask的古诗词生成应用

项目介绍平台采用B/S结构，后端采用主流的Flask框架进行开发，古诗词生成采用RNN模型进行生成，客户端基于微信小程序开发。是集成了Web后台开发、微信小程序开发、人工智能（RNN）等多个领域的综合性应用，是课…...

编程日记 2025/8/24 18:18:22

【算法】图论 —— Dijkstra算法 python

引入求非负权边的单源最短路时间复杂度 O( m l o g n mlogn mlogn) 模板 https://www.luogu.com.cn/problem/P4779 import heapq as hq def dijkstra(s): # dis表示从s到i的最短路 dis [float(inf)] * (n 1) # vis表示i是否出队列 vis [0] * (n 1) q [] dis[s…...

编程日记 2025/8/23 23:18:09

Java：LocalDatTime（代替Calendar）、ZoneDateTime（时区时间）

文章目录 Local(代替Calendar)方法：获取当前代码 LocalDate（年月日星期）LocalTime（时分秒纳秒）LocalDateTime(最常用：年月日时分秒纳秒)ZoneId 时区表示方法 ZoneDateTime(时区时间)方法世界标准时间&#…...

编程日记 2025/8/24 18:18:23

HOW - React 如何在在浏览器绘制之前同步执行 - useLayoutEffect

目录 useEffect vs useLayoutEffectuseEffectuseLayoutEffect主要区别总结选择建议注意事项 useLayoutEffect 使用示例测量 DOM 元素的尺寸和位置示例：自适应弹出框定位同步更新样式以避免闪烁示例：根据内容动态调整容器高度图像或 Canvas 绘制前的准备…...

编程日记 2025/8/24 18:17:27

PyTorch系列教程：编写高效模型训练流程

当使用PyTorch开发机器学习模型时，建立一个有效的训练循环是至关重要的。这个过程包括组织和执行对数据、参数和计算资源的操作序列。让我们深入了解关键组件，并演示如何构建一个精细的训练循环流程，有效地处理数据处理，向前和向后…...

编程日记 2025/8/24 18:17:27

VS2019,VCPKG - 为VS2019添加VCPKG

文章目录 VS2019,VCPKG - 为VS2019添加VCPKG概述笔记前置条件迁出vcpkg到本地验证库安装更新已经安装的库删除指定的包安装VS2019能用的boostvcpkg 2025.02.14 版本可以给VS2019用用VCPKG的好处备注END VS2019,VCPKG - 为VS2019添加VCPKG 概述开源工程用到了VCPKG管理的包。…...

编程日记 2025/8/24 18:15:43

linux下 jq 截取json文件信息

背景：通过‘登录名‘ 获取该对象的其他个人信息如名字。环境准备：麒麟操作系统V10 jq安装包 jq安装包获取方式：yum install jq 或使用附件中的rpm 或 git自行下载 https://github.com/stedolan/jq/releases/download/ 实现过程介绍&am…...

编程日记 2025/8/24 18:16:18

测试大语言模型在嵌入式设备部署的可能性-ollama本地部署测试

前言当今各种大语言模型百花齐放，为了方便使用者更加自由的使用大模型，将大模型变成如同棒球棍一样每个人都能用，并且顺手方便的工具，本地私有化具有重要意义。本次测试使用ollama完成模型下载，过程简单快捷。 1、进…...

编程日记 2025/8/24 18:16:55

C语言基础系列【21】memcpy、memset

博主介绍：程序喵大人 35- 资深C/C/Rust/Android/iOS客户端开发10年大厂工作经验嵌入式/人工智能/自动驾驶/音视频/游戏开发入门级选手《C20高级编程》《C23高级编程》等多本书籍著译者更多原创精品文章，首发gzh，见文末👇&#x1f…...

编程日记 2025/8/23 15:08:49

云曦春季开学考复现（2025）

Crypto 划水的dp和dq 下载附件后是简单的RSA算法题，之所以说简单是因为给了公钥e 趁热打铁，昨天刚学的RSA，既然有p有q，也有e，而np*q，可以算出欧拉函数值phi（p-1）*（q-1&…...

编程日记 2025/8/22 7:04:52

探秘 Netty 通信中的 SslHandler 类：保障网络通信安全的基石

引言在当今数字化时代，网络安全是每一个应用程序都必须重视的关键因素。尤其是在数据传输过程中，防止数据被窃取、篡改至关重要。Netty 作为一个高性能的网络编程框架，为开发者提供了强大的功能来构建可靠的网络应用。其中，SslH…...

编程日记 2025/8/24 2:03:26

Llama factory微调后的模型怎么通过ollama发布

接上一篇博客：用Llama Factory单机多卡微调Qwen2.5时报torch.OutOfMemoryError: CUDA out of memory的解决办法_llama-factory cuda out of memory-CSDN博客把Lora模块和其基模型merge到一起之后，就可以通过ollama之类的框架提供服务了。不过还是有些格式转换的工作要做： …...

编程日记 2025/8/18 0:52:49

ubuntu 20.04下ZEDmini安装使用

提前安装好显卡驱动和cuda，如果没有安装可以参考我的这两篇文章进行安装： ubuntu20.04配置YOLOV5（非虚拟机）_ubuntu20.04安装yolov5-CSDN博客 ubuntu20.04安装显卡驱动及问题总结_乌班图里怎么备份显卡驱动-CSDN博客还需要提前…...

编程日记 2025/8/20 7:31:36

CmBacktrace的学习跟移植思路

学习移植CmBacktrace需要从理解其核心功能、适用场景及移植步骤入手，结合理论学习和实践操作。以下是具体的学习思路与移植思路： 一、学习思路理解CmBacktrace的核心功能 CmBacktrace是针对ARM Cortex-M系列MCU的错误追踪库，支持自动诊断Har…...

编程日记 2025/8/23 1:54:11

Android Glide 缓存模块源码深度解析

一、引言在 Android 开发领域，图片加载是一个极为常见且关键的功能。Glide 作为一款被广泛使用的图片加载库，其缓存模块是提升图片加载效率和性能的核心组件。合理的缓存机制能够显著减少网络请求，降低流量消耗，同时加快图片显示…...

编程日记 2025/8/24 4:31:24

蓝桥杯备赛：炮弹

题目解析这道题目是一道模拟加调和级数，难的就是调和级数，模拟过程比较简单。做法这道题目的难点在于我们在玩这个跳的过程，可能出现来回跳的情况，那么为了解决这种情况，我们采取的方法是设定其的上限步数。那么…...

编程日记 2025/8/20 13:22:20

死锁问题分析工具

使用 gdb 调试 gdb ./your_program (gdb) run (gdb) thread apply all bt还可以分析pthread_mutex内部，查看owen字段分析哪个线程占用的锁，一个可能的 pthread_mutex 内部结构可以大致表示为： typedef struct pthread_mutex_t {int state; …...

编程日记 2025/8/16 10:06:54

装饰器模式--RequestWrapper、请求流request无法被重复读取

目录前言一、场景二、原因分析三、解决四、更多前言曾经遇见这么一段代码，能看出来是把request又重新包装了一下，核心信息都不会改变后面了解到这叫装饰器模式（Decorator Pattern） ：也称为包装模式(Wrapper Pat…...

编程日记 2025/8/20 10:44:11

MTK Android12 桌面上显示文件管理器图标

文章目录需求解决需求在MTK平台上，Android12的文件管理器图标未显示在桌面，但在设置里面可以看到，文件管理器是安装的。根据客户要求，需要将文件管理器的图标显示在桌面上。解决路径：packages/apps/DocumentsUI/…...

编程日记 2025/8/18 22:58:52

SpringBoot实现文件上传

1. 配置文件上传限制 application.yml spring:servlet:multipart:max-file-size: 10MBmax-request-size: 10MB2. 创建文件上传控制器 import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RestController; import…...

编程日记 2025/8/21 11:48:53

【开源免费】基于SpringBoot+Vue.JS青年公寓服务平台（JAVA毕业设计）

本文项目编号 T 233 ，文末自助获取源码 \color{red}{T233，文末自助获取源码} T233，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/8/24 1:36:12

django中视图作用和视图功能以及用法

在 Django REST Framework（DRF）中，视图（View）是处理 HTTP 请求并返回响应的核心组件。DRF 提供了多种视图类，适用于不同的场景和需求。以下是 DRF 中常见的视图类及其作用、使用方法的详细说明：一、DRF 视图的分类 DRF 的视图可以分为以下几类：基于函数的视图（Func…...

编程日记 2025/8/24 4:44:07

大语言模型在患者交互任务中的临床使用评估框架

An evaluation framework for clinical use of large language models in patient interaction tasks An evaluation framework for clinical use of large language models in patient interaction tasks | Nature Medicine 2025.1 收到时间：2023 年 8 月 8 日 …...

编程日记 2025/8/20 12:44:45

Python—类class复习

Python——类（class）复习根据类来创建对象的方法被称为实例化因此学会使用类（class）来进行编程就是初步进入面向对象编程的大门 1.1 创建和使用类首先编写一个小狗的简单类Dog，它表示的不是特定的小狗&#xff…...

编程日记 2025/8/19 5:23:07

QT | 信号与槽(超详解)

前言对qt信号和槽的详细解释 💓 个人主页：普通young man-CSDN博客 ⏩ 文章专栏：C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题评论区见📝 🎉欢迎大家点赞&am…...

编程日记 2025/8/16 10:04:36

Codecraft-17 and Codeforces Round 391 E. Bash Plays with Functions 积性函数

题目链接题目大意定义函数 f r ( n ) f_r(n) fr(n) : 在 r 0 r0 r0时，为满足 p p p ⋅ \cdot ⋅ q n qn qn , 且 g c d ( p , q ) 1 gcd(p,q)1 gcd(p,q)1 的有序对 ( p , q ) (p,q) (p,q) 个数；在 r r r ≥ \geq ≥ 1 1 1时&#xff0…...

编程日记 2025/8/22 8:17:47

粉尘环境下的智能生产革命 ——助力矿山行业实现高效自动化作业

在矿山开采领域，运输系统是保障生产连续性的核心环节。然而，粉尘弥漫、环境恶劣、设备分散等问题，长期制约着矿山运输的效率与安全性。传统的集中式控制系统难以适应复杂工况，而远程分布式 IO 模块与 PLC 的深度融合，正…...

编程日记 2025/8/23 12:32:57

更新vscode ,将c++11更新到c++20

要在CentOS系统中安装最新版本的GCC，你可以使用SCL（Software Collections）仓库，它提供了开发工具的最新版本。以下是安装步骤： 1、添加SCL仓库： 首先，添加CentOS的SCL仓库，该仓库…...

编程日记 2025/8/16 10:08:01

Numpy实训：读取并分析iris数据集中鸢尾花的相关数据

实训中相关数据集，请联系博主邮箱"1438077481qq.com"，在邮箱内发送"iris.csv"即可快速获取，无任何套路，秉承开源精神！ 1、导入模块 #导入模块 import numpy as np import csv 2、获取数据 iri…...

编程日记 2025/8/22 13:12:51

相关文章：