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
|
<!DOCTYPE html>
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>QuadTree Demo</title>
<script src="../base.js"></script>
<script>
goog.require('goog.structs');
goog.require('goog.events');
goog.require('goog.structs.QuadTree');
</script>
<style>
.region {
position: absolute;
-moz-outline: 1px solid #CCC;
outline: 1px solid #CCC;
z-index: 500;
}
.point {
position: absolute;
background-color: red;
width: 4px;
height: 4px;
z-index: 1000;
}
#el {
width: 500px;
height: 500px;
background-color: #FCFCFC;
}
#values {
font-size: small;
}
#info {
position: absolute;
top: 5px;
left: 505px;
width: 200px;
font: normal 11px verdana;
}
</style>
</head>
<body>
<div id="el"></div>
<div id="info">
<p>Click on the area to the left to add a point to the quadtree, clicking on
a point will remove it from the tree.</p>
<pre id="values"></pre>
</div>
<script>
function visualize(node) {
var div = document.createElement('div');
div.className = 'region';
div.style.top = node.y + 'px';
div.style.left = node.x + 'px';
div.style.width = node.w+ 'px';
div.style.height = node.h + 'px';
if (node.nodeType == goog.structs.QuadTree.NodeType.POINTER) {
visualize(node.nw, div);
visualize(node.ne, div);
visualize(node.sw, div);
visualize(node.se, div);
} else if (node.nodeType == goog.structs.QuadTree.NodeType.LEAF) {
var point = document.createElement('div');
point.className = 'point';
point.style.top = (node.point.y - 2) + 'px';
point.style.left = (node.point.x - 2) + 'px'
point.text = node.point.value;
point.point = node.point;
document.getElementById('el').appendChild(point);
}
document.getElementById('el').appendChild(div);
var values = ['Values:'];
qt.forEach(function(value, coord) {
values.push(coord + ' ' + value);
});
document.getElementById('values').innerHTML = values.join('\n');
}
var maxW = 500, maxH = 500;
var qt = new goog.structs.QuadTree(0, 0, maxW, maxH);
visualize(qt.getRootNode());
goog.events.listen(document.body, 'click', function(e) {
if (e.target.className == 'point') {
qt.remove(e.target.point.x, e.target.point.y);
} else {
var x = e.clientX;
var y = e.clientY;
if (x < maxW && y < maxH) qt.set(x, y, new Date().toLocaleString());
}
var el = document.getElementById('el');
el.innerHTML = '';
visualize(qt.getRootNode());
});
</script>
</body>
</html>
|
