1、需求

  因为项目中要做一个可以移动、旋转和放缩具有合成图片的功能,例如:

剑可以随意移动,然后把位移、旋转角度和放缩值传给后台进行合成。

2、解决方案

网上搜到手势插件AlloyFinger,https://github.com/AlloyTeam/AlloyFinger

首先安装AlloyFinger:npm install alloyfinger

然后在Vue文件里面引用:import AlloyFinger from 'alloyfinger'

使用方法:

mounted() {
this.getData();
this.requireList = document.getElementsByClassName('required');
let swordEle = document.getElementsByClassName('swordPic')[0];
let bwidth, bheight, swidth, sheight;
Transform(swordEle);
var initScale = 1;
var af = new AlloyFinger(swordEle, {
touchStart: function () {
console.log('touchStart')
},
touchMove: function (evt) {
swordEle.style.translateX += evt.deltaX;
swordEle.style.translateY += evt.deltaY;
evt.preventDefault();
},
touchEnd: function () {
console.log('end')
console.log(swordEle.style.transform)
},
touchCancel: function () {
console.log('cancel')
},
multipointStart: function () {
initScale = swordEle.scaleX;
},
multipointEnd: function () {
},
tap: function () {
},
doubleTap: function () {
},
longTap: function () {
},
singleTap: function () {
},
rotate: function (evt) {
swordEle.rotateZ += evt.angle;
},
pinch: function (evt) {
swordEle.scaleX = swordEle.scaleY = initScale * evt.scale;
},
pressMove: function (evt) {
let widthDiff = bwidth - swidth;
let heightDiff = bheight - sheight;
console.log('diff' + widthDiff + ' ' + heightDiff)
console.log('translateX:' + swordEle.translateX + '' + swordEle.translateY )
if (((evt.deltaX>0)&&(swordEle.translateX >= widthDiff))||((evt.deltaY>0)&&(swordEle.translateY >= heightDiff))||((swordEle.translateX<0)&&((evt.deltaX<0)))||((swordEle.translateY<0)&&((evt.deltaY<0)))) {
console.log('越界')
} else {
swordEle.translateX += evt.deltaX;
swordEle.translateY += evt.deltaY;
} console.log('pressmve:' + swordEle.translateX)
console.log('pressmve:' + swordEle.translateY)
},
swipe: function (evt) {
// console.log("swipe" + evt.direction);
}
});
document.getElementById('coverPic').onload = function () {
bwidth = this.width;
bheight = this.height;
console.log(bwidth + ' ' + bheight)
if (document.body.scrollHeight - document.body.clientHeight > 20) {
document.body.scrollTop = document.body.scrollHeight;
}
}
document.getElementById('swordEle').onload = function () {
swidth = this.width;
sheight = this.height;
console.log(swidth + ' ' + sheight)
}
},

vue手势解决方案的更多相关文章

  1. nginx部署vue项目 解决方案

    给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这 ...

  2. 超小Web手势库AlloyFinger原理

    目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看:https://github.com/AlloyTeam/AlloyFi ...

  3. 超小Web手势库AlloyFinger原理(转载)

    目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看: https://github.com/AlloyTeam/AlloyF ...

  4. vue数据绑定数组,改变元素时不更新view问题

    关于这个问题,官网上说的很清楚官方文档  写个例子HTML<body> <div class="box"> <div v-for="aa i ...

  5. ASP.NET MVC+Vue.js实现联系人管理

    接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...

  6. 1.vue和react的区别

    1.个人感觉Vue好用,react不咋地呀. 2.(网上搜的)Vue的解决方案适用于小型应用,但对于对于大型应用而言不太适合.

  7. 2017 年比较 Angular、React、Vue 三剑客(转载)

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事.现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博得了很多人的关注.更重要的是,这只是一些 ...

  8. React的世界观及与Vue之比较

    写在前面:本文谈论的是主观的个人感受,不追求立场的“客观.公正”,因此我下面所说的很可能是错的,欢迎交流指正. 我学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue ...

  9. vue要求更新3.0-》使用axios的时候出现错误

    要求更新 使用axios报错 - Running completion hooks...error: 'options' is defined but never used (no-unused-va ...

随机推荐

  1. 优化mysql的内存

    Mysql占用CPU过高的时候,该从哪些方面下手进行优化? 占用CPU过高,可以做如下考虑:1)一般来讲,排除高并发的因素,还是要找到导致你CPU过高的哪几条在执行的SQL,show processl ...

  2. solr 学习之数据导入

    将数据库中的数据导入到我们的solr索引库中(DataImportHandler) 1.将jdbc的jar包和solr包中的DataImport的jar包拷贝到webapp中solr/WEB-INF/ ...

  3. tomcat执行shutdown.sh进程残留的解决办法

    我们执行shutdown.sh指令的时候有时会发现进程并没有被关掉而是越来越多,这种情况一般是项目造成的,具体原因未去调查.由于tomcat自己有相应的保护机制,所以我们只需要强制结束其进程即可,下面 ...

  4. bootstrap 有些控件需要调用锚点,会与angular 路由 冲突

    最简单的方法 就是 在 #号前加/, 但有人说 在服务器上回失效,也不知道是什么原理.慎用 最靠谱的方法 就 是 使用bootstrap中的js控制控件, 比如轮播图的上一页 下一页,就可以在 ang ...

  5. 前端基础:HTML标签(上)

    前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...

  6. (转)把hadoop源码关联到eclipse工程

    把hadoop源码关联到eclipse工程     转:http://www.superwu.cn/2013/08/04/355 在eclipse中阅读源码非常方便,利于我们平时的学习,下面讲述如何把 ...

  7. Linux相关——画图软件安装

    其实也不知道算不算Linux相关了... 装个画图软件还是很方便的,刚刚试了一下kolourpaint,感觉还行,就记录下来吧. 先记录几个快捷键emmmm print ---->全屏截图 al ...

  8. 1、搭建Struts2开发环境

    一.Struts2简介: Struts2是在WebWork2的基础上发展而来的.和struts1一样, Struts2也属于MVC框架.不过有一点大家需要注意的是:尽管Struts2 和 struts ...

  9. spring 整合 redis 单机版

    增加spring配置文件: application-jedis.xml <?xml version="1.0" encoding="UTF-8"?> ...

  10. Codeforces Round #514 (Div. 2):D. Nature Reserve(二分+数学)

    D. Nature Reserve 题目链接:https://codeforces.com/contest/1059/problem/D 题意: 在二维坐标平面上给出n个数的点,现在要求一个圆,能够容 ...