使用AlloyFinger插件实现div包括其子元素的双指缩放单指移动

最新推荐文章于 2024-08-08 07:39:15 发布

废柴小z

最新推荐文章于 2024-08-08 07:39:15 发布

阅读量285

点赞数

分类专栏： Vue 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34568700/article/details/130639132

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

该文章展示了如何在Vue.js项目中使用AlloyFinger库来处理div元素的触摸事件，如缩放(pinch)、移动(pressMove)。通过调整posX、posY和dis的数据属性，实现了元素的位置和缩放变换。

摘要由CSDN通过智能技术生成

npm install --save alloyfinger

 <div :class='["mapcontent", currMap.name]' 
       ref="pic"
         :style="{
        	 transform:
             'translate(' +
             posX +
             'px,' +
             posY +
             'px) translateZ(0px) scale(' +
             dis +
             ')',
         }">
         ...
 </div>

  
    import AlloyFinger from "alloyfinger";
	...
	data() {
            return {
               posX: 0,
               posY: 0,
               dis: 1
            };
        },
    ...
    mounted(){
   	 this.initControl();
    },
    methods: {
		initControl() {
			   let that = this;
			   let pic = this.$refs.pic;// 要操作的div
			   this.af = new AlloyFinger(pic, {
			       // rotate: function (evt) {
			       //   console.log("实现旋转");
			       //   that.angle += evt.angle;
			       // },
			       pinch: function (evt) {
			           console.log("实现缩放");
			           that.dis = evt.zoom > 1 ? evt.zoom : 1;
			       },
			       pressMove: function (evt) {
			           console.log("实现移动");
			           console.log(evt);
			           //   if(that.dis>1) {
			           that.posX += evt.deltaX;
			           that.posY += evt.deltaY;
			           //   }
			       },
			       // tap: function (evt) {
			       //   console.log("单击");
			       //   //点按触发
			       // },
			       // doubleTap: function (e) {
			       //   console.log("双击");
			       //   //双击屏幕触发
			       // },
			       // longTap: function (e) {
			       //   console.log("长按");
			       //   //长按屏幕750ms触发
			       // },
			       // swipe: function (e) {
			       //   //e.direction代表滑动的方向
			       //   console.log("swipe" + e.direction);
			       // },
			    });
			},
	}