手势放大、缩小和移动图片

我写博客一般都是把在项目中遇到的一些问题记录下来，可以在以后遇到类似问题或者有新的思路时来回顾。
前两天就遇到一个需求：在手机端，把html页面的图片内容放大和缩小、移动位置。花了我一天时间才做好，本来是自己先画逻辑草图和整理思路，做着做着发现有个别细节不对，所以走了一些弯路。现在把代码直接贴出来，功能和效果比较简陋，后面会继续完善，如果有疑问或建议可以留言，3Q。

功能：双击图片放大，单点触摸图片移动，双点触摸图片缩小、放大

利用touch事件来绑定触摸开始（touchstart）、触摸移动（touchmove）、触摸结束（touchend）。
event.touches获取触摸点有几个，event.touches[0].target获取触摸的对象。

2019-7-10 更新：改为组件形式

代码

<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta name="renderer" content="webkit"><meta http-equiv="Expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><title>图片缩放</title><script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script><style>.img-div {position: relative;}.big_img {position: absolute;max-width: 200%;-webkit-transition: all 0s ease;-moz-transition: all 0s ease;-ms-transition: all 0s ease;-o-transition: all 0s ease;transition: all 0s ease;}</style>
</head>
<body class="bg-white">
<div id="app"><div v-cloak><div class="big_img_div"><my-component v-bind:img_src="big_img_src"></my-component><my-component v-bind:img_src="big_img_src"></my-component></div></div>
</div>
<script>Vue.component('my-component', {template: `<div class="img-div"><img :src="img_src" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" class="big_img" alt=""></div>`,props: ['img_src'],data () {return {start: {x: 0,y: 0},move: {x: 0,y: 0},scaleStart: {x0: 0,y0: 0,x1: 0,y1: 0},scaleMove: {x0: 0,y0: 0,x1: 0,y1: 0},touchTimes: 0}},mounted: function () {document.body.style.overflow = 'hidden';document.body.style.webkitOverflowScrolling = 'none';},methods: {touchstart: function (e) {let event = window.event || e;let _this = this;this.touchTimes++;// 双击时放大50let timesFun = setTimeout(function () {// 如果大于1，说明是双击图片if (_this.touchTimes > 1) {event.touches[0].target.width += 50;}// 清除定时clearInterval(timesFun);_this.touchTimes = 0;}, 300);// 初始多个触摸位置（进行放大缩小）if (event.touches.length > 1) {this.scaleStart = {x0: event.touches[0].clientX,y0: event.touches[0].clientY,x1: event.touches[1].clientX,y1: event.touches[1].clientY};} else if (event.touches.length === 1) {// 初始单个触摸位置this.start = {x: event.touches[0].clientX,y: event.touches[0].clientY};}},touchmove: function (e) {this.touchTimes = 0;let event = window.event || e;// 如果是1个触摸点，只计算上下左右移动if (event.touches.length === 1) {this.move.x += event.touches[0].clientX - this.start.x;this.move.y += event.touches[0].clientY - this.start.y;event.touches[0].target.style.transform = `translate3d(${this.move.x}px, ${this.move.y}px, 0px) translateZ(0px)`;this.start = {x: event.touches[0].clientX,y: event.touches[0].clientY};} else if (event.touches.length === 2) { // 如果是2个触摸点，计算放大还是缩小// 触摸移动位置this.scaleMove = {x0: event.touches[0].pageX,y0: event.touches[0].pageY,x1: event.touches[1].pageX,y1: event.touches[1].pageY};/** 计算触摸点差值* */// 初始2个触摸点const diffXInit = Math.abs(this.scaleStart.x0 - this.scaleStart.x1);const diffYInit = Math.abs(this.scaleStart.y0 - this.scaleStart.y1);const diffX = Math.abs(this.scaleMove.x0 - this.scaleMove.x1);const diffY = Math.abs(this.scaleMove.y0 - this.scaleMove.y1);/** 判断是左右、还是上下滑动来放大缩小* */// 左右移动触摸if (Math.abs(this.scaleStart.x0 - this.scaleMove.x0) > Math.abs(this.scaleStart.y0 - this.scaleMove.y0)) {// 比较touch开始与移动时的差，计算出是缩小还是放大if (diffX > diffXInit) { // 放大event.touches[0].target.width += Math.abs(diffXInit - diffX);console.log('左右放大');} else { // 缩小event.touches[0].target.width -= Math.abs(diffXInit - diffX);console.log('左右缩小');}} else { // 上下移动触摸// 比较触摸开始与移动时的差，计算出是缩小还是放大if (diffY > diffYInit) { // 放大event.touches[0].target.width += Math.abs(diffYInit - diffY);console.log('上下放大');} else { // 缩小event.touches[0].target.width -= Math.abs(diffYInit - diffY);console.log('上下缩小');}}// 重置触摸位置this.scaleStart = {x0: event.touches[0].clientX,y0: event.touches[0].clientY,x1: event.touches[1].clientX,y1: event.touches[1].clientY};}},touchend: function (e) {let event = window.event || e;// 如果触摸点变为1个时（就像2个触摸点，松开了1个），重置初始触摸点if (event.touches.length > 0) {this.start = {x: event.touches[0].clientX,y: event.touches[0].clientY};}}},});var app = new Vue({el : '#app',data () {return {big_img_src: 'https://eslint.org/img/logo.svg',};}});
</script>
</body>
</html>

注：虽然是用vue来写的，但是想分离成传统方法还是比较简单的，所有我就没有更改。

手势放大、缩小和移动图片相关推荐

android+放大缩小图片+有jar嘛,Android相册支持点击放大图片，滑动切换图片，手势放大缩小...
[实例简介] 项目使用了开源框架Universal-Image-Loader 显示本地图库所有照片点击放大,单击退出双击放大缩小支持左右滑动查看图片支持手势放大缩小图片 [实例截图] [核心代 ...
android 手势放缩_手把手教你打造支持手势放大缩小的ImageView
写在前面最近有了新的任务,学习的时间比以前少了不少,Java回炉的文估计是得缓缓了,不过每周一篇尽量保质保量.最近感觉我文写的有点不好,因为我写东西除非必要,不然概念性的东西我基本上都是一笔带过-- ...
js实现移动端手势放大缩小图片
//手势事件 var touchScale = function() {var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWid ...
图片随手势放大缩小功能
主界面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...
Android imageview 双击放大缩小手势放大缩小自由滑动
public class ZoomImageView extends ImageView implements ViewTreeObserver.OnGlobalLayoutListener {pri ...
华为AR-Engine集成设置手势放大缩小旋转
前段时间项目中想要实现AR功能,用于室内物品摆放,看了几个第三方sdk发现回复的都非常慢,所以就想自己试下水,特此记录一下. 自己分别集成了谷歌ARCore和华为的AR-Engine,不过发现都没有特 ...
Css+Jquery实现点击图片放大缩小预览图片预览查看大图
要求点击一张图片,图片就会放大,查看大图,点击空白处就会隐藏大图,回到缩略图. 技术要点主要是Jquery进行元素的显示与隐藏. 代码 <!DOCTYPE html> <html ...
html 图片滚动放大缩小,js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. ...
Android 高仿微信朋友圈动态，支持双击手势放大并滑动查看图片。
转载请注明出处: http://blog.csdn.net/sk719887916/article/details/40348873 作者skay: 最近参与了开发一款旅行APP,其中包含实时聊天和动 ...
关于viewer.js插件js版鼠标滚动事件放大缩小改为图片移动
主要是为了记录下需求中解决问题的思路,本人前端相当糟糕. 问题的产生是由于图片太长,页面一次性展示不全,业务人员提出修改前端图片显示中的鼠标滚动改为上下移动.由于项目中图片展示使用的是viewer,j ...

手势放大、缩小和移动图片

代码

手势放大、缩小和移动图片相关推荐

最新文章

热门文章