本文共 32823 字，大约阅读时间需要 109 分钟。

在做webapp时候，遇到一个需要做双指放大的功能，需求是：一张带有坐标的图片上有固定的点，需要点击这些坐标上的点进入相应的商品，并且需要对这一块进行双指可以缩放，双击缩放；

一开始是自己写监听touch事件进行处理，但是再缩放的时候，偶尔出现卡顿闪烁，用户体验不很好，后来采用插件

pinch-zoom GitHub地址： 

所以就简单写了一个demo；用于测试一下，顺便练习一下；

需要使用的图片 图片w:800px,h:560px;

图上红块为点击点，固定坐标，使用插件，方便处就是不用处理定位的块；它会随着缩放自动变换，这样就可以绑定事件进行一系列的操作；

事件点击后

附上

pinch-zoom.umd.js

(function (global, factory) {    if (typeof define === "function" && define.amd) {        define(['exports'], factory);    } else if (typeof exports !== "undefined") {        factory(exports);    } else {        var mod = {            exports: {}        };        factory(mod.exports);        global.PinchZoom = mod.exports;    }})(this, function (exports) {    'use strict';    Object.defineProperty(exports, "__esModule", {        value: true    });    /*            PinchZoom.js        Copyright (c) Manuel Stofer 2013 - today            Author: Manuel Stofer (mst@rtp.ch)        Version: 2.2.0            Permission is hereby granted, free of charge, to any person obtaining a copy        of this software and associated documentation files (the "Software"), to deal        in the Software without restriction, including without limitation the rights        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell        copies of the Software, and to permit persons to whom the Software is        furnished to do so, subject to the following conditions:            The above copyright notice and this permission notice shall be included in        all copies or substantial portions of the Software.            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN        THE SOFTWARE.        */    // polyfills    if (typeof Object.assign != 'function') {        // Must be writable: true, enumerable: false, configurable: true        Object.defineProperty(Object, "assign", {            value: function assign(target, varArgs) {                // .length of function is 2                if (target == null) {                    // TypeError if undefined or null                    throw new TypeError('Cannot convert undefined or null to