移动端缩放解决方案 hammerjs

时间: 2019-05-30阅读: 2005标签: 移动端

本方案适合各种前端成熟框架,以 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);
  }

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3484

rem.js的用法及在浏览器端的适配

更新换代快的大前提下自然又涌现出了适配问题,主流解决方案有很多,如响应式布局、cover布局、container布局 这几种布局在大多数情况下不限制高度的页面下还是相当有用的

解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案

移动端点透现象的解决办法:解决方案一:来得很直接github上有个fastclick可以完美解决;解决方案二:用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生;解决方案三:延迟一定的时间(300ms+)来处理事件...

h5 与原生 app 交互的原理

现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。

移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置

方案一:使用lib-flexible包:使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包;方案二:使用less或者sass等CSS 预处理语言写适配方案:基准按照设计图尺寸,但是缺点是不通用,不同页面可能设计图基准尺寸不同

移动端H5页面阻止图片和文字被选中

阻止span标签等文字被选中;阻止浏览器点击图片查看的行为(常见于uc浏览器)1.背景图的方式插入(这种是比较普遍的方式),2.使用js事件阻止默认行为的方法

vue中的适配:px2rem

这应该是vue项目在适配移动端时候,最简单的方法之一。下载并引入lib-flexible,引入px2rem-loader,将px2rem-loader添加到cssLoaders,完了就可以直接用px做单位按照750的设计稿撸代码了。

移动端300ms延迟的解决方法

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。

移动端H5页面开发坑点指南

在平时的H5移动端开发时,我们难免会遇到各种各样的坑点,这篇文章就带着大家来看看怎么解决,文章较长,建议收藏方便以后查阅!canvas在retina屏模糊只需要将画笔根据像素比缩放即可

移动端双指缩放图片JS事件的实践心得

页面整体缩放行为是可以通过按住Shift键+页面左键模拟的,但是,实际上,还是一个触摸点,因此无法模拟双指缩放行为。除非是有触摸板,或者屏幕就是触摸屏。

移动web问题小结

本文主要收集一些移动web开发中常见的问题和解决办法,在日常的工作中遇到新的问题会不定时更新到文章中。屏蔽阴影、Meta标签、获取滚动条的值、禁止选择文本、css之border-box、Retina屏幕高清图片、html5重力感应事件、移动端touch事件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广