1.18.3支持全平台所有设备的图片缩放
krpano1.18.3解决了图片手势缩放在安卓手机系统不正常的问题。现在，使用1.18.3以上的用户可以正常在电脑上通过鼠标滚轮、在手机、平板（ios、android以及windows系统）手势实现图片放大缩小。
在下载包中的地址是：
\1.18.4\krpano-1.18.4\examples\xml-usage\image-mwheel-touch-zooming
在线演示
完全代码解析
|
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 44 45 46 47 48 49 50 51 52 |
<krpano> <preview type="grid(cube,64,64,512,0xCCCCCC,0xF6F6F6,0x999999);" /> <!-- 图片 --> <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();" /> <!-- 针对鼠标滚轮缩放的事件 --> <events name="image_zoom_events" 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> </krpano> |
首先我们必须有一个layer元素，定义用来进行缩放的图片，这个layer有几个重要的事件，一个是鼠标的onover，一个是鼠标onout，是对鼠标悬停和离开两个重要事件的检测，对应触屏设备的两个属性就是onup.touch以及ondown.touch，在这里，onover中的action 是当鼠标悬停在图片上方时停止鼠标滚轮缩放全景的视角，同时将鼠标滚轮缩放灵敏度记录在一个变量copy_mousefovchange中，并且设置iszoom以及startzoom为true。而在onout中，则将保存好的灵敏度赋值回系统属性。
那么判断鼠标滚轮的事件是event元素中的onmousewheel，这里我们设定了当检测到鼠标滚轮缩放 时，执行image_onmousewheel()这个action。
在这个action里，通过if判断是否为触屏设备，分为触屏缩放和滚轮缩放，krpano提供了一个可供读取的变量wheeldelta_touchscale，来判断当前是通过滚轮缩放还是触屏手势缩放，当支持触屏手势缩放时，这个值必然大于0，所有不支持触屏缩放的设备都是为0。需要将初始的wheeldelta_touchscale记录在一个变量start_wheeldelta_touchscale，然后在手势缩放时通过获取实时的wheeldelta_touchscale与初始的start_wheeldelta_touchscale的比值（div action），这个比值可能是小于1大于0，或者大于1，从而再与scale相乘（mul action）。
鼠标滚轮缩放则简单一些，首先因为鼠标滚轮的wheeldelta比较大，需要乘以0.05，得到相对较小的数值。同时按照scale这个数值等比例累加在scale上面从而获得新的scale。注意在这里wheeldelta可以是负值。
但我们注意到在官方的案例中，是无限缩放的，也就是没有对最大值和最小值的一个限定。我们在移花接木时候需要稍作修改。
使用步骤
于首先要在我们需要进行缩放的图片layer标签内加入以下属性的代码（onover、onout、ondown.touch、onup.touch）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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();" |
然后我们在xml空白处加入下面的代码，注意events加入name后，就不会与原先的onmousewheel事件发生冲突。同时，加入了对缩放时最大值和最小值的限制。这里是最大值不超过1，最小值不小于0.1，可以自行进行修改.
|
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 |
<!--针对鼠标滚轮缩放的事件 --> <events name="image_zoom_events" onmousewheel="image_onmousewheel();" /> <!-- 通过手势或鼠标滚轮实现图片缩放 --> <action name="image_onmousewheel"> if(iszoom, if(wheeldelta_touchscale GT 0, <!-- touch zoom --> 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); if(layer[image].scale GT 1,set(layer[image].scale,1) if(layer[image].scale LT 0.1,set(layer[image].scale,0.1)); , <!-- mouse wheel zoom --> mul(sit,get(wheeldelta),0.05); mul(sit,layer[image].scale); add(layer[image].scale,sit); if(layer[image].scale GT 1,set(layer[image].scale,1)); if(layer[image].scale LT 0.1,set(layer[image].scale,0.1));) ;); </action> |
1.19也能用吗