图片的缩放和拖拽功能

缩放：监听滚轮的滚动滑动事件，然后改变图片的zomm属性

拖拽：获取鼠标单击后，X、Y挪动的像素，图片使用定位，更改left和top的值

<template><div style="height:100%;width:100%" @wheel="scrollHandle" class="outdiv" ref="outdiv"><div v-drag='(that)' class="images" ref="Image":style="{height:'100%',width:'100%',left:'0%',top:'0%', backgroundImage:'url('+imgUrl+')'}"></div></div>
</template>
<script >
import Vue from 'vue'
export default {props: ['isShowMap'],name: "",data() {return {imgUrl: "",that: 'this',outdivLeft: document.documentElement.clientHeight - 100, //外面盒子的大小outdivWidth: document.documentElement.clientWidth//外面盒子的大小};},async created() {const getimgurl = await this.$ajax.get(`/api/SystemSetting/QueryGeneralLayout`);this.imgUrl = getimgurl.data.result;},methods: {setZoom() {let pic = this.$refs.Image;pic.style.zoom = '100%'},//滚轮滑动事件scrollHandle(a, b) {let pic = this.$refs.Image;let oBool = a.deltaY < 0let zoomLeft = pic.style.left.indexOf("px")let zoomTop = pic.style.top.indexOf("px")pic.style.height = parseInt(pic.style.height) + (oBool ? 10 : -10) + "%";pic.style.width = parseInt(pic.style.width) + (oBool ? 10 : -10) + "%";let ZoomNum = Number(pic.style.height.split("%")[0]);if (ZoomNum < 10) {pic.style.height = "10%";pic.style.width = "10%";} else {if (zoomLeft && zoomLeft !== -1) {let deviationLeft = pic.style.left.split('px')[0]pic.style.left = ((deviationLeft / this.outdivWidth).toFixed(2)) * 100 + '%'} else {pic.style.left = parseInt(pic.style.left) + (oBool ? -5 : 5) + "%";}if (zoomTop && zoomTop !== -1) {let deviationTop = pic.style.top.split('px')[0]pic.style.top = ((deviationTop / this.outdivHeight).toFixed(2)) * 100 + '%'} else {pic.style.top = parseInt(pic.style.top) + (oBool ? -5 : 5) + "%";}}},},directives: {drag: {// 指令的定义bind: (el) => {// console.log(this);// 获取当前元素let oDiv = el;oDiv.onmousedown = (e) => {// 算出鼠标相对元素的位置let disX = e.clientX - oDiv.offsetLeft;let disY = e.clientY - oDiv.offsetTop;document.onmousemove = (e) => {// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disX;let top = e.clientY - disY;let outdivWidth = document.documentElement.clientWidth//外面盒子的大小let insideWidth = Number(oDiv.style.width.split('%')[0]) / 100 * outdivWidthconsole.log(insideWidth);if (left > outdivWidth - 100) {left = outdivWidth - 100console.log(left, outdivWidth - 100);} else if (left < -insideWidth + 100) {left = -insideWidth + 100}let outdivHeight = document.documentElement.clientHeight - 100; //外面盒子的大小let insideHeight = Number(oDiv.style.height.split('%')[0]) / 100 * outdivHeightif (top > outdivHeight - 100) {top = outdivHeight - 100console.log(top, outdivHeight - 100);} else if (top < -insideHeight + 100) {top = -insideHeight + 100}oDiv.style.left = left + 'px';oDiv.style.top = top + 'px';};document.onmouseup = () => {document.onmousemove = null;document.onmouseup = null;}}}}},//常规-监听watch: {isShowMap(newtext, oldtext) {if (!newtext) {var pic = this.$refs.Image;pic.style.height = "100%";pic.style.width = "100%";pic.style.left = '0px'pic.style.top = '0px'}}},
};
</script>
<style scoped >
.outdiv {position: relative;overflow: hidden;
}.images {position: absolute;left: 0px;top: 0px;background-repeat: no-repeat;background-size: contain;background-position: center;
}
</style>

图片的缩放和拖拽功能相关推荐

canvas+vue实现图片的缩放、拖拽
最近做项目遇到一个需求,对图片进行拖动+缩放,本来这个功能直接采用viewerjs这个插件就可以实现的. 但是我们还有其他需求啊,在底层图片上添加一些图片或者文字注释,并且随着底层图片的拖动和缩放后, ...
C# Winform 相册功能，图片缩放，拖拽，预览图分页
效果 1.图片放大,缩小,拖拽功能 2.添加图片,分页功能一.前言在一些项目中也会用到预览图片的功能,至于为什么有一个添加图片的按钮,是因为有些项目,比如视觉相关的项目,摄像头拍摄图片,然后显示在 ...
html5 canvas图片缩放，拖拽
想用html5 canvas来实现地图功能主要是想把地图功能集合在系统中,而不是使用类似geoserver等发布,相当于两套系统了.地图是室内地图,所以高德百度什么的没用.我的理想情况是丢一副矢量图 ...
flutter实现可缩放可拖拽双击放大的图片功能
### flutter_drag_scale ``` 可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽并支持双击放大的功能 ``` 我们知道官方提供了双击缩放,但是不支持拖拽的功能, ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
点击图片放大,实现移动端双指缩放,单指拖拽功能
记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: ...
图片的旋转,缩放和拖拽
由于之前公司项目的原因,我被要求完成一个头像上传功能,其中包括要实现上传图片的旋转,缩放和拖拽,更关键的是要用JS实现... 作为一个不大喜欢用JS的人来说这是一个很严峻的挑战,不过随着项目的进行我的 ...
拖拽功能之水平拖动图片
1实现技术项目运行环境:ant pro 拖拽技术插件: react-sortable-hoc 实现拖拽功能 array-move 实现拖拽过程中数据 ...
RecyclerView实现滑动删除和拖拽功能
源码传送门前言从Android 5.0开始,谷歌推出了新的控件RecyclerView,相对于早它之前的ListView,优点多多,功能强大,也给我们的开发着提供了极大的便利,今天自己学习一下Re ...

图片的缩放和拖拽功能

图片的缩放和拖拽功能相关推荐

最新文章

热门文章