【vue 移动端使用alloyfinger操作图片拖拽缩放】_vue 移动端 图片拖拽放大缩小-程序员宅基地

技术标签: 前端  vue.js  javascript  

alloyfinger:腾讯前端开发的一款轻量级的移动端开源手势库
Github地址:https://github.com/AlloyTeam/AlloyFinger 和 一些些 效果演示

1.安装

npm i alloyfinger -S

2.在页面中导入使用

<template>
  <div class="box clmcenter"> 
       <div class="citybgbox">
         <img :src="cityimgsrc" class="cityphoto">         
         <img :src="personimg" class="personphoto" ref="pic" :style="{'transform': 'translate('+ posX + 'px,' + posY + 'px) translateZ(0px) scale(' + dis + ')  rotate(' + angle + 'deg)'}">         
       </div>
  </div>
</template>
<script>
// 阻止页面的滑动默认事件
document.body.addEventListener(
  'touchmove',
  function (e) {
    
    e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
  },
  {
     passive: false }
) // passive 参数不能省略,用来兼容ios和android

//引入alloyfinger
import AlloyFinger from 'alloyfinger';
export default {
    
  data () {
    
    return {
    
      cityimgsrc: require(`../assets/img/city1.jpg`),
      personimg: require(`../assets/img/giftbox.png`),
      posX: 0, //X轴移动距离
      posY: 0, //Y轴移动距离
      dis: 1, //缩放倍数
      angle: 0, //旋转角度
    }
  },
  mounted () {
    
    this.getData();
  },
  methods: {
    
    getData () {
    
      let that = this;
      let pic = this.$refs.pic;
      this.af = new AlloyFinger(pic, {
    
        rotate: function (evt) {
    
          console.log("实现旋转");
          that.angle += evt.angle;
        },
        pinch: function (evt) {
    
          console.log("实现缩放");
          that.dis = evt.zoom;
        },
        pressMove: function (evt) {
    
          console.log("实现移动");
          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);
        },
        multipointStart: function (e) {
    
          //一个手指以上触摸屏幕触发
          console.log('手指数:'+e.touches.length);
        },
        multipointEnd: function () {
    
        //当手指离开,屏幕只剩一个手指或零个手指触发
        },
      });
    }   
  }
}
</script>

转载自AlloyTeam:http://www.alloyteam.com/2016/05/super-small-web-gesture-library-alloyfinger-released/

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_35057009/article/details/127010269

智能推荐

改善侧滑菜单Fragment切换速度(解决Fragment切换加载慢的问题)_new fragment有点慢-程序员宅基地

文章浏览阅读3.9k次。1.现状:在做项目的时候很多时候需要使用侧滑菜单。侧滑菜单项一般都是用Fragment。一般设计上是在Home page的layout中使用FrameLayout 作为一个container 如:content_main.xml

在Google使用Borg进行大规模集群的管理 7-8-程序员宅基地

文章浏览阅读606次。为什么80%的码农都做不了架构师?>>> ..._google trace batch job

python加密字符串小写字母循环后错两位_python学习:实现将字符串进行加密-程序员宅基地

文章浏览阅读2.6k次,点赞3次,收藏3次。'''题目描述1、对输入的字符串进行加解密,并输出。2加密方法为:当内容是英文字母时则用该英文字母的后一个字母替换,同时字母变换大小写,如字母a时则替换为B;字母Z时则替换为a;当内容是数字时则把该数字加1,如0替换1,1替换2,9替换0;其他字符不做变化。s'''#-*-coding:utf-8-*-importre#判断是否是字母defisLetter(letter):iflen..._编写函数fun2实现字符串加密,加密规则为:如果是字母,将其进行大小写转换;如果

【Java容器源码】集合应用总结:迭代器&批量操作&线程安全问题_迭代器是否可以保证容器删除和修改安全操作-程序员宅基地

文章浏览阅读4.4k次,点赞6次,收藏8次。下面列出了所有集合的类图:每个接口做的事情非常明确,比如 Serializable,只负责序列化,Cloneable 只负责拷贝,Map 只负责定义 Map 的接口,整个图看起来虽然接口众多,但职责都很清晰;复杂功能通过接口的继承来实现,比如 ArrayList 通过实现了 Serializable、Cloneable、RandomAccess、AbstractList、List 等接口,从而拥有了序列化、拷贝、对数组各种操作定义等各种功能;上述类图只能看见继承的关系,组合的关系还看不出来,比如说_迭代器是否可以保证容器删除和修改安全操作

养老金融:编织中国老龄社会的金色安全网

在科技金融、绿色金融、普惠金融、养老金融、数字金融这“五篇大文章”中,养老金融以其独特的社会价值和深远影响,占据着不可或缺的地位。通过政策引导与市场机制的双重驱动,激发金融机构创新养老服务产品,如推出更多针对不同年龄层、风险偏好的个性化养老金融产品,不仅能提高金融服务的可获得性,还能增强民众对养老规划的主动参与度,从而逐步建立起适应中国国情、满足人民期待的养老金融服务体系。在人口老龄化的全球趋势下,中国养老金融的发展不仅仅是经济议题,更关乎社会的稳定与进步。养老金融:民生之需,国计之重。

iOS 创建开源库时如何使用图片和xib资源

在需要使用图片的地方使用下面的代码,注意xib可以直接设置图片。将相应的图片资源文件放到bundle文件中。

随便推点

快排 python简洁版_快速排序的四种python实现(推荐)-程序员宅基地

文章浏览阅读119次。快速排序算法,简称快排,是最实用的排序算法,没有之一,各大语言标准库的排序函数也基本都是基于快排实现的。本文用python语言介绍四种不同的快排实现。1. 一行代码实现的简洁版本quick_sort = lambda array: array if len(array) <= 1 else quick_sort([item for item in array[1:] if item <...

设计模式六大原则(2):里氏替换原则-程序员宅基地

文章浏览阅读442次。设计模式六大原则(2):里氏替换原则 作者:zhengzhb 地址:http://www.uml.org.cn/sjms/201211023.asp#1 肯定有不少人跟我刚看到这项原则的时候一样,对这个原则的名字充满疑惑。其实原因就是这项原则最早是在1988年,由麻省理工学院的一位姓里的女士(Barbara Liskov)提出来的。定义1:如果对每一个类型为 T1的对象 o1,都有类型为 T2

基于psk和dpsk的matlab仿真,MATLAB课程设计-基于PSK和DPSK的matlab仿真-程序员宅基地

文章浏览阅读623次。MATLAB课程设计-基于PSK和DPSK的matlab仿真 (41页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!9.90 积分武汉理工大学MATLAB课程设计.目录摘要 1Abstract 21.设计目的与要求 32.方案的选择 42.1调制部分 42.2解调部分 43.单元电路原理和设计 63.1PCM编码原理及设计 63.1.1PCM编码原理 ..._通信原理课程设计(基于matlab的psk,dpsk仿真)(五篇模版)

腾讯微搭小程序获取微信用户信息_微搭 用微信号登录-程序员宅基地

文章浏览阅读3.5k次,点赞6次,收藏28次。腾讯微搭小程序获取微信用户信息无论你对低代码开发的爱与恨, 微信生态的强大毋庸置疑. 因此熟悉微搭技术还是很有必要的! 在大多数应用中, 都需要获取和跟踪用户信息. 本文就微搭中如何获取和存储用户信息进行详细演示, 因为用户信息的获取和存储是应用的基础.一. 微搭每个微搭平台都宣称使用微搭平台可以简单拖拽即可生成一个应用, 这种说法我认为是"夸大其词". 其实微搭优点大致来说, 前端定义了很多组件, 为开发人员封装组件节省了大量的时间,这是其一; 其二对后端开发来说, 省去了服务器的部署(并没有省去后_微搭 用微信号登录

sql中索引的使用分析

sql中索引的使用分析

termux安装metasploit()-程序员宅基地

文章浏览阅读8.9k次,点赞16次,收藏108次。因为呢,termux作者,不希望让termux变成脚本小子的黑客工具,于是把msf , sqlmap等包删了。至于如何安装metasploit呢。apt update -y && apt upgrade -y #更新升级更新升级之后要安装一个叫 git 的安装包apt install git -y然后我们就开始//这里的话建议把手机放到路由器旁边,保持网络的优良。或者科学上网。//git clone https://github.com/gushmazuko/metaspl_termux安装metasploit

推荐文章

热门文章

相关标签