Small micro-channel program to achieve finger zoom picture

The Code

Page ({ 
    Data: { 
        Touch: { 
            Distance: 0 , 
            Scale: . 1 , 
            baseWidth: null , 
            baseHeight: null , 
            ScaleWidth: null , 
            ScaleHeight: null 
        } 
    }, 
    touchstartCallback: function (E) {
         // single-finger zoom start, also no treatment if (e.touches.length == 1) return console.log ( ' two-finger trigger start') 
        //Note touchstartCallback began to really code // At first I did not this callback, there will be reduced when there is an instant when the amplification process of bug // put up two fingers when the distance will be initialized. = e.touches xMove the let [. 1] .clientX - e.touches [0] .clientX; 
        the let yMove e.touches = [. 1] .clientY - e.touches [0 ] .clientY; 
        the let Distance = the Math.sqrt (xMove xMove yMove * + * yMove);
         the this .setData ({
            'touch.distance' : Distance, 
        }) 
    }, 
    touchmoveCallback: function (E) { 
        the let Touch = the this .data.touch
         // single-finger zoom we do nothing if (e.touches.length == 1) return console.log ( ' two finger motion') 
        the let e.touches xMove = [. 1] .clientX - e.touches [0] .clientX; 
        the let yMove = e.touches [. 1] .clientY - e.touches [0 ] .clientY;
         // New Distance = the Math.sqrt the let ditance (+ yMove xMove xMove * * yMove); 
        the let distanceDiff Distance = - touch.distance; 
        the let newScale Inc. = + 0.005 * touch.scale distanceDiff
         // to prevent too large scale, it is necessary to limit the scale, the minimum is the same token IF (newScale Inc.> = 2) { 
            newScale Inc. = 2 
        } 
        IF (newScale Inc. < 0.6 = ) { 
            newScale Inc. = 0.6 
        } 
        the let ScaleWidth = newScale Inc. * touch.baseWidth 
        the let ScaleHeight = newScale Inc. *touch.baseHeight
         // Assignment new => old this.setData ({ 
           'touch.distance' : Distance,
            'touch.scale' : newScale Inc.,
            'touch.scaleWidth' : ScaleWidth,
            'touch.scaleHeight' : ScaleHeight,
            ' touch.diff ' : distanceDiff 
        }) 
    }, 
    bindload: function (E) {
       // bindload the api is api <image> assembly similar <img> onload attribute of this.setData ({ 
          ' touch.baseWidth ' : e.detail .width,
           'touch.baseHeight' : e.detail.height,
           'touch.scaleWidth': e.detail.width,
          'touch.scaleHeight': e.detail.height
      })
    }
})

WXML code is as follows

<view class="container">
    <view bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
        <image src="../../resources/pic/cat.jpg" style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px" bindload="bindload"></image>
    </view>
</view>