微信小程序 图片缩放

在图片浏览的时候，一个很重要的操作就是两个手指一起在图上捏捏捏，缩放嘛。我天真的以为这个应该和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(){
// 页面关闭

}
})