移动端缩放解决方案 hammerjs

2019独角兽企业重金招聘Python工程师标准>>>

本方案适合各种前端成熟框架
以 ionic3为例子

第一步 安装 hammerjs

npm install hammerjs

第二步 写核心缩放功能

import * as Hammer from 'hammerjs';

// 缩放功能
export class PinchZoom {

  static hammerIt(elmid: string) {

    const elm = document.getElementById(elmid);

    console.log('hammerIt begin elm', elm);
    const hammertime = new Hammer(elm, { touchAction: 'pan-x pan-y' });  // 兼容x轴和y轴方向的滚动


    hammertime.get('pinch').set({
      enable: true
    });

    console.log('hammertime', hammertime);

    let posX = 0,
      posY = 0,
      scale = 1,
      last_scale = 1,
      last_posX = 0,
      last_posY = 0,
      max_pos_x = 0,
      max_pos_y = 0,
      transform = '';
    const el = elm;


    hammertime.on('panleft panright panup pandown tap press pdoubletap pan pinch panend pinchend', function (ev) {

      console.log(ev.type + ' gesture detected.');

      if (ev.type === 'doubletap') {
        transform =
          'translate3d(0, 0, 0) ' +
          'scale3d(2, 2, 1) ';
        scale = 2;
        last_scale = 2;
        try {
          if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() !== 'matrix(1, 0, 0, 1, 0, 0)') {
            transform =
              'translate3d(0, 0, 0) ' +
              'scale3d(1, 1, 1) ';
            scale = 1;
            last_scale = 1;
          }
        } catch (err) { }
        // tslint:disable-next-line: deprecation
        el.style.webkitTransform = transform;
        transform = '';
      }

      // pan
      if (scale !== 1) {
        posX = last_posX + ev.deltaX;
        posY = last_posY + ev.deltaY;
        max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
        max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
        if (posX > max_pos_x) {
          posX = max_pos_x;
        }
        if (posX < -max_pos_x) {
          posX = -max_pos_x;
        }
        if (posY > max_pos_y) {
          posY = max_pos_y;
        }
        if (posY < -max_pos_y) {
          posY = -max_pos_y;
        }
      }


      // pinch
      if (ev.type === 'pinch') {
        scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
      }
      if (ev.type === 'pinchend') { last_scale = scale; }

      // panend
      if (ev.type === 'panend') {
        last_posX = posX < max_pos_x ? posX : max_pos_x;
        last_posY = posY < max_pos_y ? posY : max_pos_y;
      }

      if (scale !== 1) {
        transform =
          'translate3d(' + posX + 'px,' + posY + 'px, 0) ' +
          'scale3d(' + scale + ', ' + scale + ', 1)';
      }

      if (transform) {
        // tslint:disable-next-line: deprecation
        el.style.webkitTransform = transform;
      }
    });
  }
}

第三步 具体使用

// html文件
// 定义个缩放区域

  <div id="pinchzoom">
    <div>
      <img src="你的图片地址" >
    </div>
    <div>放大缩小</div>
  </div>

// ts文件

...
import { PinchZoom } from 'xxxx';   // 引入手写的缩放功能类

...

  // 启动缩放功能
  ngOnInit() {
    const elm = document.getElementById('pinchzoom');
    PinchZoom.hammerIt(elm);
  }

 

本方案参考自 https://stackoverflow.com/questions/18011099/pinch-to-zoom-using-hammer-js

转载于:https://my.oschina.net/lilugirl2005/blog/3055987