在网页上如何实现图形的缩放和平移

snoweagle 2006-02-23 09:56:40

这段时间浏览了城市地图的相关页面,想自己试着做一下,不知道怎么做,请各位大侠赐教

...全文

637 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

snoweagle 2006-03-03

打赏
举报

补充:
如何实现框选放大?

aafly 2006-03-02

打赏
举报

mark

snoweagle 2006-03-02

打赏
举报

如果三天内大家还没有什么更好的方法,我将结贴.谢谢大家的参与!

snoweagle 2006-02-28

打赏
举报

大家还有更好的方法吗？

dcstudio 2006-02-27

打赏
举报

学习!

snoweagle 2006-02-27

打赏
举报

按照snoweagle出示的源码运行,会有以下几个问题
1.平移的时候,滚动条不会跟着图形的移动而变化
2.图形在平移到最底部的时候,再进行缩放时,图形的上部分会不论怎么平移都显示不出来,好像图形的上部分丢失了,而图形的下部分则加长了一部分空白
还请大家帮忙解决!!

baiyun210 2006-02-27

打赏
举报

路过还没实践值得收藏！！！

snoweagle 2006-02-27

打赏
举报

今天又找到一个网址,里面也有图形缩放的处理,效果还不错
http://www.devdao.com/article/302642.html
不过,我还是想看看大家可还有更高效的方法

snoweagle 2006-02-27

打赏
举报

Google地图的源码,好!,以前看过这个效果,但是不知道怎么弄的,没想到仁兄能找到它的源码.这真是意外收获.

menuvb 2006-02-27

打赏
举报

http://www.codeproject.com/aspnet/LatLaysFlat-Part1.asp

看看这个效果。类似于GOOGLE MAP的

BeRush 2006-02-27

打赏
举报

最好要有webGis平台支持。
参看一下，http://www.everywhere.com.cn/map

snoweagle 2006-02-24

打赏
举报

还有更简单的方式?
无限期待……

theodiact 2006-02-23

打赏
举报

缩放这个还没有想好，但是平移还是有点方法的。事先把要显示面积9倍的图片装载到页面，然后把多余的部分隐藏起来，然后当客户端拖拽时，使用ajax在后台继续加载，显示。据说googlemap就是这么做的吧？：）

perilla 2006-02-23

打赏
举报

好象还有更简单的方式实现图片缩放

snoweagle 2006-02-23

打赏
举报

还有平移的时候，滚动条怎么不跟着动？不知道能不能解决

snoweagle 2006-02-23

打赏
举报

这样就实现了图形的缩放和平移了．但效率不怎么高，发出来让你看看，不知能否对它进行优化和美化一下．谢谢

snoweagle 2006-02-23

打赏
举报

<HTML>
<HEAD>
<title>平移图片</title>
<style type="text/css">
.drag{position:relative;cursor:hand}
</style>
<script language="javascript">

var dragapproved = false;
var z,x,y

function zoomimg(img)
{
//img.style.zoom获取img对象的缩放比例，并转为十进制整数
var zoom = parseInt(img.style.zoom,10);
if (isNaN(zoom))
{ //当zoom非数字时zoom默认为100％
zoom = 100;
}
//event.wheelDelta滚轮移动量上移＋120，下移－120；显示比例每次增减10％
zoom += event.wheelDelta / 12;
//当zoom大于10％时重新设置显示比例
if (zoom>10) img.style.zoom = zoom + "%";
}

function move()
{
if(event.button==1&&dragapproved)
{
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop = temp2+event.clientY-y
return false;
}
}

function drags()
{
if(!document.all) return
if(event.srcElement.className=="drag")
{
dragapproved = true
z=event.srcElement;
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}

document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
</HEAD>
<body>
<IMG class="drag" alt="Image" src="Date/c.jpg" onmousewheel="zoomimg(this)" border="0">
</body>
</HTML>

perilla 2006-02-23

打赏
举报

平移图片
<html>
<head>
<style type="text/css">
.drag{position:relative;cursor:hand}
</style>
<script language="javascript">
var dragapproved = false;
var z,x,y
function move()
{
if(event.button==1&&dragapproved)
{
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop = temp2+event.clientY-y
return false;
}
}
function drags()
{
if(!document.all)
return
if(event.srcElement.className=="drag")
{
dragapproved = true
z=event.srcElement;
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
</head>
<body>
<img src="Date/c.jpg" class="drag" border="0" alt="Image">
</body>
</html>

snoweagle 2006-02-23