最近开发一个活动需要在手机上给上传的头像加上边框、装饰,需要拖拽、手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放,果断放弃,最后选用了腾讯的AlloyTeam团队的开源的手势库AlloyFinger,闲话少说直接上代码

1、下载

npm install alloyfinger

  

2、main.js全局配置

import AlloyFinger from 'alloyfinger'
import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue' Vue.use(AlloyFingerPlugin,{
AlloyFinger
})

  

3、组件内使用

<div v-finger:pinch="pinchHandler"
v-finger:press-move="pressMoveHandler"
v-finger:multipoint-start="multipointStartHandler"
v-finger:rotate="rotateHandler"
v-finger:tap="tapHandler"
v-finger:multipoint-end="multipointEndHandler"
v-finger:double-tap="doubleTapHandler"
v-finger:long-tap="longTapHandler"
v-finger:swipe="swipeHandler"
v-finger:single-tap="singleTapHandler"> //滑动的有效区域
</div>

  

        pointStartHandler() {
//手指触摸屏幕触发
},
multipointStartHandler() {
//一个手指以上触摸屏幕触发
},
rotateHandler(evt) {
//evt.angle代表两个手指旋转的角度
console.log(evt.angle);
},
pinchHandler(evt) {
//evt.scale代表两个手指缩放的比例
console.log(evt.scale);
},
multipointEndHandler() {
//当手指离开,屏幕只剩一个手指或零个手指触发
},
pressMoveHandler(evt) {
//evt.deltaX和evtdeltaY代表在屏幕上移动的距离
console.log(evt.deltaX);
console.log(evt.deltaY);
},
tapHandler(evt) {
//点按触发
},
doubleTapHandler(evt) {
//双击屏幕触发
},
longTapHandler(evt) {
//长按屏幕750ms触发
},
swipeHandler(evt) {
//evt.direction代表滑动的方向
console.log("swipe" + evt.direction);
},
singleTapHandler(evt) {
//单击
}

  

ps:拖动对于移动端兼容不是太理想,正在优化中~

vue在移动端使用alloyfinger手势库操作图片拖拽、缩放的更多相关文章

  1. Vue富文本编辑器(图片拖拽缩放)

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  2. php课程 8-32 如何使用gd库进行图片裁剪和缩放

    php课程 8-32 如何使用gd库进行图片裁剪和缩放 一.总结 一句话总结:图片缩放到图片裁剪就是改变原图截取的位置以及截取的宽高. 1.电商网站那么多的图片,如果全部加载卡得慢的很,所以他们是怎么 ...

  3. vue 图片拖拽和滚轮缩放

    这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动@mousewheel.prevent 阻止默认行为 <div ref="imgWrap& ...

  4. JS案例 - 基于vue的移动端长按手势

    ================================惯例碎碎念前言================================ 当时首先想到要做长按事件的时候,我想到的是vue内部的自 ...

  5. vue实现拖拽排序

    基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...

  6. linux chromuim安装常用插件(flash,手势,拖拽,广告屏蔽)

    1.本机kali2.0  64位,kali基于Debian.文章所用的所有插件请到http://files.cnblogs.com/files/yuuyuu/chromium_plugins.tar. ...

  7. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  8. 超小Web手势库AlloyFinger原理

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

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

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

随机推荐

  1. CPU 底层运算之乘法运算

    CPU 运算加减法运算 假设计算  3+3  原码是0011 * 0011(以4位存贮单元,因为是原码,最高位不代表符号位) 1. 首先 判断 两个加数是否有 负数(减法)  如果有 负数 先将负数转 ...

  2. 不可不知的资源管理调度器Hadoop Yarn

    Yarn(Yet Another Resource Negotiator)是一个资源调度平台,负责为运算程序如Spark.MapReduce分配资源和调度,不参与用户程序内部工作.同样是Master/ ...

  3. codevs1298, hdu1392 (凸包模板)

    题意: 求凸包周长. 总结: 测试模板. 代码: #include <iostream> #include <cstdio> #include <cstring> ...

  4. buuctf-misc 菜刀666

    解压出一个666666.pcapng的文件,我们拖进wireshark 因为是菜刀吗?一般都是post连接,于是我们过滤post数据 http.request.method==POST 然后分析流量, ...

  5. 非常全面的讲解SpringCloud中Zuul网关原理及其配置,看它就够了!

    Zuul是spring cloud中的微服务网关.网关:是一个网络整体系统中的前置门户入口.请求首先通过网关,进行路径的路由,定位到具体的服务节点上. Zuul是一个微服务网关,首先是一个微服务.也是 ...

  6. window 属性:自定义元素(custom elements)

      概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...

  7. 4G DTU模块和串口设备连接的方式

    首先说下解决思路: 由于考虑到串口开发很麻烦,所以后来买了一个4g模块的dtu. 所以最后的解决方案是,plc串口设备与dtu相连,由于dtu是透传模式,使用java与4g模块进行通信就完事了. 虽然 ...

  8. 【Java GC系列】垃圾收集简介(1)

    说明: 在本文中, Garbage Collection 翻译为 "垃圾收集", garbage collector 翻译为 "垃圾收集器"; 一般认为, 垃圾 ...

  9. axios网络封装模块

    功能特点 在浏览器中发送XMLHttpRequests请求 在node.js总发送http请求 支持Promise API 拦截请求和相应 转换请求和响应数据 axios请求方式 支持多种请求方式 a ...

  10. EFCore自己用的点东西

    测试一下EF core 的操作 蛀牙总是用导航属性有的时候有点不理解 写个例子给自己用 class Program { static void Main(string[] args) { MyDbCo ...