1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
4 <title>img usemap属性</title>
5 </head>
6 <script>
7
8 function isPointInLine(point,linePoint1,linePoint2)
9 {
10 //是否一个点向x轴的射线穿透线段,有交点
11 var maxY=(linePoint1.y>linePoint2.y)?linePoint1.y:linePoint2.y;
12 var minY=(linePoint1.y<linePoint2.y)?linePoint1.y:linePoint2.y;
13 //alert("maxY" + maxY);
14 //alert("minY = " + minY);
15 var re=false;
16 if(point.y<maxY && point.y>=minY)
17 {
18 a1 = point.x;
19 a2 = (linePoint2.x-linePoint1.x)*(point.y-linePoint1.y)/(linePoint2.y-linePoint1.y);
20 //alert(a1);
21 //alert(a2);
22 //alert(a1 <= a2);
23 if(parseFloat(point.x) <= parseFloat(( linePoint1.x+(linePoint2.x-linePoint1.x)*(point.y-linePoint1.y)/(linePoint2.y-linePoint1.y) )) )
24 {
25 re=true;
26 }
27 }
28 //alert("point :" + point.x + ":" + point.y + ";")
29 //alert("linePoint1 :" + linePoint1.x + ":" + linePoint1.y + ";")
30 //alert("linePoint2 :" + linePoint2.x + ":" + linePoint2.y + ";")
31 //alert(re);
32 return(re);
33 }
34
35 function isPointInPolygon(point,poly)
36 {
37 //是否点在多边形里
38 var crossNum=0;
39 var re=true;
40 for(var i=0;i<poly.length-1;i++)
41 {
42 if(isPointInLine(point,poly[i],poly[i+1]))
43 {
44 crossNum++;
45 }
46 }
47
48 if((crossNum % 2)==0)
49 {
50 re=false;
51 }
52
53 return(re);
54 }
55
56 function clickme()
57 {
58 var pa = document.getElementById("point").value.split(",");
59 var p = {x:pa[0],y:pa[1]};
60
61 var poa = document.getElementById("poly").value.split(",");
62 var po = new Array();
63 for(var i=0;i<poa.length/2;i++){
64 po[i]={x:poa[2*i],y:poa[2*i+1]};
65 };
66 //for(var i=0;i<po.length;i++)
67 //{
68 // alert(po[i].x);
69 // alert(po[i].y);
70 //}
71
72 //alert(p.x);
73 //alert(p.y);
74
75 alert(isPointInPolygon(p,po));
76 }
77 </script>
78
79 <body>
80 原理：从要判断的点向x轴发射一条射线，如果射线与多边形的边有偶数次相交，那么点不在多边形内；奇数次相交，那么点在多边形内(<font color="red">*此处的坐标是平面坐标</font>)
81 <br>
82 <input type="text" id="point" value="0.5,0.49" />点的横竖坐标，用逗号分隔
83 <br>
84 <input type="text" id="poly" value="0,0,0.75,0.75,1,0,1,1,0,1" />按照逆时针方向 多边形点的横竖坐标坐标0
85 <input type="button" id="btn" value="点击我" onclick="clickme();">
86 </body>
87 </html>
原理：
从要判断的点向x轴发射一条射线，如果射线与多边形的边有偶数次相交，那么点不在多边形内；奇数次相交，那么点在多边形内
时间： 2024-10-10 08:59:05