[摘要]新版软件中默认提供了图片滚轮缩放和手势缩放的方法。然而滚轮缩放领主很早就实现了，详见插件栏目，我们调用的代码相对简洁。但在使用上官方同时支持手势缩放，这点比较方便，领主觉得感觉手势缩放还是和html5有些差异，有点不够平顺。
代码说明
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!-- 需要缩放的layer，需要插入onover\onout\ondown.touch\onup.touch四个属性值，全部复制到layer即可 --> <layer name="image" url="image1.jpg" scale="1.0" align="center" edge="center" onover=" set(iszoom, true); set(startzoom, true); copy(copy_mousefovchange, control.mousefovchange); copy(copy_touchzoom, control.touchzoom); set(control.mousefovchange, 0); set(control.touchzoom, false); " onout=" set(iszoom, false); copy(control.mousefovchange, copy_mousefovchange); copy(control.touchzoom, copy_touchzoom); " ondown.touch="onover();" onup.touch="onout();" /> <!-- onmousewheel属性调用image_onmousewheel()，这样才可以实现鼠标滚轮或手势缩放监听 --> <events name="image_zoom_events" onmousewheel="image_onmousewheel();" /> <!-- image_onmousewheel动作实现图片缩放 --> <action name="image_onmousewheel"> if(iszoom, if(wheeldelta_touchscale GT 0, <!-- 触屏缩放 --> if(startzoom, set(startzoom,false); copy(start_wheeldelta_touchscale, wheeldelta_touchscale); copy(start_imagescale, layer[image].scale); ); div(tmp, wheeldelta_touchscale, start_wheeldelta_touchscale); mul(layer[image].scale, start_imagescale, tmp); , <!-- 鼠标滚轮缩放 --> mul(sit,get(wheeldelta),0.05); mul(sit,layer[image].scale); add(layer[image].scale,sit); ); ); </action> |
下载地址
