vue图片放大与缩小,vue放大缩小页面
现在项目中有这样的一个需求，对上传的图片可以点击之后在线预览，这篇文章主要给大家介绍了关于某视频剪辑软件实现图片预览效果实例（放大、缩小、拖拽)的相关资料，需要的朋友可以参考下
前言
这张图是显示的图片放大的一个预览情况，这里是参考预览操作实现的一个背景为黑色的部分，上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大，代码是基于蚂蚁设计公司框架的基础上
这里先分解部分，后面有全部代码
1.需要有黑色背景用于预览背景：
这里的背景要占满整个屏幕（这里的一般是参考其他插件预览的样式进行模拟设计的),样式在后方代码内
2.展示图片并且把图片展示到背景板最中间。
3.最重要的下方的两部分：
滚轮放大缩小图片：
bbimg() {
设e=e window.event
这个。参数。变焦值=电动轮增量/1200
if (this.params.zoomVal=0.2) {
这个。test= transform:scale($ { this。参数。缩放值})；`
}否则{
this.params.zoomVal=0.2
这个。test= transform:scale($ { this。参数。缩放值})；`
返回错误的
}
},
图片拖拽：
imgMove(e) {
console.log(e ，e)
设oImg=目标
设disX=e . clientx-oimg。向左偏移
让我们来看看。抵消
console.log(disX ，disX)
document.onmousemove=(e)={
预防默认()
let left=e.clientX - disX
let top=e.clientY - disY
这个。测试=这个。test ` left:$ { left } px；top:$ { top } px；`
}
document.onmouseup=(e)={
document.onmousemove=null
document.onmouseup=null
}
},
这里的试验和类别样式是作为图片的动态样式，虽然名字起得着急，但是不影响使用
整体实现的功能：
点击图片，可以进行滚轮放大及缩小，
点击后按压左键可进行拖拽查看图片
点击上方的放大及缩小图标也可以进行放大等操作，
点击x可关于预览
点击关闭后，恢复大小，避免点击其他照片影响大小
下面是全部实现代码：
模板
a卡样式=宽度：100%
差异
图片
:src=file
alt=
@click=handlePhotoShow(file)
/
！-预览=0
预览-text=图片-
/div
div class= showImg v-if= pictShow @ mouse wheel= bbimg(this)
div class=setting_box
图标
class=设置_缩放
v-if=zoomInShow==false
类型=放大
@click=handleZoomIn
/
图标
color=#fff
class=设置_缩放
v-if=zoomInShow==true
类型=缩小
@click=handleZoomOut
/
a-icon color= # fff class= setting _ close type= close @ click= handle close /
/div
img:src= file alt= :class= class style :style= test @ mousedown= img move /
/div
/a卡
/模板
脚本
导出默认值{
data() {
返回{
测试： ,
pictShow:假的，
zoomInShow:假的，
参数：{
zoomVal: 1，
左：0,
top: 0，
当前时间：0,
当前值：0,
标志：假，
},
文件： ,
}
},
计算值：{
classStyle() {
把这个退回去zoomInShow？a1 : a2
},
},
方法：{
//实现图片放大缩小
bbimg() {
设e=e window.event
这个。参数。变焦值=电动轮增量/1200
if (this.params.zoomVal=0.2) {
这个。test= transform:scale($ { this。参数。缩放值})；`
}否则{
this.params.zoomVal=0.2
这个。test= transform:scale($ { this。参数。缩放值})；`
返回错误的
}
},
//实现图片拖拽
imgMove(e) {
console.log(e ，e)
设oImg=目标
设disX=e . clientx-oimg。向左偏移
让我们来看看。抵消
console.log(disX ，disX)
document.onmousemove=(e)={
预防默认()
let left=e.clientX - disX
let top=e.clientY - disY
这个。测试=这个。test ` left:$ { left } px；top:$ { top } px；`
}
document.onmouseup=(e)={
document.onmousemove=null
document.onmouseup=null
}
},
handleZoomIn() {
this.zoomInShow=true
},
handleZoomOut() {
this.zoomInShow=false
},
handlePhotoShow(文件){
console.log(file ，file)
this.file=file
this.pictShow=true
},
handleClose() {
this.pictShow=false
这个。test= transform:scale(1)
},
},
}
/脚本
样式范围语言=少。显示{
宽度：100%;
身高：100vh
背景色：rgba(0，0，0，1)；
位置：固定；
*位置：绝对；
z指数：20;
边距：0自动；
top:0；
左：0;
显示器：flex
对齐-内容：居中；
对齐-项目：居中；设置_框{
宽度：100%;
高度：50px
行高：50px
字体大小：20px
背景色：rgba(0，0，0，0.3)；
位置：绝对；
top:0；
z指数：999;设置_缩放，设置_关闭{
位置：绝对；
z指数：1000;
top:20px；
颜色：# fff
不透明度：1;
}。设置_缩放{
右：50px
}。设置_关闭{
右：10px
}
}
}。a1 {
最大宽度：200vw
最大高度：180vh
位置：绝对；
z指数：22;
边距-顶部：40px
光标：移动；
}。a2 {
最大宽度：95vw
最大高度：90vh
位置：绝对；
z指数：22;
边距-顶部：40px
光标：移动；
}。缩放框{
光标：放大；
}。照片_框{
边距：0 5px 5px 0
}
/风格
因为具体也是查看了很多博客等资源最后完成的。
其实在代码内有一部分代码：
图片
:src=file
预览=0
预览-text=图片
alt=
@click=handlePhotoShow(file)
/
其实有preview=0 preview-text=图片 这两行实现图片的预览，但是找了资料没找到具体实现的部分，但是这个属性确实实现了
这里手写预览的原因是这个插件在数量大的情况下是没有反应的。
总结
到此这篇关于某视频剪辑软件实现图片预览效果实例（放大、缩小、拖拽)的文章就介绍到这了，更多相关某视频剪辑软件图片放大缩小拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。