微信小程序movable-view移动图片和双指缩放

先从movable-view开始说起吧. movable-view是微信小程序自定义的组件.其描述为:”可移动的视图容器，在页面中可以拖拽滑动”.

值得注意的是文档中有一段备注: “当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）”. 也就是说父容器movable-area是可以比子容器movable-view小的,但是子容器的移动范围必须包括父容器.

先看官方实例代码:

 1 <view class="section">
 2   <view class="section__title">movable-view区域小于movable-areaview>
 3   <movable-area style="height: 200px;width: 200px;background: red;">
 4     <movable-view style="height: 50px; width: 50px; background: blue;" x="{
   {x}}" y="{
   {y}}" direction="all">
 5     movable-view>
 6   movable-area>
 7   <view class="btn-area">
 8     <button size="mini" bindtap="tap">click me to move to (30px, 30px)button>
 9   view>
10   <view class="section__title">movable-view区域大于movable-areaview>
11   <movable-area style="height: 100px;width: 100px;background: red;" direction="all">
12     <movable-view style="height: 200px; width: 200px; background: blue;">
13     movable-view>
14   movable-area>
15 view>

这里面有个错误,应该是编写人的一点小失误吧. 第二个movable-area的属性direction应该写在movable-view上.

1  "height: 100px;width: 100px;background: red;" >
2     view style="height: 200px; width: 200px; background: blue;" direction="all">
3     view>
4   

看下效果:

1) 当movable-view区域小于movable-area时,子容器movable-view只能在父容器内移动. 下图的效果是设置了属性 out-of-bounds=”true”的效果. out-of-bounds可以染子容器到达父容器边界时有个超出边界然后回弹的动画. 并不是真正能让子容器移动到父容器以外.

2) 当movable-view区域大于movable-area时,子容器移动的范围必须包括父容器.

第二种情况中,把父容器看做手机屏幕可视区域,子容器看做要查看的长图,大图. 就可以实现拖动查看图片的效果. 如果图片时动态加载的,不是固定的图片,就要兼容图片宽高小于屏幕可视宽高和图片宽高大于可视屏幕宽高的可能性,也就是要考虑到以上两种情况.

我们要在movable组件加载的同时设置好movable-view的宽高,因为movable组件加载成功后再去改变movable-view的大小,可移动区域是不会变的. 我们可以通过页面中要查看的图片的onload事件中获取图片宽高(目前我只发现bindload事件能获取到图片宽高),然后存储起来imgWidth和imgHeight. 当用户点击图片时,在bindtap事件中设置好movable-view的宽高,同时将movable-area