vue手势解决方案
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手势解决方案的更多相关文章
- nginx部署vue项目 解决方案
给前端同事部署了web项目之后,访问发现除了index.html可以访问,其他的路径使用了“伪静态”.比如访问:http://localhost:8081/user/login,访问即报404错误,这 ...
- 超小Web手势库AlloyFinger原理
目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看:https://github.com/AlloyTeam/AlloyFi ...
- 超小Web手势库AlloyFinger原理(转载)
目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看: https://github.com/AlloyTeam/AlloyF ...
- vue数据绑定数组,改变元素时不更新view问题
关于这个问题,官网上说的很清楚官方文档 写个例子HTML<body> <div class="box"> <div v-for="aa i ...
- ASP.NET MVC+Vue.js实现联系人管理
接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
- 1.vue和react的区别
1.个人感觉Vue好用,react不咋地呀. 2.(网上搜的)Vue的解决方案适用于小型应用,但对于对于大型应用而言不太适合.
- 2017 年比较 Angular、React、Vue 三剑客(转载)
为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事.现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博得了很多人的关注.更重要的是,这只是一些 ...
- React的世界观及与Vue之比较
写在前面:本文谈论的是主观的个人感受,不追求立场的“客观.公正”,因此我下面所说的很可能是错的,欢迎交流指正. 我学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue ...
- vue要求更新3.0-》使用axios的时候出现错误
要求更新 使用axios报错 - Running completion hooks...error: 'options' is defined but never used (no-unused-va ...
随机推荐
- 优化mysql的内存
Mysql占用CPU过高的时候,该从哪些方面下手进行优化? 占用CPU过高,可以做如下考虑:1)一般来讲,排除高并发的因素,还是要找到导致你CPU过高的哪几条在执行的SQL,show processl ...
- solr 学习之数据导入
将数据库中的数据导入到我们的solr索引库中(DataImportHandler) 1.将jdbc的jar包和solr包中的DataImport的jar包拷贝到webapp中solr/WEB-INF/ ...
- tomcat执行shutdown.sh进程残留的解决办法
我们执行shutdown.sh指令的时候有时会发现进程并没有被关掉而是越来越多,这种情况一般是项目造成的,具体原因未去调查.由于tomcat自己有相应的保护机制,所以我们只需要强制结束其进程即可,下面 ...
- bootstrap 有些控件需要调用锚点,会与angular 路由 冲突
最简单的方法 就是 在 #号前加/, 但有人说 在服务器上回失效,也不知道是什么原理.慎用 最靠谱的方法 就 是 使用bootstrap中的js控制控件, 比如轮播图的上一页 下一页,就可以在 ang ...
- 前端基础:HTML标签(上)
前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...
- (转)把hadoop源码关联到eclipse工程
把hadoop源码关联到eclipse工程 转:http://www.superwu.cn/2013/08/04/355 在eclipse中阅读源码非常方便,利于我们平时的学习,下面讲述如何把 ...
- Linux相关——画图软件安装
其实也不知道算不算Linux相关了... 装个画图软件还是很方便的,刚刚试了一下kolourpaint,感觉还行,就记录下来吧. 先记录几个快捷键emmmm print ---->全屏截图 al ...
- 1、搭建Struts2开发环境
一.Struts2简介: Struts2是在WebWork2的基础上发展而来的.和struts1一样, Struts2也属于MVC框架.不过有一点大家需要注意的是:尽管Struts2 和 struts ...
- spring 整合 redis 单机版
增加spring配置文件: application-jedis.xml <?xml version="1.0" encoding="UTF-8"?> ...
- Codeforces Round #514 (Div. 2):D. Nature Reserve(二分+数学)
D. Nature Reserve 题目链接:https://codeforces.com/contest/1059/problem/D 题意: 在二维坐标平面上给出n个数的点,现在要求一个圆,能够容 ...