让图片(layer)支持鼠标滚轮缩放和手势缩放

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

在线演示

 

完全代码解析

 

首先我们必须有一个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)。

然后我们在xml空白处加入下面的代码,注意events加入name后,就不会与原先的onmousewheel事件发生冲突。同时,加入了对缩放时最大值和最小值的限制。这里是最大值不超过1,最小值不小于0.1,可以自行进行修改.

 

 

在 “让图片(layer)支持鼠标滚轮缩放和手势缩放” 上有 1 条评论

发表评论