SVG-Polygon/intersecting-svg-polygons.htm at master · fhemsher/SVG-Polygon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Intersecting Polygons</title>
  <script type="text/javascript" src="highlight.pack.js"></script>
  <script type="text/javascript" src="highlightCode.js"></script>
  <link href='highlight.css' rel='stylesheet' />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:0px;font-family:arial;background:#f0f8ff'>
<center>
<h4>Intersecting Polygons</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:10px;'>
Determine where polygons intersect. Uses <b>vectors analysis</b>
</div>
<div id="svgDiv" style='width:400px;height:400px;background-color:lightgreen;'>
<svg id="mySVG" width="400" height="400">
<polygon id="polygonA" fill="yellow" stroke="blue" stroke-width="3" points="280,80 100,10 40,80 100,220 200,250" />
<polygon id="polygonB" fill="green" stroke="blue" stroke-width="3" opacity=".6" points="380,180 200,110 40,180 100,320 300,350" />
<circle id="circle1" r="8" fill="lime" stroke-width="1" stroke="black" />
<circle id="circle2" r="8" fill="lime" stroke-width="1" stroke="black" />
</svg>
</div>
 <br /><button onclick=getPolygonIntersect() >Compute Intersects</button>
 <br />  SVG Source:
  <div id=svgSourceDiv style=overflow:auto;width:100%;height:1px;text-align:left; /></div>
  Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:100%;text-align:left; /></div>

</center>
<script id=myScript>
//---button---
function getPolygonIntersect()
{
	var circleCnt=0
	var IntPoints=[]
	var aPoints=polygonA.points
	var m=aPoints.numberOfItems
	for(var i=0;i<m;i++)
	{
		var aX1=aPoints.getItem(i).x
		var aY1=aPoints.getItem(i).y

		if(i<m-1)
		{
			var aX2=aPoints.getItem(i+1).x
			var aY2=aPoints.getItem(i+1).y
		}
		else
		{
			var aX2=aPoints.getItem(0).x
			var aY2=aPoints.getItem(0).y
		}

		var bPoints=polygonB.points
		var n=bPoints.numberOfItems

		for(var k=0;k<n;k++) //--each side of polygon---
		{
			var bX1=bPoints.getItem(k).x
			var bY1=bPoints.getItem(k).y

			if(k<n-1)
			{
				var bX2=bPoints.getItem(k+1).x
				var bY2=bPoints.getItem(k+1).y
			}
			else
			{
				var bX2=bPoints.getItem(0).x
				var bY2=bPoints.getItem(0).y
			}
			//---return false or intersect point---
			var xy=lineSegIntersect(aX1,aY1,aX2,aY2,bX1,bY1,bX2,bY2)
			if(xy)
			{
				if(IntPoints.join().indexOf(xy)==-1)//--no dups--
				{
					IntPoints.push(xy)

					circleCnt++
					var circle=document.getElementById("circle"+circleCnt)
					circle.setAttribute("cx",xy[0])
					circle.setAttribute("cy",xy[1])
				}

			}
		}
	}
	showSourceSVG()
}
//---compare two lines: A.B---
function lineSegIntersect(aX1,aY1,aX2,aY2,bX1,bY1,bX2,bY2)
{
	//---compute vectors Va, Vb--------
	var Va=( (bX2-bX1)*(aY1-bY1) - (bY2-bY1)*(aX1-bX1) )/ ( (bY2-bY1)*(aX2-aX1) - (bX2-bX1)*(aY2-aY1) )
	var Vb=( (aX2-aX1)*(aY1-bY1) - (aY2-aY1)*(aX1-bX1) )/( (bY2-bY1)*(aX2-aX1) - (bX2-bX1)*(aY2-aY1) )

	if(Va>0 && Va<1 && Vb>0 && Vb<1)
	{
	//---intersect true, show point---
		var ma=(aY2-aY1)/(aX2-aX1)
		var mb=(bY2-bY1)/(bX2-bX1)
		if(aX2!=aX1&&bX2!=bX1) //---!vertical line---
		{
			var x=(aX1*ma-aY1-bX1*mb+bY1)/(ma-mb)
			var y=ma*(x-aX1)+aY1
		}
		else if(aX2==aX1)
		{
			var x=aX1
			var y=mb*(x-bX1)+bY1
		}
		else if(bX2==bX1)
		{
			var x=bX1
			var y=ma*(x-aX1)+aY1
		}

		return [x,y]
    }
	else
	return false
}


</script>
<script>
document.addEventListener("onload",init(),false)

function init()
{
showSourceSVG()
showSourceJS()

}

</script>
</body>

</html>