• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 图片缩放

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在图片浏览的时候,一个很重要的操作就是两个手指一起在图上捏捏捏,缩放嘛。我天真的以为这个应该和ios一样的,有个scrollview里面放图就好了。我真是图样图森破,不行啊,然后上网找,也没有控件支持。不开森,网上只有大神提供的思路,就是自己做一个手势咯。

那就做吧

首先我们得理解在微信小程序上面这个手势触发有几种。这些个内容在官方文档里的框架 -> 视图层-> WXML -> 事件里可以找到。

我总结事件分两种 一种是冒泡,一种是非冒泡。

冒泡呢,就好比咱们ios里面把按钮加在了可点击的图片之上,点完按钮了,它也能把手势传递给图片,让可点击的图片也能感受到点击。

非冒泡,就是不往上走了,我定死监控哪个控件就是哪个,就是只对这个控件有效,不管你在下面加了多少层。

好了了解这么多该上代码了。如果你有更好的做法,那就教教我吧。

在.wxml层里我只写了一个scrollview,里面套了一个img,一贯做法嘛。

 

<view>
<scroll-view scroll-y="true" scroll-x="true" style="height:100%;width:100%">
<image id = "SFimg" catchtouchend="endtap" catchtouchmove="movetap" bindload = "imgload"
 style="width:{{ scaleWidth }}px;height:{{ scaleHeight }}px" mode="aspectFit" src="{{dataimg}}"></image>
</scroll-view>
</view>


里面这个id我没有用到,就只有这一个嘛,然后写了两个手势,一个是滑动的时候需要放大或者缩小图片的长和宽,一个是当咱们手离开图片的时候,需要将上次滑动的距离弄成0,如果不这样,我们两个手指,戳戳屏幕,那图片就变了呢。

 

我的灵感也是来自于 http://www.jianshu.com/p/16f2b21e78d4 ,大家不明白的可以看这个,里面理论讲的挺详细的,那我就直接上代码吧,里面我改进了一下

 

var olddistance = 0;  //这个是上一次两个手指的距离
var newdistance;      //本次两手指之间的距离,两个一减咱们就知道了滑动了多少,以及放大还是缩小(正负嘛)
var oldscale = 1;     //这个是上一次动作留下的比例
var diffdistance;     //这个是新的比例,新的比例一定是建立在旧的比例上面的,给人一种连续的假象
var baseHeight;       //上一次触摸完之后的高
var baseWidth;        //上一次触摸完之后的宽
var windowWidth = 0;  //咱们屏幕的宽
var windowHeight = 0; //咱们屏幕的高

Page({
  data:{
    scaleWidth:"",
    scaleHeight:"",
    dataimg:"",
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    console.log(options.img)
          var res = wx.getSystemInfoSync();  //获取系统信息的同步方法,我用了异步里面提示我this.setData错了
          windowWidth = res.windowWidth;     
          windowHeight = res.windowHeight;
         //那就给前面的图片进行赋值,高,宽以及路劲 
         this.setData({ 
            scaleHeight:windowHeight,    
            dataimg:options.img,
            scaleWidth:windowWidth 
         })    
  },
  //这里是图片加载完毕之后的信息,因为滑动手指距离会变,我们要跟着图片的长宽进行缩放,不能跟着屏幕的长宽进行缩放
  imgload:function(e){
      var originalWidth = e.detail.width;//图片原始宽
      var originalHeight = e.detail.height;//图片原始高
      var originalScale = originalHeight/originalWidth;//图片高宽比
      var windowscale = windowHeight/windowWidth;//屏幕高宽比
      if(originalScale < windowscale){//图片高宽比小于屏幕高宽比
        //图片缩放后的宽为屏幕宽
          baseWidth = windowWidth;
      
          baseHeight = (windowWidth * originalHeight) / originalWidth;
      }else{//图片高宽比大于屏幕高宽比
        //图片缩放后的高为屏幕高
         baseHeight = windowHeight;
         baseWidth = (windowHeight * originalWidth) / originalHeight;
      }
  },
  //两手指进行拖动了
  movetap:function(event){
     var e = event;
     if(e.touches.length == 2)
     {
       var xMove = e.touches[1].clientX - e.touches[0].clientX;
       var yMove = e.touches[1].clientY - e.touches[0].clientY;
       var distance = Math.sqrt(xMove * xMove + yMove * yMove);//两手指之间的距离 
       if (olddistance == 0)
       {
          olddistance = distance; //要是第一次就给他弄上值,什么都不操作
          console.log(olddistance); 
       }
       else
       {
          newdistance = distance; //第二次就可以计算它们的差值了
          diffdistance = newdistance - olddistance;
          olddistance = newdistance; //计算之后更新
          console.log(diffdistance);
          var newScale = oldscale + 0.005 * diffdistance;  //比例
          console.log(newScale);
          //刷新.wxml
          this.setData({ 
           scaleHeight:newScale * baseHeight, 
           scaleWidth:newScale * baseWidth 
           
          })     
          oldscale = newScale;
          //更新比例

       }
     }
  },
  endtap:function(event){
    console.log(event);//抬起手指,保存下数据
    if(event.touches.length == 2)
    {
      olddistance = 0;
    }

  },
  onReady:function(){
    // 页面渲染完成
    
  },
  onShow:function(){
    // 页面显示
    
  },
  onHide:function(){
    // 页面隐藏
    
  },
  onUnload:function(){
    // 页面关闭
    
  }
})

 

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap