H5,Vue,实现图片预览功能,可双击放大,复位,重置,双指放大缩小图片,使用 hammerjs插件
H5,Vue,实现图片预览功能,可双击放大,复位,重置,双指放大缩小图片,使用 hammerjs插件
·
H5,Vue,实现图片预览功能,可双击放大,复位,重置,双指放大缩小图片,使用 hammerjs插件
1. npm 下载插件hammerjs
npm install --save hammerjs
2. html 界面
//在界面上展示的图片 路径换成自已的图片路径
<div class="imgWrap">
<img src="../assets/img/active.jpg" alt="" @click="clickImg">
</div>
// 展示预览的组件 van-icon 是用的vant的icon图标,自己项目里用自己的图标
<van-overlay :show="show">
<van-icon name="close" size="30" color="#fff" @click="closeFn" v-show="show" style="position:fixed;top:0;right:0;margin:10px;z-index:100"/>
<div class="imgWrapPop" ref="activeBox" style="">
<img src="../assets/img/active.jpg" alt="" >
</div>
</van-overlay>
3. 引用
import Hammer from 'hammerjs';
import { Toast,Popup ,Icon} from 'vant';//要使用vant ui的icon图标的话需要先下载后按需引入
3. data
data() {
return {
show:false,
};
},
4. mounted 函数
mounted() {
this.matrix_box()
},
5. methods函数
matrix_box(){
console.log(123)
let that = this;
this.$nextTick(() => {
let x = 0;
let y = 0;
let _node = this.$refs.activeBox; // 获取之前在模板中设置的ref属性
let hand = new Hammer(_node); // 创建一个新的Hammer实例,传入要进行手势操作的元素
// 启用pinch手势
hand.get('pinch').set({ enable: true });
// 监听pinch手势的不同事件,用于实现缩放功能
hand.on("pinchmove pinchstart pinchin pinchout", e => {
if (e.type == "pinchstart") {
this.scaleIndex = this.scaleCount || 1; // 记录当前的缩放比例
}
this.scaleCount = this.scaleIndex * e.scale; // 计算新的缩放比例
_node.style.transform = "scale(" + (this.scaleIndex * e.scale) + ")"; // 应用缩放效果
});
// 监听doubletap手势,用于双击重置缩放和位置
hand.on('doubletap', (e) => {
x = 0;
y = 0;
this.scaleCount = 1; // 重置缩放比例为1
_node.style.transform = "translateX(0px) translateY(0px) scale(1)"; // 重置位置和缩放效果
});
// 监听pan手势,用于实现拖动功能
hand.on('panright panleft panup pandown', (e) => {
_node.style.transform = "translateX(" + (e.deltaX + x) + "px)" + "translateY(" + (e.deltaY + y) + "px)" + "scale(" + (this.scaleCount * e.scale) + ")"; // 应用拖动和缩放效果
});
// 监听panend手势,用于记录拖动的偏移量,以便在下一次拖动时保持连续性
hand.on('panend', (e) => {
x = e.deltaX + x; // 记录水平方向上的偏移量
y = e.deltaY + y; // 记录垂直方向上的偏移量
});
});
},
clickImg(){
this.show = true;
},
closeFn(){
this.show = false;
}
更多推荐
已为社区贡献4条内容
所有评论(0)