2007-04-04

关于map的问题 clip和边界

这2天一直在弄这个map的问题，希望各位给点建议或者意见，帮忙一下~~
1 如何判断当图片移出了蓝色框范围外，使它回到蓝色框内？
也就是说超出边界。回到能显示的范围内。不要让人看见出现白色的底色。
2 如何使图片只显示在可见范围内【即显示层的那个大小】的那部分，我知道用clip ，但是一直没试出来。
(就如maps.baidu.com的那个效果) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Cqupt CM </TITLE>
        <style type="text/css">
            h1 {
                font: 20pt sans-serif;
            }

			/*外部窗口层，用于显示地图。*/
            #outerDiv {
                height: 200px;
                width: 300px;
                border: 1px solid blue;
                position: relative;
                overflow: hidden;	
            }

			/*内部层，用于装载地图图片，图片就放在里面。*/
            #innerDiv {
                position: relative;
                left: 0px;
                top: 0px;
            }
        </style>       
		
		<script type="text/javascript">

		    var dragging = false;   //  是否在拖动标志 false：不是 true ：是
            var top;                     //  内部层的顶部坐标 即Y
            var left;                     //  内部层的左边坐标 即X
            var dragStartTop;        //  拖放开始时的坐标
            var dragStartLeft;       //   拖放结束时的坐标

            function init() {
                // make inner div big enough to display the map
                // 使内部层足够大，可以显示地图
                setInnerDivSize('800px', '700px');

                // 设置监听器 监听事件 
                var outerDiv = document.getElementById("outerDiv");
                
                outerDiv.onmousedown = startMove;              //鼠标按下
                outerDiv.onmousemove = processMove;          //鼠标移动
                outerDiv.onmouseup     = stopMove;              //鼠标弹起
                
				// necessary to enable dragging on IE
                outerDiv.ondragstart = function() { return false; }
				
				var innerDiv = document.getElementById("innerDiv");
				
				img = document.createElement("img");
				img.src = "http://mappng.baidu.com/maplite/mapbank/baidu/1/0_0/5_1.png";
				img.style.position = "absolute";
				img.style.left = "0px";
				img.style.top = "0px";
				img.style.zIndex = 0;
				img.setAttribute("id", "pb01");
				innerDiv.appendChild(img);

            }      
          function startMove(event) {
                // necessary for IE
                if (!event) event = window.event;

                dragStartLeft = event.clientX;
                dragStartTop = event.clientY;
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.cursor = "-moz-grab";
                top = stripPx(innerDiv.style.top);
                left = stripPx(innerDiv.style.left);

                dragging = true;
                return false;
            }

            function processMove(event) {
                if (!event) event = window.event;  // for IE
                var innerDiv = document.getElementById("innerDiv");
                if (dragging) {
                    innerDiv.style.top = top + (event.clientY - dragStartTop);
                    innerDiv.style.left = left + (event.clientX - dragStartLeft);
                }

            }

            function stopMove() {
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.cursor = "";
                dragging = false;
				
				status='在当前窗口中的X, Y坐标 : ( '+event.clientX+', '+event.clientY +')'+' 内部层的Top：'+innerDiv.style.top+' 内部层的Left：'+innerDiv.style.left;
            }
            function stripPx(value) {
                if (value == "") return 0;
                return parseFloat(value.substring(0, value.length - 2));
            }

            function setInnerDivSize(width, height) {
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.width = width;
                innerDiv.style.height = height;
            }			
			</script>

</HEAD>

<BODY onload="init()">
  <div id="outerDiv">
        <div style="position: absolute; top: 10px; left: 10px; z-index: 1">

        <div id="innerDiv" style="z-index: 0">
        </div>
   </div>

</BODY>
</HTML>
评论
blackbat 2007-04-06
这几天一直在类似baidumap(maps.baidu.com)的一个应用，之前听说当用户移动地图时向服务器异步取图片，以为这里用了xmlhttp，其实没有，只是在js里计算好，移到需要的图片，直接向服务器下载摆了。不知道这样和用xmlhttp取有何好坏之处？

另外一直搞不懂，baidumap在拖动时，只显示固定大小的图片，其实它是一张整的图片，但是为什只显示一部份?用了Clip这个属性，这样做只是为了好看一点？
blackbat 2007-04-05
@7thbyte
多出来的那个层是拿来放东南西北4个方向移动的图片，只是没加进去啊。
非常感谢啊.

如果继续改，问题又出来了，现在的情况是只用了一张大的地图，
但是实际上应该是由许多小的图片拼凑起来的,这样就会更烦琐，需要计算每张图片的clip的大小。


如下图:
7thbyte 2007-04-04
好了，在lz的程序基础上写的，判断是否移出并调整位置

由于那个padding:10px的存在，所以若干地方有-10.. 

function setImagePlace(){
	var innerDiv = document.getElementById("innerDiv");
	var outerDiv=document.getElementById("outerDiv");
	var img=document.getElementById("pb01");
	var l=parseInt(innerDiv.style.left);
	var t=parseInt(innerDiv.style.top);
	if(l>-10) innerDiv.style.left="-10px";
	if(t>-10) innerDiv.style.top="-10px";
	if(parseInt(outerDiv.clientWidth)-l-10>img.width)
		innerDiv.style.left=parseInt(outerDiv.clientWidth)-10-img.width+"px";
	if(parseInt(outerDiv.clientHeight)-t-10>img.height)
		innerDiv.style.top=parseInt(outerDiv.clientHeight)-10-img.height+"px";
}
7thbyte 2007-04-04
先第二个问题

代码里面outterDiv和innerDiv中间还隔着一层Div

由于它的存在写起来颇费一番周折
估计lz也是卡在这上面

针对lz的程序 第二个问题试试看应该可以这样： 
function setImageClip(){
	var innerDiv = document.getElementById("innerDiv");
	var outerDiv=document.getElementById("outerDiv");
	var img=document.getElementById("pb01");
	var v1=parseInt(innerDiv.style.top)+10;
	var v2=parseInt(innerDiv.style.left)+10;
	
	var v3=parseInt(outerDiv.clientWidth)-v2;
	var v4=parseInt(outerDiv.clientHeight)-v1;
	
	v1=v1<0?-v1:0;
	v2=v2<0?-v2:0;
	
	img.style.clip="rect("+v1+"px,"+v3+"px,"+v4+"px,"+v2+"px)";
	
}


这里是让图片沿outerDiv被切割的，而中间的div的padding是10 所以v1和v2都加了10
另外中间的div右边界超越了outerdiv，所以v3和v4的计算参考的是outerDiv的宽高

以前写过类似的例子，还可以把图片的上一层div的position设置成absolute，overflow设为hidden
然后动态改变div大小，可以取得类似效果
blackbat 2007-04-04
@7thbyte
1.图片移出，是指图片图片移动使得蓝色框露出白底，也就是说那边根本就没图片了。在移动结束，鼠标松开(up)后将其移回。
还有bug就是图片是移动的过程中，如果鼠标移动出了蓝色框，当你移回来时，图片直接又跟着鼠标动。你应该看到了吧。

2.应该是这样吧，取那几个相对坐标，然后算距离，一直没试出来...
7thbyte 2007-04-04
问题1：

图片移出，指的是图片完全移出蓝色框，
还是指图片移动使得蓝色框露出白底

是移动过程中始终保持不能移出，
还是移动结束，鼠标松开后将其移回？

可以用取得innerDiv.style.left和innerDiv.style.top，
再根据层和图片的style.width和style.height来判断图片位置是否符合要求，再行处理

问题2：
同样是取得几个值，然后根据情况更改style.clip的值
blackbat
搜索本博客
最近加入圈子
最新评论