图片查看器一般在电脑上比较多见,一般可以放大,缩小,旋转,翻转图片等,高级功能如涂鸦等,我们今天来试着做一个简单的web版图片查看器,可以放大,缩小,旋转,翻转等功能。这时候肯定有小伙伴说了,这些功能不是很简单吗?还用得着你在这说?对,如果是给你一个按钮让你缩放肯定简单,因为这里都是配合事件一起做的,特别是移动端,更是涉及到多指缩放问题,因此还是有必要讲一讲。好了,先来看看最终实现的效果:

图片查看器&多指缩放 gif 图片查看器&多指缩放

上面demo实现的功能有:移动,缩放,旋转,翻转(水平,垂直),全屏。其中的缩放,在电脑上体现为滚轮是缩放(mousewheel事件),在手机上体现为两指缩放。大家可以先感受一下。

功能讲解

移动其实大家多多少少都了解过,主要是利用mousedown,mousemove,mouseup结合来做,当然了,在手机端,就是touchstart,touchemove,touchend三者来结合。

background Layer 1 A_1(left,top) Mouse_1(x1,y1) Mouse_2(x2,y2) 鼠标在矩形上从Mouse_1,移动到了Mouse_2,现在矩形的左上角A_2应该为多少? 我们只需要关注鼠标的位置(Mouse)即可, 因为矩形的左上角(A_1)和鼠标开始点击的位置(Mouse_1)的偏移是固定的 水平偏移量为dx=left-x1,垂直偏移量为dy=top-y1 A_1(left,top) Mouse_1(x1,y1) Mouse_2(x2,y2) dx dy 不管鼠标移到哪里,矩形的左上角永远和鼠标位置保持着dx,dy的偏移量 因此A_2的横坐标为x2+(left-x1),纵坐标为y2+(top-y1)

上面描述了移动的核心思想,上图中的Mouse_1就是在mousedown(touchstart)的时候纪录的,当mousemove(touchmove)的时候,得到的是Mouse_2这个点,然后将Mouse_2变成Mouse_1继续计算。

旋转就比较简单了,主要就是transform:rotate(90deg)之类的就可以完成啦。

翻转图片的话,有两种方式可以反转图片,一种是利用scale(-1,1)翻转,scale一般是缩放图片的,但是如果是负数的话,就可以造成翻转的现象,当然,这种的话,属于hack,因为各个浏览器不一定都是这样处理,除此之外,还可以利用rotateY(180deg),不过这个时候你需要开启透视属性。

缩放的话呢,主要是在pc和手机上的事件不同,pc上利用mousewheel(DOMMouseScroll是针对ff的滚动事件),手机上则还是利用mousemove事件。

pc上的话,主要是要考虑兼容性,因为mousewheel事件和DOMMouseScroll的事件中移动量对应的字段是不同的,而且意思就相反的,但是稍加了解,还是搞的定的,关键代码如下:

这里的参数都是凭感觉调的,如果你觉得快了或者慢了都是可以自己看着调的。

这里主要讲一下两个指头缩放的问题,其实不了解的人肯定觉得这个很高深,可是一旦你了解就会发现好简单。

background Layer 1 p1_S p2_S p2_E p1_E 一个矩形上有两个点p1_S和p2_S,然后这两个点移开了,变成p1_E,p2_E,那么放大了多少呢? 我们只要拿两个点之间的距离作为放大的指标就好了 p1_S p2_S p2_E p1_E d1 d2 移动前,p1_S和p2_S的距离是d1,移动后p1_E和p2_E的距离是d2 缩放的倍数就是(d2/d1)*k,k是自己设置的,可以控制缩放的幅度

上图就是两指缩放的核心思想,在touch系列事件中,有一个touches纪录这是几个接触点,如果是两指的话,touches为2,此时我们可以令touches[0]为p1,touches[1]为p2。同样我们在touchstart的时候纪录p1_S,p2_S,在touchomove的时候获得p1_E,p2_E,然后再令p1_E为p1_S,p2_E为p2_S,继续计算。

上面需要注意的就是,因为在现实中,并不一定都是两个手指同时触碰到屏幕,可能会有几毫秒的误差,因此,我们在做两指缩放的时候一定要给一个时间去容错两个手指的误差。

最后就是全屏了,全屏这个比较简单,而且相对固定,一个方法就搞定,关键代码如下:

将你需要全屏的元素传进去即可。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字