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

最近项目中需要做电子地图,向百度地图那样的,在网上搜到了一片很有启发性的文章,收藏之~~

转自:http://www.2cto.com/kf/201301/184066.html

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

当然,上面的只是我的初步设想,在实现过程中就出问题了,下面我把自己遇到的困难和解决方法说一下,由于这是公司项目,涉及到知识产权和保密问题,我就只说思想,不给代码,代码就自己写吧。
问题一:鼠标滑轮时间的多浏览器支持问题。
浏览器判断鼠标滑轮的滚动是通过鼠标滑轮滚动时传递的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事件的触发中分别获得坐标,经过计算后移动设置视区的相应坐标就可以了,这篇文章只是提供一个思想,也是我工作的一个备忘吧。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值