-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIndex.html
121 lines (107 loc) · 3.52 KB
/
Index.html
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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="background-color:#269;
background-image: linear-gradient(grey 1px, transparent 1px),
linear-gradient(90deg, grey 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px">
<h2 style="color: white">JSCGAL DEMO</h2>
<table border="1" style="color: white">
<tr>
<td valign="top">Convex Hull</td>
<td><canvas id="myCanvas" width="400" height="400"></canvas></td>
<td valign="top">
<table>
<tr>
<td><button id="btnCalculate">Calculate</button></td>
<tr>
<td><button id="btnGenerate">Generate Points</button><input type="text" value="10" id="txtNumPoints"></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
canvas.addEventListener('mousedown',OnCanvasClick,false);
var ctx = canvas.getContext('2d');
var btnGenerate = document.getElementById('btnGenerate');
btnGenerate.addEventListener('mousedown',OnGenerateClick,false);
var btnCalculate = document.getElementById('btnCalculate');
btnCalculate.addEventListener('mousedown',OnCalculateClick,false);
var x = Math.floor((Math.random()*400)+1);
var y = Math.floor((Math.random()*400)+1);
var point = new Object();
point.x = x;
point.y = y;
var pointArray = [];
function DrawPoint(point){
ctx.beginPath();
ctx.rect(point.x,point.y,2,2);
//ctx.fillStyle = '#7FFF00';
//ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#7FFF00';
ctx.stroke();
}
function DrawLine(pointA,pointB)
{
ctx.beginPath();
ctx.moveTo(pointA.x,pointA.y);
ctx.lineTo(pointB.x,pointB.y);
ctx.strokeStyle ='#7FFF00';
ctx.stroke();
}
function OnCanvasClick(evt)
{
var rect = canvas.getBoundingClientRect();
x = evt.clientX - rect.left,
y = evt.clientY - rect.top
point = new Object();
point.x = x;
point.y = y;
pointArray.push(point);
DrawPoint(point);
}
function OnGenerateClick(evt) {
ClearCanvas();
pointArray = [];
var txtNumPoints = parseInt(document.getElementById('txtNumPoints').value,10);
for (var i = 0; i < txtNumPoints; i++) {
x = Math.floor((Math.random() * 400) + 1);
y = Math.floor((Math.random() * 400) + 1);
point = new Object();
point.x = x;
point.y = y;
pointArray.push(point);
DrawPoint(point);
}
}
function OnCalculateClick(evt)
{
var ch = new ConvexHull();
ch.AddPoints(pointArray);
var hullPoints = ch.CreateHull();
for(var i = 0; i < hullPoints.length -1 ;i++)
{
DrawLine(hullPoints[i],hullPoints[i+1]);
}
// Close the hull
var startPoint = hullPoints[0];
var endPoint = hullPoints[hullPoints.length -1];
DrawLine(startPoint,endPoint)
}
function ClearCanvas()
{
ctx.clearRect(0,0,canvas.width,canvas.height);
}
</script>
<script type="text/javascript" src="JSCGAL/ConvexHull.js"></script>
</body>
</html>