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

最新推荐文章于 2021-06-04 08:24:28 发布

CN-cheng

最新推荐文章于 2021-06-04 08:24:28 发布

阅读量4.3k

点赞数 4

分类专栏：小玩意经验小效果 vue 文章标签： vue 图片手势缩放图片手势移动图片手势放大图片手势缩小

本文链接：https://blog.csdn.net/github_37125043/article/details/84378838

版权

小玩意同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

小效果

14 篇文章 0 订阅

订阅专栏

经验

11 篇文章 0 订阅

订阅专栏

我写博客一般都是把在项目中遇到的一些问题记录下来，可以在以后遇到类似问题或者有新的思路时来回顾。
前两天就遇到一个需求：在手机端，把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++;
                // 双击时放大50
                let 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来写的，但是想分离成传统方法还是比较简单的，所有我就没有更改。

CN-cheng

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
23
评论
手势放大、缩小和移动图片

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

扫一扫