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

【前端】es-drager 图片同比缩放 缩放比 只修改宽 只修改高

【前端】es-drager 图片同比缩放 缩放比

ES Drager 拖拽组件 (vangleer.github.io)

核心代码

//初始宽
let width = ref(108)//初始高
let height = ref(72)//以下两个变量 用来区分是单独的修改宽 还是高 或者是同比
//缩放开始时的宽
let oldWidth = 0
//缩放开始时的高
let oldHeight = 0// resize start   缩放开始
const onResizeStart = (dragData: DragData) => {//初始化old宽高  用来区分用户拖拽的哪个点oldWidth = dragData.widtholdHeight = dragData.heightconsole.log('缩放开始', dragData)
}// resizing 缩放中...
const onResize = (dragData: DragData) => {if(dragData.width == oldWidth && dragData.height == oldHeight){return}if(dragData.width == oldWidth){//只改变高console.log('缩放中...只改变高', dragData)}else if(dragData.height == oldHeight){//只改变宽console.log('缩放中...只改变宽', dragData)}else{//同比console.log('缩放中...同比缩放', dragData)let 缩放比例 = (dragData.width / oldWidth)//进行同比缩放
//如果画布有缩放比 这里也可以用 oldHeight 或者 用缩放比之后的高度//dragData.height =  oldHeight * 缩放比例dragData.height =  height.value * 缩放比例}}

全部代码

<template><Drager:width="width":height="height":left="100":top="100"rotatable@change="onChange"@drag="onDrag"@drag-start="onDragStart"@drag-end="onDragEnd"@resize="onResize"@resize-start="onResizeStart"@resize-end="onResizeEnd"@rotate="onRotate"@rotate-start="onRotateStart"@rotate-end="onRotateEnd"@focus="onFocus"@blur="onBlur"/>
</template><script setup lang="ts">
import Drager, { type DragData } from 'es-drager'
import { ref } from 'vue';let width = ref(108)
let height = ref(72)let oldWidth = 0
let oldHeight = 0// let width = 100
// let height = 100// @change="onChange"
// drag、resize、rotate
const onChange = (dragData: DragData) => {console.log('onChange', dragData)
}// draging
const onDrag = (dragData: DragData) => {console.log('onDrag', dragData)
}
// drag start
const onDragStart = (dragData: DragData) => {//拖拽开始console.log('拖拽开始', dragData)
}
// drag end
const onDragEnd = (dragData: DragData) => {console.log('onDragEnd', dragData)
}// resizing
const onResize = (dragData: DragData) => {if(dragData.width == oldWidth && dragData.height == oldHeight){return}if(dragData.width == oldWidth){//只改变高console.log('缩放中...只改变高', dragData)}else if(dragData.height == oldHeight){//只改变宽console.log('缩放中...只改变宽', dragData)}else{//同比console.log('缩放中...同比缩放', dragData)let 缩放比例 = (dragData.width / width.value)//进行同比缩放dragData.height =  height.value * 缩放比例}}
// resize start
const onResizeStart = (dragData: DragData) => {oldWidth = dragData.widtholdHeight = dragData.heightconsole.log('缩放开始', dragData)
}
// resize end
const onResizeEnd = (dragData: DragData) => {console.log('缩放结束', dragData)
}// rotating
const onRotate = (dragData: DragData) => {console.log('onRotate', dragData)
}
// rotate start
const onRotateStart = (dragData: DragData) => {console.log('onRotateStart', dragData)
}
// resize end
const onRotateEnd = (dragData: DragData) => {console.log('onRotateEnd', dragData)
}// focus/selected
function onFocus(val: boolean) {console.log('onFocus', val)
}
// blur/unselected
function onBlur(val: boolean) {console.log('onBlur', val)
}
</script>

相关文章:

【前端】es-drager 图片同比缩放 缩放比 只修改宽 只修改高

【前端】es-drager 图片同比缩放 缩放比 ES Drager 拖拽组件 (vangleer.github.io) 核心代码 //初始宽 let width ref(108)//初始高 let height ref(72)//以下两个变量 用来区分是单独的修改宽 还是高 或者是同比 //缩放开始时的宽 let oldWidth 0 //缩放开始时的高 let o…...

蓝桥杯第十四届蓝桥杯大赛软件赛省赛C/C++ 大学 A 组题解

1.幸运数 题目链接&#xff1a;0幸运数 - 蓝桥云课 (lanqiao.cn) #include<bits/stdc.h> using namespace std; bool deng(string& num){int n num.size();int qian 0,hou 0;for(int i0;i<n/2;i) qian (num[i]-0);for(int in/2;i<n;i) hou (num[i]-0);r…...

eclipse .project

.project <?xml version"1.0" encoding"UTF-8"?> <projectDescription> <name>scrm-web</name> <comment></comment> <projects> </projects> <buildSpec> <buil…...

react的闭包陷阱

React 的闭包陷阱是指在使用 React Hooks 时&#xff0c;由于闭包特性导致在某些函数或异步操作中无法正确访问到更新后状态或 prop 的值&#xff0c;而仍旧使用了旧值。下面通过几个代码示例来具体说明闭包陷阱的几种常见情形&#xff1a; 示例 1: useState 闭包陷阱 import…...

神经网络解决回归问题(更新ing)

神经网络应用于回归问题 优势是什么&#xff1f;&#xff1f;&#xff1f;生成数据集&#xff1a;通用神经网络拟合函数调整不同参数对比结果初始代码结果调整神经网络结构调整激活函数调整迭代次数增加早停法变量归一化处理正则化系数调整学习率调整 总结ingfnn.py进行计算&am…...

【小红书校招场景题】12306抢票系统

1 坐过高铁吧&#xff0c;有抢过票吗。你说说抢票系统对于后端开发人员而言会有哪些情况&#xff1f; 对于后端开发人员来说&#xff0c;开发和维护一个高铁抢票系统&#xff08;如中国的12306&#xff09;会面临一系列的挑战和情况。这些挑战主要涉及系统的性能、稳定性、数据…...

Spring(三)

1. Spring单例Bean是不是线程安全的? Spring单例Bean默认并不是线程安全的。由于多个线程可能访问同一份Bean实例&#xff0c;当Bean的内部包含了可变状态&#xff08;mutable state&#xff09;即有可修改的成员变量时&#xff0c;就可能出现线程安全问题。Spring容器不会自动…...

使用element-plus中的表单验证

标签页代码如下&#xff1a; // 注意&#xff1a;el-form中的数据绑定不可以用v-model&#xff0c;要使用:model <el-form ref"ruleFormRef" :rules"rules" :model"userTemp" label-width"80px"><el-row :gutter"20&qu…...

flinksql

Flink SQL 是 Apache Flink 项目中的一个重要组成部分,它允许开发者使用标准的 SQL 语言来处理流数据和批处理数据。Flink SQL 提供了一种声明式的编程范式,使得用户能够以一种简洁、高效且易于理解的方式来表达复杂的数据处理逻辑。 ### 背景 Flink SQL 的设计初衷是为了简…...

Dockerfile中 CMD和ENTRYPOINT的区别

在 Dockerfile 中&#xff0c;CMD 和 ENTRYPOINT 都用于指定容器启动时要执行的命令。它们之间的主要区别是&#xff1a; - CMD 用于定义容器启动时要执行的命令和参数&#xff0c;它设置的值可以被 Dockerfile 中的后续指令覆盖&#xff0c;包括在运行容器时传递的参数。如果…...

【TC3xx芯片】TC3xx芯片的总线内存保护

前言 广义上的内存保护,包括<<【TC3xx芯片】TC3xx芯片MPU介绍>>一文介绍的MPU(常规狭义上的内存保护),<<【TC3xx芯片】TC3xx芯片的Endinit功能详解>>一文中介绍的寄存器的EndInit保护,<<【TC3xx芯片】TC3xx芯片ACCEN寄存器保护详解>>一…...

抖音小店选品必经五个阶段,看你到哪一步了,直接决定店铺爆单率

大家好&#xff0c;我是电商笨笨熊 新手选品必经的阶段就是迷茫期&#xff0c;不知道怎么选品&#xff0c;在哪里选品&#xff0c;选择什么样的品&#xff1b; 而有些玩家也会在进入店铺后疯狂选品&#xff0c;但是上架的商品没有销量&#xff1b; 而这些都是每个玩家都要经…...

ML在骨科手术术前、书中、术后方法应用综述【含数据集】

达芬奇V手术机器人 近年来,人工智能(AI)彻底改变了人们的生活。人工智能早就在外科领域取得了突破性进展。然而,人工智能在骨科中的应用研究尚处于探索阶段。 本文综述了近年来深度学习和机器学习应用于骨科图像检测的最新成果,描述了其贡献、优势和不足。以及未来每项研究…...

vue3-video-play 在安卓上正常播放,在ios上不能播放,问题解决

1.ios上autoplay需要静音&#xff0c;在播放后再打开声音 <vue3videoPlay v-if"!isComponent" v-bind"options" :playsinline"playsinline"></vue3videoPlay>let playsinline computed(() > {if (props.isComponent) {return}o…...

【C++类和对象】上篇

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…...

微信订阅号环境搭建及开发者工具下载

目录 一、注册订阅号 1.1 选择注册 2.2 选择订阅号注册 1.3 登录进入主页面 ​编辑 1.4 可以进行自定义菜单 1.5 我们重点关注公众平台测试账号 ​编辑 1.6 自定义一个域名 1.7 用自己的微信扫描这个二维码 ​编辑 1.8 点击修改&#xff0c;并自定义个域名 二、开发…...

Failed to resolve ‘bss.myhuaweicloud.com‘ ([Errno -2] Name or service not know

Failed to resolve ‘bss.myhuaweicloud.com’ ([Errno -2] Name or service not know 解決方案&#xff1a; 修改/etc/resolv.conf文件来指定DNS服务器&#xff0c;例如添加Google的公共DNS服务器&#xff1a; nameserver 8.8.8.8 nameserver 8.8.4.4...

大厂基础面试题(之二)

Q1&#xff1a;flex布局 Flex布局容器属性包括&#xff1a; flex-direction: 定义主轴的方向&#xff0c;决定flex容器中的子元素的排列方式 flex-wrap&#xff1a;设置子元素是否换行 flex-flow&#xff1a;是flex-direction和flex-wrap的简写形式&#xff0c;用于设置容器的排…...

swiftui macOS实现加载本地html文件

import SwiftUI import WebKitstruct ContentView: View {var body: some View {VStack {Text("测试")HTMLView(htmlFileName: "localfile") // 假设你的本地 HTML 文件名为 index.html.frame(minWidth: 100, minHeight: 100) // 设置 HTMLView 的最小尺寸…...

科技云报道:大模型加持后,数字人“更像人”了吗?

科技云报道原创。 北京冬奥运AI 虚拟人手语主播、杭州亚运会数字人点火、新华社数字记者、数字航天员小诤…当随着越来越多数字人出现在人们生活中&#xff0c;整个数字人行业也朝着多元化且广泛的应用方向发展&#xff0c;快速拓展到不同行业、不同场景。 面向C端&#xff0…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要&#xff1a;在消费市场竞争日益激烈的当下&#xff0c;传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序&#xff0c;探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式&#xff0c;分析沉浸式体验的优势与价值…...