首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 平面设计 > 图形图像 >

如何在网页中通过JAVAscript控制SVG图像放大缩小

2013-01-23 
怎么在网页中通过JAVAscript控制SVG图像放大缩小 首先先说明一下我想做出的网页效果,基本上和地图一样,将

怎么在网页中通过JAVAscript控制SVG图像放大缩小

 

首先先说明一下我想做出的网页效果,基本上和地图一样,将鼠标放在图像上之后,滚动鼠标滑轮可以实现图片放大和缩小,按下鼠标后移动鼠标可以实现图像的移动,具体效果去百度(谷歌)地图体验一下就知道了。

当然,上面的只是我的初步设想,在实现过程中就出问题了,下面我把自己遇到的困难和解决方法说一下,由于这是公司项目,涉及到知识产权和保密问题,我就只说思想,不给代码,代码就自己写吧。

问题一:鼠标滑轮时间的多浏览器支持问题。

浏览器判断鼠标滑轮的滚动是通过鼠标滑轮滚动时传递的delta值来判断的:在IE内核的浏览器中,delta取值是正负120,非IE内核的浏览器中的取值是正负3。并且,在不同的浏览器中,滑轮触发事件的执行次数是不一样的:在IE内核的浏览器中,滑轮每滚动一次,绑定的事件就会触发两次;非IE内核浏览器中,滑轮每滚动一次,事件只触发一次,当然,这才是我们想要的效果。

解决方法:使用jquery的mousewheel插件,完美地解决了鼠标滑轮事件的多浏览器支持问题。

问题二:把svg图像放到网页上的一个div元素里面之后(使用embed标签,假设设置的图像大小和div的大小相同),那么svg图像就会屏蔽掉div的mousedown、mousemove、mouseup事件,这样就不能实现图像的移动了。这个问题纠结了我好久,一直都没想到解决办法,网上也没有找到, 我才想到写出来以后有人用的话可以直接看。

解决方法:新建一个div,设置position属性为absolute,将这个div覆盖到放置svg图像的div上面,将mousedown、mousemove、mouseup事件绑定到这个div上(其实这个问题很好解决的,我也不知道怎么回事,当初居然没想到)。

问题三:如何实现用javascript对svg图像的控制。

公司的要求是直接引用一个已经存在的svg图像,也就是说,不能改动svg图像的任何东西,这样就不能使用网上一些通过对transform、g标签的修改来实现对svg的控制了,好在我找到了一篇经典svg教程,这篇文章详细地说明了怎么在网页中通过javascript控制图像的方法,虽然例子跟我的这个项目没关系,但是思想绝对是正确的,如果想看这篇文章的话,直接搜“经典svg教程”,我是在百度文库下载的,同时我也传到csdn上了,如果要下载的话认准作者AndrewWatt(我是看的这个,其他的不知道)。

这样,基本上难题都已经解决了,至于移动问题,在mousedown、mousemove、mouseup事件的触发中分别获得坐标,经过计算后移动设置视区的相应坐标就可以了,这篇文章只是提供一个思想,也是我工作的一个备忘吧。

热点排行