线段与矩形是否相交.求JS编写

j2u1314 2010-04-20 02:43:24



<img src="images/1111.jpg" width="300" height="200" usemap="#map_sample" border="0" alt="sample">

<map name="map_sample">

<area shape="circle" coords="166,153,5" href="#" alt="円">

<area shape="circle" coords="200,75,5" href="#" alt="円">

<area shape="rect" coords="206,93,253,124" href="#" /><area shape="rect" coords="132,33,184,64" href="#" />

<area shape="rect" coords="125,85,186,135" href="#" />

</map>

<textarea rows=5 cols=10 id=tt1></textarea>

<script>

var x1=166,y1=153;//A

var x2=200,y2=75;//B

//var b=[[156,109],[173,154],[211,146],[217,120],[181,99]];

var mx=0,my=0;//move point step

var timer;

var f=1;

function move(){

  if(x1+mx>f*x2){

    clearInterval(timer);

    return false;

  }

  mx++;//偏移量x

  my=f*(y2-y1)*mx/(x2-x1);//偏移量y

  document.getElementById("tt1").value=my

  // 起点y + 相対偏移量x * 斜率 <=移動点y  

  if(f*Math.abs(b[0][1] + (x1+mx-b[0][0])*(b[0][1]-b[1][1])/(b[0][0]-b[1][0]))>=f*(y1+my)){  

  alert((mx+x1)+":"+(my+y1));

  //return((mx+x1)+":"+(my+y1));

  

  clearInterval(timer);

  }

    

}

function yourFunctionName(mapId,pointA,pointB){

    x1=pointA[0],y1=pointA[1];

    x2=pointB[0],y2=pointB[1];

    f=y1>=y2?1:-1;

    var mapP=document.getElementsByName(mapId)[0].childNodes[2].getAttribute("coords").split(",");

        b=[];

        for(var i=0;i<mapP.length/2;i++)b[b.length]=new Array(parseInt(mapP[i*2]),parseInt(mapP[i*2+1]));

    timer=setInterval(move,10);

}

yourFunctionName("map_sample",[136,153],[200,85]);

</script>

上面写得有些JS.但是不行.
求个高手.帮写一个函数.
该函数有三个参数.
热点ID.A和B两点.
返回A到B点与这些热点矩形的第一次相交的坐标.
没有相交返回FALSE

注:
1. map的热点数量不确定.上面是三个.只是举个例子.所以该函数要循环判断map的area 有多少个。
2. A和B点位置是有变化的。也有可能是从B点到A点。也就是A、B两点可以是任何值。

上面那JS是shan1119这个高手写的。判断多边形的。
但始终不行。位置一变化就有问题。
现在改为了矩形。没有以前那么难了。

请各位高手帮帮忙。
小弟JS正在学习中。实在写不出啊。

...全文

462 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

j2u1314 2010-04-22

打赏
举报

[Quote=引用 9 楼 shan1119 的回复:]
HTML code
<img src="images/1111.jpg" width="300" height="200" usemap="#map_sample" border="0" alt="sample">
<map name="map_sample">
<area shape="circle" coords="166,153,5" href="#" alt="円">
<area ……
[/Quote]
还是shan1119厉害.
我以为你没时间写呢.
就结贴了.不好意思.

shan1119 2010-04-22

打赏
举报

<img src="images/1111.jpg" width="300" height="200" usemap="#map_sample" border="0" alt="sample">

<map name="map_sample">

<area shape="circle" coords="166,153,5" href="#" alt="円">

<area shape="circle" coords="200,75,5" href="#" alt="円">

<area shape="rect" coords="50,50,150,100" href="#"  background="#EEE"/>

<area shape="rect" coords="50,120,150,170" href="#" />

<area shape="rect" coords="200,100,250,150" href="#" />

<div style="position:absolute;width:1px;height:1px;left:176px;top:163px;border:solid 1px;black;size:1pt"></div>

<div style="position:absolute;width:1px;height:1px;left:210px;top:85px;border:solid 1px;black;"></div>

<div style="position:absolute;width:100px;height:50px;left:60px;top:65px;border:solid 1px;black;"></div>

<div style="position:absolute;width:100px;height:50px;left:60px;top:135px;border:solid 1px;black;"></div>

<div style="position:absolute;width:50px ;height:50px;left:210px;top:115px;border:solid 1px;black;"></div>

</map>

<textarea rows=10 cols=50 id=tt1></textarea>

<script>

yourFunctionName("map_sample",[50,100],[100,49]);

function yourFunctionName(mapId,pointA,pointB){

    var x1=pointA[0],y1=pointA[1];//起点

    var x2=pointB[0],y2=pointB[1];//終点

    var maxx=Math.max(x1,x2),minx=Math.min(x1,x2);

    var maxy=Math.max(y1,y2),miny=Math.min(y1,y2);

    var f=y1>=y2?1:-1;

    var b=[];

    for(var i=2;i<document.getElementsByName(mapId)[0].childNodes.length;i++){

        var obj=document.getElementsByName(mapId)[0].childNodes[i];

        if(obj.tagName.toUpperCase()=="AREA"){

            var mapP=obj.getAttribute("coords").split(",");//x1:0,y1:1,x2:2,y2:3

            var my=(y2-y1)*mapP[0]/(x2-x1) + (y1*x2-y2*x1)/(x2-x1);

            var mx=(x2-x1)*mapP[1]/(y2-y1) - (y1*x2-y2*x1)/(y2-y1);

            if(my>=Math.min(mapP[1],mapP[3]) && my<=Math.max(mapP[1],mapP[3])

            && my>=miny && my<=maxy)b[b.length]=[mapP[0],my];

            if(mx>=Math.min(mapP[0],mapP[2]) && mx<=Math.max(mapP[0],mapP[2])

            && mx>=minx && mx<=maxx)b[b.length]=[mx,mapP[1]];

            

                my=(y2-y1)*mapP[2]/(x2-x1) + (y1*x2-y2*x1)/(x2-x1);

                mx=(x2-x1)*mapP[3]/(y2-y1) - (y1*x2-y2*x1)/(y2-y1);

            if(my>=Math.min(mapP[1],mapP[3]) && my<=Math.max(mapP[1],mapP[3])

            && my>=miny && my<=maxy)b[b.length]=[mapP[2],my];

            if(mx>=Math.min(mapP[0],mapP[2]) && mx<=Math.max(mapP[0],mapP[2])

            && mx>=minx && mx<=maxx)b[b.length]=[mx,mapP[3]];

            //alert(minx+","+maxx+","+miny+","+maxy);

        }

    }

    if(b.length==0){alert(false);return false;}

    var rtn=b[0];

    for(var i=1;i<b.length;i++){

        if(rtn[1]*f<b[i][1]*f)rtn=b[i];

    }

    document.getElementById("tt1").value="交差点："+b.join("\r\n")+"\r\n結果:"+rtn;

}

</script>