Revision 7f9aab46
ID | 7f9aab46527fc167ca5e3e4de05fa21fdad8f6c6 |
Parent | 1f5db711 |
Child | 6b16425b |
Version réaliée pour la sage de Victor Pongnian
Files
- added
- modified
- copied
- renamed
- deleted
Changesets
class/site_point.class.php | ||
---|---|---|
9 | 9 |
public function __construct($dir) { |
10 | 10 |
$this->base_dir = $dir; |
11 | 11 |
$dir_fd = opendir($this->base_dir); |
12 |
|
|
12 | 13 |
while (false !== ($file = readdir($dir_fd))) { |
14 |
|
|
13 | 15 |
if (preg_match('/(.*)_[0-9]+_[0-9]+_[0-9]+\.jpg$/', $file, $reg)) { |
14 | 16 |
$this->prefix = $reg[1]; |
17 |
|
|
15 | 18 |
break; |
16 | 19 |
} |
17 | 20 |
} |
... | ... | |
20 | 23 |
$pfname = $this->base_dir.'/'.$this->prefix.'.params'; |
21 | 24 |
if (is_file($pfname)) { |
22 | 25 |
$this->params = @parse_ini_file($pfname); |
23 |
} |
|
26 |
}
|
|
24 | 27 |
} |
25 | 28 |
|
26 | 29 |
public function get_params() { |
... | ... | |
65 | 68 |
$lon2 = $lon * M_PI/180; |
66 | 69 |
|
67 | 70 |
$dLat = $lat2-$lat1; |
68 |
$dLon = $lon2-$lon1; |
|
71 |
$dLon = $lon2-$lon1;
|
|
69 | 72 |
|
70 |
$a = sin($dLat/2) * sin($dLat/2) + sin($dLon/2) * sin($dLon/2) * cos($lat1) * cos($lat2); |
|
73 |
$a = sin($dLat/2) * sin($dLat/2) + sin($dLon/2) * sin($dLon/2) * cos($lat1) * cos($lat2); //
|
|
71 | 74 |
$angle = 2 * atan2(sqrt($a), sqrt(1-$a)); |
72 | 75 |
$d = $angle * $rt; // distance du point en Kms |
73 | 76 |
|
74 | 77 |
$y = sin($dLon)*cos($lat2); |
75 | 78 |
$x = cos($lat1)*sin($lat2) - sin($lat1)*cos($lat2)*cos($dLon); |
76 | 79 |
$cap = atan2($y, $x); // cap pour atteindre le point en radians |
77 |
|
|
80 |
|
|
78 | 81 |
$e = atan2(($alt2 - $alt1)/1000 - $d*$d/(2*$rt), $d); // angle de l'élévation en radians |
79 | 82 |
// printf("%s, %s, %s, %s\n",$lat1, $this->params['latitude'], $lat, $dLat); |
80 |
|
|
81 |
return array($d, $cap*180/M_PI, $e*180/M_PI); // les résultats sont en degrés |
|
83 |
|
|
84 |
return array($d, $cap*180/M_PI, $e*180/M_PI, $rapport); // les résultats sont en degrés
|
|
82 | 85 |
} |
83 | 86 |
|
84 | 87 |
} |
class/sites_dir.class.php | ||
---|---|---|
4 | 4 |
|
5 | 5 |
public function __construct($dir) { |
6 | 6 |
$this->base_dir = $dir; |
7 |
} |
|
7 |
}
|
|
8 | 8 |
|
9 | 9 |
public function get_sites() { |
10 |
$dir_fd = opendir($this->base_dir); |
|
10 |
try |
|
11 |
{ |
|
12 |
$dir_fd = opendir($this->base_dir); |
|
13 |
} |
|
14 |
catch(Exception $e) |
|
15 |
{ |
|
16 |
die('Erreur : '.$e->getMessage()); |
|
17 |
} |
|
18 |
|
|
19 |
|
|
11 | 20 |
$point_list = array(); |
12 | 21 |
while (false !== ($point_dir = readdir($dir_fd))) { |
13 | 22 |
$pt = new site_point($this->base_dir.'/'.$point_dir); |
... | ... | |
15 | 24 |
} |
16 | 25 |
return $point_list; |
17 | 26 |
} |
27 |
|
|
28 |
public function get_dir() { |
|
29 |
return $this->base_dir; |
|
30 |
} |
|
18 | 31 |
|
19 | 32 |
} |
css/all.css | ||
---|---|---|
41 | 41 |
border:solid #F00 1px; |
42 | 42 |
border-radius:0.5em; |
43 | 43 |
padding:0 1em; |
44 |
text-shadow:2px 2px 2px #000, -2px -2px 2px #000; |
|
44 | 45 |
} |
45 | 46 |
|
47 |
legend:hover { |
|
48 |
color:#FF0; |
|
49 |
cursor:default; |
|
50 |
} |
|
51 |
|
|
46 | 52 |
fieldset#control { |
47 | 53 |
text-shadow:2px 2px 2px #000, -2px -2px 2px #000; |
48 | 54 |
color:#FFF; |
... | ... | |
59 | 65 |
input { |
60 | 66 |
vertical-align:middle; |
61 | 67 |
} |
68 |
|
|
69 |
|
|
62 | 70 |
input[type="number"] { |
63 | 71 |
border-radius:1em; |
64 | 72 |
display:block; |
65 | 73 |
float:right; |
66 | 74 |
} |
67 | 75 |
|
68 |
#res>:not(ul), #control, #params, #info { |
|
76 |
#locadraw input[type="number"] { |
|
77 |
width:10ex; |
|
78 |
} |
|
79 |
|
|
80 |
#res>:not(ul), #control, #params, #info ,#addParams ,#adding, #loca{ |
|
69 | 81 |
user-select:none; |
70 | 82 |
-khtml-user-select:none; |
71 | 83 |
-o-user-select:none; |
... | ... | |
74 | 86 |
} |
75 | 87 |
|
76 | 88 |
div#params { |
77 |
padding:0.2em 0.5em;
|
|
89 |
padding:0.2em 1.3em;
|
|
78 | 90 |
border-radius:0.5em; |
79 | 91 |
background-color:rgba(128,128,128,0.5); |
80 | 92 |
border:solid #00F 1px; |
... | ... | |
85 | 97 |
} |
86 | 98 |
|
87 | 99 |
div#params em { |
100 |
|
|
88 | 101 |
display:block; |
89 | 102 |
float:right; |
90 | 103 |
background-color:#88F; |
... | ... | |
97 | 110 |
display:inline; |
98 | 111 |
} |
99 | 112 |
|
113 |
span#loca{ |
|
114 |
text-shadow:2px 2px 2px #000, -2px -2px 2px #000; |
|
115 |
color:#FFF; |
|
116 |
float:left; |
|
117 |
position:absolute; |
|
118 |
bottom:1em; |
|
119 |
left:1em; |
|
120 |
cursor:pointer; |
|
121 |
padding:0.2em 0.5em; |
|
122 |
padding:0 1em; |
|
123 |
} |
|
124 |
|
|
125 |
|
|
126 |
div#addParams { |
|
127 |
text-shadow:2px 2px 2px #000, -2px -2px 2px #000; |
|
128 |
color:#FFF; |
|
129 |
float:left; |
|
130 |
position:absolute; |
|
131 |
top:1em; |
|
132 |
right:2em; |
|
133 |
|
|
134 |
border:solid #F00 1px; |
|
135 |
border-radius:0.5em; |
|
136 |
padding:0.2em 0.5em; |
|
137 |
background-color:#F88; |
|
138 |
padding:0 1em; |
|
139 |
|
|
140 |
} |
|
141 |
|
|
142 |
div#addParams label { |
|
143 |
|
|
144 |
border-radius:0.5em; |
|
145 |
padding:0 1em; |
|
146 |
} |
|
147 |
|
|
148 |
div#addParams label:hover { |
|
149 |
color: #FF0; |
|
150 |
|
|
151 |
} |
|
152 |
|
|
153 |
fieldset#locadraw { |
|
154 |
|
|
155 |
color:#FFF; |
|
156 |
float:left; |
|
157 |
position:absolute; |
|
158 |
bottom:1em; |
|
159 |
left:1em; |
|
160 |
background-color:rgba(128,128,128,0.5); |
|
161 |
border:solid #F00 1px; |
|
162 |
border-radius:0.5em; |
|
163 |
padding:0 1em; |
|
164 |
visibility:hidden; |
|
165 |
} |
|
166 |
|
|
167 |
fieldset#adding { |
|
168 |
|
|
169 |
color:#FFF; |
|
170 |
float:left; |
|
171 |
position:absolute; |
|
172 |
top:1em; |
|
173 |
right:2em; |
|
174 |
background-color:rgba(128,128,128,0.5); |
|
175 |
border:solid #F00 1px; |
|
176 |
border-radius:0.5em; |
|
177 |
padding:0 1em; |
|
178 |
visibility: hidden; |
|
179 |
} |
|
180 |
|
|
181 |
|
|
182 |
|
|
183 |
form#form_param label { |
|
184 |
|
|
185 |
margin-right: 15px; |
|
186 |
width: 0.5em; |
|
187 |
padding:0.3em 0.5em; |
|
188 |
min-height: 1px; |
|
189 |
text-align: left; |
|
190 |
text-shadow:2px 2px 2px #000, -2px -2px 2px #000; |
|
191 |
} |
|
192 |
|
|
193 |
|
|
194 |
input:focus { |
|
195 |
border-color: rgba(82, 168, 236, 0.75); |
|
196 |
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5); |
|
197 |
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5); |
|
198 |
box-shadow: 0 0 8px rgba(82, 168, 236, 0.5); |
|
199 |
} |
|
200 |
|
|
201 |
.correct { |
|
202 |
border-color: rgba(68, 191, 68, 0.75); |
|
203 |
} |
|
204 |
|
|
205 |
.correct:focus { |
|
206 |
border-color: rgba(68, 191, 68, 0.75); |
|
207 |
-moz-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5); |
|
208 |
-webkit-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5); |
|
209 |
box-shadow: 0 0 8px rgba(68, 191, 68, 0.5); |
|
210 |
} |
|
211 |
|
|
212 |
.incorrect { |
|
213 |
border-color: rgba(191, 68, 68, 0.75); |
|
214 |
} |
|
215 |
|
|
216 |
.incorrect:focus { |
|
217 |
border-color: rgba(191, 68, 68, 0.75); |
|
218 |
-moz-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5); |
|
219 |
-webkit-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5); |
|
220 |
box-shadow: 0 0 8px rgba(191, 68, 68, 0.5); |
|
221 |
} |
|
222 |
|
|
223 |
/*p#chsignInfo { |
|
224 |
color:#F00; |
|
225 |
font-size: 12px; |
|
226 |
margin:1.02em 1em; |
|
227 |
background-color: #CCC; |
|
228 |
border-radius: 4px; |
|
229 |
padding:2px; |
|
230 |
}*/ |
|
231 |
|
|
232 |
.answer { |
|
233 |
margin:0.2em 0; |
|
234 |
display:block; |
|
235 |
} |
|
236 |
|
|
237 |
.answer input { |
|
238 |
border-radius:0.5rem; |
|
239 |
padding:0.2em 0.7em; |
|
240 |
} |
|
241 |
|
|
242 |
.form_button { |
|
243 |
background-color:rgba(128,128,128,0.9); |
|
244 |
/*background: url(button.png) no-repeat top;*/ |
|
245 |
display:inline-block; |
|
246 |
} |
|
247 |
|
|
100 | 248 |
.validators { |
101 | 249 |
text-align:center; |
102 | 250 |
background-color:#CCC; |
index.php | ||
---|---|---|
3 | 3 |
<head> |
4 | 4 |
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> |
5 | 5 |
<title>Liste des panoramas</title> |
6 |
<link rel="stylesheet" media="screen" href="css/all.css" />
|
|
6 |
<link rel="stylesheet" media="screen" href="css/index_style.css" />
|
|
7 | 7 |
<script src="js/pano.js"></script> |
8 | 8 |
</head> |
9 | 9 |
<body> |
10 |
<h1>Liste des panoramas</h1> |
|
11 |
<?php |
|
12 |
require 'class/site_point.class.php'; |
|
13 |
require 'class/sites_dir.class.php'; |
|
14 |
echo '<ul>'; |
|
15 |
if(isset($_GET['dir']) && is_dir($_GET['dir'])) { |
|
16 |
$base_dir = $_GET['dir']; |
|
17 |
} else { |
|
18 |
$base_dir = 'tiles'; |
|
19 |
} |
|
20 |
|
|
21 |
$dir = new sites_dir($base_dir); |
|
22 |
|
|
23 |
foreach($dir->get_sites() as $pt) { |
|
24 |
$params = $pt->get_params(); |
|
25 |
if (isset($params['titre'])) { |
|
26 |
$cmt = $params['titre']; |
|
27 |
} else { |
|
28 |
$cmt = sprintf('fichier <samp>%s/%s</samp>', $pt->get_name(), $pt->get_prefix()); |
|
29 |
} |
|
30 |
printf ('<li><a href="panorama.php?dir=%s&panorama=%s">%s</a></li>'."\n", $base_dir, $pt->get_name(), $cmt); |
|
31 |
} |
|
32 |
echo '</ul>'; |
|
33 |
?> |
|
10 |
<img id="top" src="images/top.png" alt=""> |
|
11 |
<div id="index_container"> |
|
12 |
<h1><img src="images/tetaneutral.png" /></h1> |
|
13 |
<h2>Liste des panoramas</h2> |
|
14 |
<?php |
|
15 |
|
|
16 |
require 'class/site_point.class.php'; |
|
17 |
require 'class/sites_dir.class.php'; |
|
18 |
|
|
19 |
echo '<div id="containerList">'; |
|
20 |
echo '<ul>'; |
|
21 |
|
|
22 |
if(isset($_GET['dir']) && is_dir($_GET['dir'])) { |
|
23 |
$base_dir = $_GET['dir']; |
|
24 |
} else { |
|
25 |
$base_dir='tiles'; |
|
26 |
} |
|
27 |
|
|
28 |
$dir = new sites_dir($base_dir); |
|
29 |
|
|
30 |
|
|
31 |
foreach($dir->get_sites() as $pt) { |
|
32 |
|
|
33 |
$params = $pt->get_params(); |
|
34 |
if (isset($params['titre'])) { |
|
35 |
$cmt = $params['titre']; |
|
36 |
|
|
37 |
} else { |
|
38 |
$cmt = sprintf('fichier <samp>%s/%s</samp>', $pt->get_name(), $pt->get_prefix()); |
|
39 |
} |
|
40 |
|
|
41 |
printf ('<li><a href="panorama.php?dir=%s&panorama=%s">%s</a></li>'."\n", $base_dir, $pt->get_name(), $cmt); |
|
42 |
} |
|
43 |
?> |
|
44 |
</div> |
|
45 |
</div> |
|
46 |
<div id="interaction"> |
|
47 |
|
|
48 |
<li><a href="./envoyer.php" title="Envoyer une image sur le site">Ajouter un panorama</a></li> |
|
49 |
<li><a href="./creerPano.php" title="Générer un panorama à partir d\'une image déjà envoyée">Générer un panorama</a></li> |
|
50 |
|
|
51 |
</div> |
|
52 |
</ul> |
|
53 |
<img id="bottom" src="images/bottom.png" alt=""> |
|
34 | 54 |
<p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p> |
35 | 55 |
</body> |
36 | 56 |
</html> |
js/pano.js | ||
---|---|---|
1 |
if (img_prefix == undefined) var img_prefix = './tiles/ttn_mediatheque/mediatheque_70';
|
|
1 |
if (img_prefix == undefined) var img_prefix = 'http://pano.tetaneutral.net/data/tsf2/vpongnian/tiles/ttn_mediatheque/mediatheque_70';
|
|
2 | 2 |
if (to_cap == undefined) var to_cap = 0; |
3 | 3 |
if (to_ele == undefined) var to_ele = 0; |
4 | 4 |
if (to_zoom == undefined) var to_zoom = 0; |
... | ... | |
8 | 8 |
if (ref_points == undefined) var ref_points = new Array(); |
9 | 9 |
if (image_loop == undefined) var image_loop = true; |
10 | 10 |
|
11 |
|
|
11 | 12 |
var debug_mode = false; |
12 | 13 |
var canvas; |
13 | 14 |
var cntext; |
... | ... | |
31 | 32 |
var point_colors = {'pano_point' : '255,128,128', |
32 | 33 |
'ref_point' : '128,128,255', |
33 | 34 |
'loc_point' : '128,255,128', |
35 |
'temporary' : '255,255,128', |
|
34 | 36 |
'unlocated' : '255,255,255'}; |
35 | 37 |
var test = {x:0, y:0, i:100}; |
36 | 38 |
|
39 |
|
|
37 | 40 |
function nmodulo(val, div) { // pour obtenir un modulo dans l'espace des nombres naturels N. |
38 | 41 |
return Math.floor((val%div+div)%div); // il y a peut être plus simple, mais en attendant .... |
39 | 42 |
} |
... | ... | |
165 | 168 |
if (twidth) { |
166 | 169 |
cntext.restore(); |
167 | 170 |
} |
171 |
|
|
172 |
} |
|
173 |
|
|
174 |
function insert_drawn_point(lat,lon,alt) { |
|
175 |
|
|
176 |
var rt = 6371; // Rayon de la terre |
|
177 |
var alt1 = document.getElementById('pos_alt').childNodes[0].nodeValue; |
|
178 |
var lat1 = document.getElementById('pos_lat').childNodes[0].nodeValue*Math.PI/180; |
|
179 |
var lon1 = document.getElementById('pos_lon').childNodes[0].nodeValue*Math.PI/180; |
|
180 |
var alt2 = alt; |
|
181 |
var lat2 = lat*Math.PI/180; |
|
182 |
var lon2 = lon*Math.PI/180; |
|
183 |
|
|
184 |
var dLat = lat2-lat1; |
|
185 |
var dLon = lon2-lon1; |
|
186 |
|
|
187 |
var a = Math.sin(dLat/2)*Math.sin(dLat/2) + Math.sin(dLon/2)*Math.sin(dLon/2)*Math.cos(lat1)*Math.cos(lat2); // |
|
188 |
var angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); |
|
189 |
var d = angle*rt; // distance du point en Kms |
|
190 |
|
|
191 |
var y = Math.sin(dLon) * Math.cos(lat2); |
|
192 |
var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon); |
|
193 |
var cap = Math.atan2(y,x); // cap pour atteindre le point en radians |
|
194 |
var e = Math.atan2((alt2 - alt1)/1000 - d*d/(2*rt),d); // angle de l'élévation en radians |
|
195 |
|
|
196 |
return {d:d, cap:cap*180/Math.PI, ele:e*180/Math.PI}; // les résultats sont en degrés |
|
197 |
} |
|
198 |
|
|
199 |
localate_point = function () { |
|
200 |
|
|
201 |
var lat = document.getElementById("loca_latitude").value; |
|
202 |
var lon = document.getElementById("loca_longitude").value; |
|
203 |
var alt = document.getElementById("loca_altitude").value; |
|
204 |
if (lat == '' || isNaN(lat) || lat <= -90 || lat > 90) { |
|
205 |
alert("La latitude "+lat+"n'est pas correcte"); |
|
206 |
return; |
|
207 |
} |
|
208 |
if (lat == '' || isNaN(lon) || lon <= -180 || lon > 180) { |
|
209 |
alert("La longitude "+lon+"n'est pas correcte"); |
|
210 |
return; |
|
211 |
} |
|
212 |
if (lat == '' || isNaN(alt) || alt < -400) { |
|
213 |
alert("l'altitude "+alt+"n'est pas correcte"); |
|
214 |
return; |
|
215 |
} |
|
216 |
var opt_ced = new Array(); |
|
217 |
opt_dce = insert_drawn_point(lat,lon,alt); |
|
218 |
// -----Première solution : afficher dynamiquement le point ! |
|
219 |
var d = opt_dce.d; |
|
220 |
var cap = opt_dce.cap; |
|
221 |
var ele = opt_dce.ele; |
|
222 |
|
|
223 |
display_temp(d, cap, ele); |
|
224 |
|
|
225 |
} |
|
226 |
|
|
227 |
function display_temp(d,cap,ele) { |
|
228 |
|
|
229 |
point_list[point_list.length] = new Array("point temporaire", d,cap,ele, "temporary"); |
|
230 |
reset_zooms(); |
|
231 |
putImage(last.x, last.y); |
|
232 |
} |
|
233 |
|
|
234 |
function arrayUnset(array, value){ |
|
235 |
array.splice(array.indexOf(value), 1); |
|
236 |
} |
|
237 |
|
|
238 |
erase_point = function() { |
|
239 |
|
|
240 |
for (var i=0; i<point_list.length; i++) { |
|
241 |
if(point_list[i][0] == "point temporaire"){ |
|
242 |
arrayUnset(point_list,point_list[i]); |
|
243 |
loop = erase_point(); |
|
244 |
} |
|
245 |
} |
|
246 |
reset_zooms(); |
|
247 |
putImage(last.x, last.y); |
|
168 | 248 |
} |
169 | 249 |
|
170 | 250 |
function get_file_name(x, y, z) { // recherche du fichier correspondant au zoom et à la position |
... | ... | |
181 | 261 |
} |
182 | 262 |
|
183 | 263 |
function keys(key) { |
264 |
|
|
184 | 265 |
hide_links(); |
185 | 266 |
evt = key || event; |
186 |
evt.preventDefault(); |
|
187 |
evt.stopPropagation(); |
|
267 |
//evt.preventDefault();
|
|
268 |
//evt.stopPropagation();
|
|
188 | 269 |
if (!key) { |
189 | 270 |
key = window.event; |
190 | 271 |
key.which = key.keyCode; |
... | ... | |
192 | 273 |
// alert(key); |
193 | 274 |
// if (!evt.shiftKey) return; |
194 | 275 |
switch (key.which) { |
195 |
case 66: // b |
|
276 |
/*case 66: // b
|
|
196 | 277 |
alert(key.pageX); |
197 | 278 |
test.x=tile.width*(ntiles.x-3); |
198 | 279 |
test.y=0; |
... | ... | |
202 | 283 |
test.x=0; |
203 | 284 |
test.y=tile.height*(ntiles.y-3); |
204 | 285 |
putImage(test.x, test.y); |
205 |
return; |
|
286 |
return;*/
|
|
206 | 287 |
case 36: // home |
207 | 288 |
putImage(0, zm.im.height/2); |
208 | 289 |
return; |
... | ... | |
440 | 521 |
if (ref_points[lbl] != undefined) { |
441 | 522 |
typ = 'ref_point'; |
442 | 523 |
if (!is_located) rxy = {x:ref_points[lbl].x*this.im.width, y:ref_points[lbl].y*this.im.height} |
443 |
} else if(lnk == '' && is_visible) { |
|
524 |
} else if(lnk == '' && is_visible && lbl != 'point temporaire') {
|
|
444 | 525 |
typ = 'loc_point'; |
526 |
}else if(is_visible && lbl =='point temporaire') { |
|
527 |
typ = 'temporary'; |
|
528 |
|
|
445 | 529 |
} else if(is_visible) { |
446 | 530 |
typ = 'pano_point'; |
447 | 531 |
lnk += '&to_zoom='+this.value; |
448 |
} |
|
532 |
}
|
|
449 | 533 |
this.pt_list[i]['type'] = typ; |
450 | 534 |
this.pt_list[i]['cap'] = cap; |
451 | 535 |
this.pt_list[i]['ele'] = ele; |
... | ... | |
700 | 784 |
speed.y = 0; |
701 | 785 |
} |
702 | 786 |
|
787 |
|
|
788 |
|
|
703 | 789 |
canvas_set_size = function() { |
704 | 790 |
canvas.style.border = border_width+"px solid red"; |
705 | 791 |
canvas.width = window.innerWidth-2*border_width; |
... | ... | |
713 | 799 |
putImage(last.x, last.y); |
714 | 800 |
} |
715 | 801 |
|
802 |
|
|
803 |
|
|
804 |
function paramIn(e) { |
|
805 |
|
|
806 |
e = e || window.event; |
|
807 |
var relatedTarget = e.relatedTarget || e.fromElement; |
|
808 |
|
|
809 |
while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) { |
|
810 |
relatedTarget = relatedTarget.parentNode; |
|
811 |
} |
|
812 |
|
|
813 |
if (relatedTarget != adding && relatedTarget != localisation) { |
|
814 |
document.removeEventListener('keydown', keys, false); |
|
815 |
} |
|
816 |
} |
|
817 |
|
|
818 |
function paramOut(e) { |
|
819 |
|
|
820 |
e = e || window.event; |
|
821 |
var relatedTarget = e.relatedTarget || e.toElement; |
|
822 |
|
|
823 |
while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) { |
|
824 |
relatedTarget = relatedTarget.parentNode; |
|
825 |
} |
|
826 |
|
|
827 |
if (relatedTarget != adding && relatedTarget != localisation) { |
|
828 |
document.addEventListener('keydown', keys, false); |
|
829 |
} |
|
830 |
|
|
831 |
} |
|
832 |
|
|
716 | 833 |
window.onload = function() { |
834 |
|
|
835 |
localisation = document.getElementById("locadraw"); |
|
836 |
adding = document.getElementById("adding"); |
|
717 | 837 |
canvas = document.getElementById("mon-canvas"); |
718 | 838 |
cntext = canvas.getContext("2d"); |
719 | 839 |
canvas_set_size(); |
... | ... | |
746 | 866 |
elvtn_control.onclick = change_angle; |
747 | 867 |
|
748 | 868 |
change_angle(); |
749 |
|
|
869 |
loca_temp = document.getElementById("loca_button"); |
|
870 |
loca_temp.onclick = localate_point; |
|
871 |
loca_erase = document.getElementById("loca_erase"); |
|
872 |
loca_erase.onclick = erase_point; |
|
750 | 873 |
canvas.addEventListener('mousedown', onImageClick, false); |
751 |
addEventListener('keydown', keys, false); |
|
874 |
document.addEventListener('keydown', keys, false);
|
|
752 | 875 |
canvas.addEventListener('mousewheel', wheel_zoom, false); |
753 | 876 |
window.onresize = canvas_resize; |
877 |
adding.addEventListener('mouseover',paramIn,false); |
|
878 |
adding.addEventListener('mouseout',paramOut,false); |
|
879 |
localisation.addEventListener('mouseover',paramIn,false); |
|
880 |
localisation.addEventListener('mouseout',paramOut,false); |
|
881 |
|
|
754 | 882 |
}; |
js/pano_array.js | ||
---|---|---|
1 |
if (img_prefix == undefined) var img_prefix = './tiles/ttn_mediatheque/mediatheque_70'; |
|
2 |
if (to_cap == undefined) var to_cap = 0; |
|
3 |
if (to_ele == undefined) var to_ele = 0; |
|
4 |
if (cap == undefined) var cap = 0; |
|
5 |
if (elevation == undefined) var elevation = 0; |
|
6 |
if (cap_min == undefined) var cap_min = cap; |
|
7 |
if (cap_max == undefined) var cap_max = cap_min+360; |
|
8 |
if (ref_points == undefined) var ref_points = new Array(); |
|
9 |
if (image_loop == undefined) var image_loop = true; |
|
10 |
|
|
11 |
var canvas; |
|
12 |
var cntext; |
|
13 |
var point_list = new Array(); |
|
14 |
var zoom; |
|
15 |
var to_zoom; |
|
16 |
var zooms = new Array(); |
|
17 |
var prev_zm; |
|
18 |
var zm; |
|
19 |
var tile = {width:256, height:256}; |
|
20 |
var ntiles = {x:228, y:9}; |
|
21 |
var border_width = 5; |
|
22 |
var imageObj = new Array(); |
|
23 |
|
|
24 |
var last = {x:0,y:0}; |
|
25 |
var shift = {x:0,y:0}; |
|
26 |
var mouse = {x:0,y:0}; |
|
27 |
var speed = {x:0,y:0}; |
|
28 |
var canvas_pos = {x:0,y:0}; |
|
29 |
var tmt; |
|
30 |
|
|
31 |
var test = {x:0, y:0, i:100}; |
|
32 |
|
|
33 |
function nmodulo(val, div) { // pour obtenir un modulo dans l'espace des nombres naturels N. |
|
34 |
return Math.floor((val%div+div)%div); // il y a peut être plus simple, mais en attendant .... |
|
35 |
} |
|
36 |
|
|
37 |
function fmodulo(val, div) { // pour obtenir un modulo dans l'espace des nombres réels positifs. |
|
38 |
return (val%div+div)%div; // il y a peut être plus simple, mais en attendant .... |
|
39 |
} |
|
40 |
|
|
41 |
function distort_canvas(p, x, y) { |
|
42 |
if (p == 0) distort = 0; |
|
43 |
else { |
|
44 |
cntext.save(); |
|
45 |
distort++; |
|
46 |
cntext.clearRect(0, 0, canvas.width, 2*canvas.height); |
|
47 |
var ratio = (canvas.width-2*distort)/canvas.width; |
|
48 |
var shift = canvas.height/2*(1-ratio); |
|
49 |
cntext.scale(1, ratio); |
|
50 |
if (p == 1) cntext.translate(0, 0); |
|
51 |
else if (p == -1) cntext.translate(0, 0); |
|
52 |
draw_image(x, y); |
|
53 |
cntext.restore(); |
|
54 |
document.getElementById('res').innerHTML = 'distort : ' + distort + ' shift ' + shift + ' ratio : ' + ratio + '<br/>'; |
|
55 |
} |
|
56 |
} |
|
57 |
|
|
58 |
function draw_image(ox, oy) { |
|
59 |
ox = nmodulo(ox-canvas.width/2, zm.im.width); // pour placer l'origine au centre du canvas |
|
60 |
oy = Math.floor(oy-canvas.height/2); // pas de rebouclage vertical |
|
61 |
|
|
62 |
cntext.clearRect(0, 0, canvas.width, canvas.height); |
|
63 |
cntext.fillStyle = "rgba(128,128,128,0.8)"; |
|
64 |
|
|
65 |
if (canvas.height > zm.im.height) { |
|
66 |
var fy = Math.floor((oy+canvas.height/2-zm.im.height/2)/(tile.height*zm.ntiles.y))*zm.ntiles.y; |
|
67 |
if (fy < 0) fy = 0; |
|
68 |
var ly = fy + zm.ntiles.y; |
|
69 |
} else { |
|
70 |
var fy = Math.floor(oy/tile.height); |
|
71 |
var ly = Math.floor((oy+canvas.height+tile.height-1)/tile.height+1); |
|
72 |
if (fy < 0) fy = 0; |
|
73 |
if (ly > zm.ntiles.y) ly = zm.ntiles.y; |
|
74 |
} |
|
75 |
|
|
76 |
for (var j=fy; j<ly; j++) { |
|
77 |
var delta_y = (Math.floor(j/zm.ntiles.y) - Math.floor(fy/zm.ntiles.y)) * (tile.height - zm.last_tile.height); |
|
78 |
var dy = j*tile.height - oy - delta_y; |
|
79 |
var ny = j%ntiles.y; |
|
80 |
var wy = zm.tile.width; |
|
81 |
if (ny == zm.ntiles.y - 1) wy = zm.last_tile.height; |
|
82 |
|
|
83 |
var cpx = 0; |
|
84 |
var i = 0; |
|
85 |
var Nx = zm.ntiles.x; |
|
86 |
while (cpx < ox+canvas.width) { |
|
87 |
var cur_width = zm.tile.width; |
|
88 |
if (i%Nx == zm.ntiles.x-1) cur_width = zm.last_tile.width; |
|
89 |
if (cpx >= ox-cur_width) { |
|
90 |
var nx = i%Nx; |
|
91 |
load_image(nx, ny, cpx-ox, dy, ox, oy); |
|
92 |
} |
|
93 |
cpx += cur_width; |
|
94 |
i++; |
|
95 |
} |
|
96 |
} |
|
97 |
drawDecorations(ox, oy); |
|
98 |
} |
|
99 |
|
|
100 |
function load_image(nx, ny, ox, oy, x, y) { |
|
101 |
var idx = nx+'-'+ny+'-'+zoom; |
|
102 |
if (imageObj[idx] && imageObj[idx].complete) { |
|
103 |
draw_tile(idx, ox, oy); // l'image est déja en mémoire, on force le dessin sans attendre. |
|
104 |
} else { |
|
105 |
var fname = get_file_name(nx, ny, zoom); |
|
106 |
imageObj[idx] = new Image(); |
|
107 |
imageObj[idx].src = fname; |
|
108 |
var ts = zm.get_tile_size(nx, ny); |
|
109 |
cntext.fillRect(ox, oy, ts.width, ts.height); |
|
110 |
var dx = shift.x; |
|
111 |
var dy = shift.y; |
|
112 |
imageObj[idx].addEventListener('load', function() {draw_tile_del(zoom, dx, dy, idx, ox, oy, x, y)}, false); |
|
113 |
} |
|
114 |
} |
|
115 |
|
|
116 |
function draw_tile_del(ezoom, dx, dy, idx, ox, oy, x, y) { |
|
117 |
if (ezoom == zoom && dx == shift.x && dy == shift.y) { |
|
118 |
draw_tile(idx, ox, oy); |
|
119 |
drawDecorations(x, y); |
|
120 |
} |
|
121 |
} |
|
122 |
|
|
123 |
function draw_tile(idx, ox, oy) { |
|
124 |
var img = imageObj[idx]; |
|
125 |
cntext.drawImage(img, ox, oy); |
|
126 |
} |
|
127 |
|
|
128 |
function drawDecorations(ox, oy) { |
|
129 |
var wgrd = zm.im.width/360; |
|
130 |
var od = ((ox+canvas.width/2)/wgrd)%360; |
|
131 |
var el = (zm.im.height/2 - (oy+canvas.height/2))/wgrd; |
|
132 |
// document.getElementById('angle_ctrl').value = od.toFixed(2); |
|
133 |
// document.getElementById('elvtn_ctrl').value = el.toFixed(2); |
|
134 |
cntext.fillStyle = "rgba(0,128,128,0.9)"; |
|
135 |
cntext.strokeStyle = "rgb(255,255,255)"; |
|
136 |
cntext.lineWidth = 1; |
|
137 |
cntext.fillRect(canvas.width/2-5, canvas.height/2-5, 10, 10); |
|
138 |
cntext.strokeRect(canvas.width/2-5, canvas.height/2-5, 10, 10); |
|
139 |
document.getElementById('res').innerHTML = ''; |
|
140 |
for(var i = 0; i < zm.pt_list.length; i++) { |
|
141 |
var cx = nmodulo(zm.pt_list[i]['xc'] - ox, zm.im.width); |
|
142 |
var cy = zm.pt_list[i]['yc'] - oy; |
|
143 |
if (zm.pt_list[i]['lnk'] != undefined) cntext.fillStyle = "rgba(255,128,128,0.5)"; |
|
144 |
else cntext.fillStyle = "rgba(128,255,128,0.5)"; |
|
145 |
cntext.beginPath(); |
|
146 |
cntext.arc(cx, cy, 20, 0, 2*Math.PI, true); |
|
147 |
cntext.fill(); |
|
148 |
document.getElementById('res').innerHTML += 'cx : ' + cx + ' cy ' + cy + ' lnk : ' + zm.pt_list[i]['lnk'] + '<br/>'; |
|
149 |
} |
|
150 |
|
|
151 |
//cntext.font = "20pt Arial"; |
|
152 |
//cntext.fillRect(0, 0, 200, 20); |
|
153 |
//cntext.fillStyle = "rgb(255,0,0)"; |
|
154 |
//cntext.fillText(od.toFixed(2), 5, 20); |
|
155 |
//for (i=0; i<canvas.width/wgrd; i++) { |
|
156 |
//cntext.strokeRect(i*wgrd, 0, wgrd, 20); |
|
157 |
//} |
|
158 |
} |
|
159 |
|
|
160 |
function get_file_name(x, y, z) { // recherche du fichier correspondant au zoom et à la position |
|
161 |
var prm = [z, x, y]; |
|
162 |
var fname = img_prefix; |
|
163 |
for (var i = 0; i < prm.length; i++) { |
|
164 |
fname += '_'; |
|
165 |
if (prm[i] < 10) fname += '00'; |
|
166 |
else if (prm[i] < 100) fname += '0'; |
|
167 |
fname += prm[i]; |
|
168 |
} |
|
169 |
fname += '.jpg'; |
|
170 |
return fname; |
|
171 |
} |
|
172 |
|
|
173 |
function keys(key) { |
|
174 |
event.preventDefault(); |
|
175 |
event.stopPropagation(); |
|
176 |
if (!key) { |
|
177 |
key = event; |
|
178 |
key.which = key.keyCode; |
|
179 |
} |
|
180 |
evt = key || event; |
|
181 |
// alert(key); |
|
182 |
// if (!evt.shiftKey) return; |
|
183 |
switch (key.which) { |
|
184 |
case 36: // home |
|
185 |
test.x=0; |
|
186 |
test.y=0; |
|
187 |
putImage(test.x, test.y); |
|
188 |
return; |
|
189 |
case 66: // b |
|
190 |
alert(key.pageX); |
|
191 |
test.x=tile.width*(ntiles.x-3); |
|
192 |
test.y=0; |
|
193 |
putImage(test.x, test.y); |
|
194 |
return; |
|
195 |
case 67: // c |
|
196 |
test.x=0; |
|
197 |
test.y=tile.height*(ntiles.y-3); |
|
198 |
putImage(test.x, test.y); |
|
199 |
return; |
|
200 |
case 35: // end |
|
201 |
test.x=tile.width*(ntiles.x-3); |
|
202 |
test.y=tile.height*(ntiles.y-3); |
|
203 |
putImage(test.x, test.y); |
|
204 |
return; |
|
205 |
case 39: // left |
|
206 |
test.x+=test.i; |
|
207 |
putImage(test.x, test.y); |
|
208 |
return; |
|
209 |
case 40: // up |
|
210 |
test.y+=test.i; |
|
211 |
putImage(test.x, test.y); |
|
212 |
return; |
|
213 |
case 37: // right |
|
214 |
test.x-=test.i; |
|
215 |
putImage(test.x, test.y); |
|
216 |
return; |
|
217 |
case 38: // down |
|
218 |
test.y-=test.i; |
|
219 |
putImage(test.x, test.y); |
|
220 |
return; |
|
221 |
case 33: // pageup |
|
222 |
test.y=0; |
|
223 |
putImage(test.x, test.y); |
|
224 |
return; |
|
225 |
case 34: // pagedown |
|
226 |
test.y=tile.height*(ntiles.y-3); |
|
227 |
putImage(test.x, test.y); |
|
228 |
return; |
|
229 |
default: |
|
230 |
//alert(key.which) |
|
231 |
return; |
|
232 |
} |
|
233 |
} |
|
234 |
|
|
235 |
function onImageClick(e) { |
|
236 |
shift.x = last.x; |
|
237 |
shift.y = last.y; |
|
238 |
speed.x = 0; |
|
239 |
speed.y = 0; |
|
240 |
mouse.x = e.pageX; |
|
241 |
mouse.y = e.pageY; |
|
242 |
clearTimeout(tmt); //arrêt de l'éffet eventuel d'amorti en cours. |
|
243 |
canvas.addEventListener('mousemove', stickImage, false); |
|
244 |
canvas.addEventListener('mouseup', launchImage, false); |
|
245 |
//canvas.addEventListener('mouseout', launchImage, false); |
|
246 |
canvas.style.cursor='move'; |
|
247 |
//document.onmousemove = stickImage; |
|
248 |
document.onmouseup = launchImage; |
|
249 |
hide_links(); |
|
250 |
} |
|
251 |
|
|
252 |
|
|
253 |
function stickImage(e) { |
|
254 |
var xs = mouse.x - e.pageX + shift.x; |
|
255 |
var ys = mouse.y - e.pageY + shift.y; |
|
256 |
speed.x = xs - last.x; //mémorisation des vitesses horizontales |
|
257 |
speed.y = ys - last.y; //et verticales lors de ce déplacement |
|
258 |
putImage(xs, ys); |
|
259 |
} |
|
260 |
|
|
261 |
function launchImage(e) { |
|
262 |
distort_canvas(0); |
|
263 |
canvas.removeEventListener('mousemove', stickImage, false); |
|
264 |
show_links(); |
|
265 |
//document.onmousemove = null; |
|
266 |
shift.x = e.pageX - mouse.x + shift.x; |
|
267 |
shift.y = e.pageY - mouse.y + shift.y; |
|
268 |
tmt = setTimeout(inertialImage, 100); |
|
269 |
} |
|
270 |
|
|
271 |
function putImage(x, y) { // est destiné à permettre l'effet d'amortissement par la mémorisation de la position courante. |
|
272 |
if (!zm.is_updated) return; |
|
273 |
if (x >= zm.im.width) { // rebouclage horizontal |
|
274 |
shift.x -= zm.im.width; |
|
275 |
x -= zm.im.width; |
|
276 |
} else if (x < 0) { |
|
277 |
shift.x += zm.im.width; |
|
278 |
x += zm.im.width; |
|
279 |
} |
|
280 |
if (y >= zm.im.height) { // pas de rebouclage vertical mais blocage |
|
281 |
//distort_canvas(1, x, y); |
|
282 |
shift.y = zm.im.height-1; |
|
283 |
y = zm.im.height-1; |
|
284 |
} else if (y < 0) { |
|
285 |
//distort_canvas(-1, x, y); |
|
286 |
shift.y = 0; |
|
287 |
y = 0; |
|
288 |
} |
|
289 |
|
|
290 |
draw_image(x, y); |
|
291 |
last.x = x; |
|
292 |
last.y = y; |
|
293 |
} |
|
294 |
|
|
295 |
function inertialImage() { |
|
296 |
speed.x *= 0.9; |
|
297 |
speed.y *= 0.9; |
|
298 |
if (Math.abs(speed.x) > 2 || Math.abs(speed.y) > 2) { |
|
299 |
putImage(last.x+speed.x, last.y+speed.y); |
|
300 |
tmt = setTimeout(inertialImage, 100); |
|
301 |
} |
|
302 |
} |
|
303 |
|
|
304 |
function tri_ref_points(v1, v2) { |
|
305 |
return v1['x'] - v2['x']; |
|
306 |
} |
|
307 |
|
|
308 |
|
|
309 |
|
|
310 |
function tzoom(zv) { |
|
311 |
this.ref_pixels = new Array; |
|
312 |
this.value = zv; |
|
313 |
this.ntiles = {x:0,y:0}; |
|
314 |
this.tile = {width:0,height:0}; |
|
315 |
this.last_tile = {width:0,height:0}; |
|
316 |
this.max_tile = {width:0,height:0}; |
|
317 |
this.im = {width:0,height:0}; |
|
318 |
this.pt_list = new Array(); |
|
319 |
this.is_updated = false; |
|
320 |
|
|
321 |
this.refresh = function() { |
|
322 |
this.im.visible_width = this.tile.width*(this.ntiles.x-1)+this.last_tile.width; |
|
323 |
this.is_updated = true; |
|
324 |
|
|
325 |
this.im.width = this.im.visible_width; |
|
326 |
this.im.height = this.tile.height*(this.ntiles.y-1)+this.last_tile.height; |
|
327 |
if (this.last_tile.width > this.tile.width) this.max_tile.width = this.im.last_tile.width; |
|
328 |
else this.max_tile.width = this.tile.width; |
|
329 |
if (this.last_tile.height > this.tile.height) this.max_tile.height = this.im.last_tile.height; |
|
330 |
else this.max_tile.height = this.tile.height; |
|
331 |
|
|
332 |
this.ref_pixels[0] = new Array(); // Attention il faut compter un intervalle de plus ! |
|
333 |
ord_pts = new Array(); |
|
334 |
i=0; |
|
335 |
for(var label in ref_points) { |
|
336 |
ord_pts[i] = ref_points[label] |
|
337 |
} |
|
338 |
ord_pts = ord_pts.sort(tri_ref_points); |
|
339 |
|
|
340 |
for (var i=0; i < ord_pts.length; i++) { |
|
341 |
this.ref_pixels[i+1] = new Array(); |
|
342 |
if (i != ord_pts.length-1) { |
|
343 |
this.ref_pixels[i+1]['ratio_x'] = (ord_pts[i+1]['x'] - ord_pts[i]['x'])/fmodulo(ord_pts[i+1]['cap'] - ord_pts[i]['cap'], 360)*this.im.width; |
|
344 |
this.ref_pixels[i+1]['ratio_y'] = (ord_pts[i+1]['y'] - ord_pts[i]['y'])/fmodulo(ord_pts[i+1]['ele'] - ord_pts[i]['ele'], 360); |
|
345 |
} |
|
346 |
this.ref_pixels[i+1]['x'] = Math.floor(ord_pts[i]['x']*this.im.width); |
|
347 |
this.ref_pixels[i+1]['cap'] = ord_pts[i]['cap']; |
|
348 |
this.ref_pixels[i+1]['y'] = Math.floor(ord_pts[i]['y']*this.im.height); |
|
349 |
this.ref_pixels[i+1]['ele'] = ord_pts[i]['ele']; |
|
350 |
} |
|
351 |
if (image_loop == true) { |
|
352 |
var dpix = this.im.width; |
|
353 |
var dangle = 360; |
|
354 |
if (ord_pts.length > 1) { |
|
355 |
dpix = zm.im.width - this.ref_pixels[this.ref_pixels.length-1]['x'] + this.ref_pixels[1]['x']; |
|
356 |
dangle = fmodulo(this.ref_pixels[1]['cap'] - this.ref_pixels[this.ref_pixels.length-1]['cap'], 360); |
|
357 |
} |
|
358 |
this.ref_pixels[0]['ratio_x'] = dpix/dangle; |
|
359 |
this.ref_pixels[ord_pts.length]['ratio_x'] = this.ref_pixels[0]['ratio_x']; |
|
360 |
this.ref_pixels[ord_pts.length]['ratio_y'] = this.ref_pixels[0]['ratio_y']; |
|
361 |
dpix = this.im.width - this.ref_pixels[ord_pts.length]['x']; |
|
362 |
this.ref_pixels[0]['cap'] = this.ref_pixels[ord_pts.length]['cap'] + dpix / this.ref_pixels[0]['ratio_x']; |
|
363 |
} else { |
|
364 |
this.ref_pixels[0]['ratio_x'] = this.ref_pixels[1]['ratio_x']; |
|
365 |
this.ref_pixels[ord_pts.length]['ratio_x'] = this.ref_pixels[ord_pts.length-1]['ratio_x']; |
|
366 |
this.ref_pixels[0]['ratio_y'] = this.ref_pixels[1]['ratio_y']; |
|
367 |
this.ref_pixels[ord_pts.length]['ratio_y'] = this.ref_pixels[ord_pts.length-1]['ratio_y']; |
|
368 |
this.ref_pixels[0]['cap'] = this.ref_pixels[1]['cap'] - this.ref_pixels[1]['x'] / this.ref_pixels[1]['ratio_x']; |
|
369 |
} |
|
370 |
this.ref_pixels[0]['x'] = 0; |
|
371 |
this.ref_pixels[0]['y'] = 0; |
|
372 |
this.ref_pixels[0]['ele'] = 0; |
|
373 |
|
|
374 |
|
|
375 |
for (var i=0; i<point_list.length; i++) { |
|
376 |
this.pt_list[i] = new Array(); |
|
377 |
this.pt_list[i]['angle'] = point_list[i][2]; |
|
378 |
this.pt_list[i]['label'] = point_list[i][0]; |
|
379 |
this.pt_list[i]['xc'] = Math.floor(this.get_pxx(point_list[i][2], 360)); |
|
380 |
// var tmp = fmodulo(point_list[i][2], 360); |
|
381 |
// this.pt_list[i]['xc'] = Math.floor(tmp * this.im.width/360); |
|
382 |
this.pt_list[i]['yc'] = Math.floor(this.im.height/2 - (point_list[i][3] + elevation) * this.im.width/360); |
|
383 |
if (point_list[i][4] != '') this.pt_list[i]['lnk'] = point_list[i][4]+'&to_zoom='+zv; |
|
384 |
} |
|
385 |
} |
|
386 |
|
|
387 |
this.get_tile_size = function(nx, ny) { |
|
388 |
var res = {width:0, height:0}; |
|
389 |
if (nx == this.ntiles.x-1) res.width = this.last_tile.width; |
|
390 |
else res.width = this.tile.width; |
|
391 |
if (ny == this.ntiles.y-1) res.height = this.last_tile.height; |
|
392 |
else res.height = this.tile.height; |
|
393 |
return res; |
|
394 |
} |
|
395 |
|
|
396 |
this.get_cap = function(px) { // recherche du cap à partir d'un pixel. |
|
397 |
for (var i=0; i < this.ref_pixels.length; i++) { |
|
398 |
if (i == this.ref_pixels.length - 1 || px < this.ref_pixels[i+1]['x']) { |
|
399 |
return fmodulo(this.ref_pixels[i]['cap']+(px-this.ref_pixels[i]['x'])/this.ref_pixels[i]['ratio_x'], 360); |
|
400 |
} |
|
401 |
} |
|
402 |
} |
|
403 |
|
|
404 |
this.get_pxx = function(cap) { // recherche du pixel à partir d'un cap. |
|
405 |
var dcap = fmodulo(cap-this.ref_pixels[0]['cap'], 360); |
|
406 |
for (var i=0; i < this.ref_pixels.length; i++) { |
|
407 |
if (i == this.ref_pixels.length - 1 || dcap < fmodulo(this.ref_pixels[i+1]['cap']-this.ref_pixels[0]['cap'], 360)) { |
|
408 |
return this.ref_pixels[i]['x'] + this.ref_pixels[i]['ratio_x']*fmodulo(cap - this.ref_pixels[i]['cap'], 360); |
|
409 |
} |
|
410 |
} |
|
411 |
} |
|
412 |
} |
|
413 |
|
|
414 |
function wheel_zoom (event) { |
|
415 |
var zshift = {x:0, y:0}; |
|
416 |
if (event.pageX != undefined && event.pageX != undefined) { |
|
417 |
zshift.x = event.pageX-canvas.width/2-canvas_pos.x; |
|
418 |
zshift.y = event.pageY-canvas.height/2-canvas_pos.y; |
|
419 |
} |
|
420 |
event.preventDefault(); |
|
421 |
if (event.wheelDelta < 0 && zoom_control.value < zoom_control.max) { |
|
422 |
zoom_control.value++; |
|
423 |
change_zoom(zshift.x, zshift.y); |
|
424 |
} else if (event.wheelDelta > 0 && zoom_control.value > zoom_control.min) { |
|
425 |
zoom_control.value--; |
|
426 |
change_zoom(zshift.x, zshift.y); |
|
427 |
} |
|
428 |
} |
|
429 |
|
|
430 |
function change_zoom(shx, shy) { |
|
431 |
var zoom_control = document.getElementById("zoom_ctrl"); |
|
432 |
var v = zoom_control.value; |
|
433 |
|
|
434 |
prev_zm = zm; |
|
435 |
|
|
436 |
if (zooms[v]) { |
|
437 |
if (!zooms[v].is_updated) zooms[v].refresh(); |
|
438 |
} else { |
|
439 |
zooms[v] = new tzoom(v); |
|
440 |
} |
|
441 |
|
|
442 |
if (zooms[v].is_updated) { |
|
443 |
if (shx == undefined || shy == undefined) { |
|
444 |
shx=0; |
|
445 |
shy=0; |
|
446 |
} |
|
447 |
zm = zooms[v]; |
|
448 |
var px = (last.x+shx)*zm.im.width/prev_zm.im.width - shx; |
|
449 |
var py = (last.y+shy)*zm.im.height/prev_zm.im.height - shy; |
|
450 |
if (py < zm.im.height && py >= 0) { |
|
451 |
zoom = zm.value; |
|
452 |
tile = zm.tile; |
|
453 |
ntiles = zm.ntiles; |
|
454 |
putImage(px, py); |
|
455 |
} else { |
|
456 |
zm = prev_zm; |
|
457 |
zoom_control.value = zm.value; |
|
458 |
} |
|
459 |
} |
|
460 |
} |
|
461 |
|
|
462 |
function change_angle() { |
|
463 |
var elvtn_control = document.getElementById('elvtn_ctrl'); |
|
464 |
var angle_control = document.getElementById('angle_ctrl'); |
|
465 |
var pos_x = zm.im.width*angle_control.value/360; |
|
466 |
var pos_y = Math.floor(zm.im.height/2 - zm.im.width*elvtn_control.value/360); |
|
467 |
putImage(pos_x, pos_y); |
|
468 |
} |
|
469 |
|
|
470 |
function check_links(e) { |
|
471 |
var mouse_x = e.pageX-canvas_pos.x; |
|
472 |
var mouse_y = e.pageY-canvas_pos.y; |
|
473 |
var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width); |
|
474 |
var pos_y = last.y + mouse_y - canvas.height/2; |
|
475 |
for(var i = 0; i < zm.pt_list.length; i++) { |
|
476 |
if (Math.sqrt((zm.pt_list[i]['xc'] - pos_x) * (zm.pt_list[i]['xc'] - pos_x) + (zm.pt_list[i]['yc'] - pos_y) * (zm.pt_list[i]['yc'] - pos_y)) < 20) { |
|
477 |
if (zm.pt_list[i]['lnk'] != undefined) window.location = zm.pt_list[i]['lnk']; |
|
478 |
break; |
|
479 |
} |
|
480 |
} |
|
481 |
} |
|
482 |
|
|
483 |
function display_links(e) { |
|
484 |
var info = document.getElementById('info'); |
|
485 |
var mouse_x = e.pageX-canvas_pos.x; |
|
486 |
var mouse_y = e.pageY-canvas_pos.y; |
|
487 |
var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width); |
|
488 |
var pos_y = last.y + mouse_y - canvas.height/2; |
|
489 |
//var cap = ((pos_x/zm.im.width)*360).toFixed(2); |
|
490 |
var cap = zm.get_cap(pos_x).toFixed(2); |
|
491 |
var elev = (((zm.im.height/2 - pos_y)/zm.im.width)*360 - elevation).toFixed(2); |
|
492 |
info.innerHTML = 'élévation :'+elev+'<br/>cap :'+cap; |
|
493 |
info.style.top = e.pageY+'px'; |
|
494 |
info.style.left = e.pageX+'px'; |
|
495 |
info.style.backgroundColor = '#FFC'; |
|
496 |
canvas.style.cursor='crosshair'; |
|
497 |
for(var i = 0; i < zm.pt_list.length; i++) { |
|
498 |
if (Math.sqrt((zm.pt_list[i]['xc'] - pos_x) * (zm.pt_list[i]['xc'] - pos_x) + (zm.pt_list[i]['yc'] - pos_y) * (zm.pt_list[i]['yc'] - pos_y)) < 20) { |
|
499 |
info.innerHTML = zm.pt_list[i]['label']; |
|
500 |
info.style.backgroundColor = '#FC8'; |
|
501 |
canvas.style.cursor='auto'; |
|
502 |
break; |
|
503 |
} |
|
504 |
} |
|
505 |
} |
|
506 |
|
|
507 |
function hide_links() { |
|
508 |
canvas.removeEventListener( "mousemove", display_links, false); |
|
509 |
var info = document.getElementById('info'); |
|
510 |
info.style.display = 'none'; |
|
511 |
} |
|
512 |
|
|
513 |
function show_links() { |
|
514 |
canvas.addEventListener( "mousemove", display_links, false); |
|
515 |
var info = document.getElementById('info'); |
|
516 |
info.style.display = 'block'; |
|
517 |
} |
|
518 |
|
|
519 |
function show_insert_point(e) { |
|
520 |
event.preventDefault(); |
|
521 |
event.stopPropagation(); |
|
522 |
var insrt = document.getElementById('insert'); |
|
523 |
document.getElementById('do-insert').onclick = function() {insert_point(insert, e.pageX-canvas_pos.x, e.pageY-canvas_pos.y)}; |
|
524 |
document.getElementById('do-cancel').onclick = function() {insert.style.display = 'none'}; |
|
525 |
insrt.style.left = e.pageX+'px'; |
|
526 |
insrt.style.top = e.pageY+'px'; |
|
527 |
insrt.style.display = 'block'; |
|
528 |
} |
|
529 |
|
|
530 |
function insert_point(el, x, y) { |
|
531 |
el.style.display = 'none'; |
|
532 |
for(var i = 0; i < zm.pt_list.length; i++) { |
|
533 |
var label = zm.pt_list[i]['label']; |
|
534 |
if(label == document.getElementById('sel_point').value) { |
|
535 |
var posx = nmodulo(last.x + x - canvas.width/2, zm.im.width)/zm.im.width; |
|
536 |
var posy = 0; |
|
537 |
var pval = {x:posx, cap:zm.pt_list[i]['angle'], y:posy, label:label}; |
|
538 |
ref_points[label] = pval; |
|
539 |
document.getElementById('res').innerHTML += zm.pt_list[i]['label'] + '. ' + posx + '=' + zm.pt_list[i]['angle'] + '<br/>'; |
|
540 |
putImage(last.x, last.y); |
|
541 |
|
|
542 |
// if (ref_points.length > 1) { |
|
543 |
// var pval0 = inserted_points[inserted_points.length-2]; |
|
544 |
// var origin = fmodulo(pval0.angle - ((pval.angle - pval0.angle)/(pval.ratio - pval0.ratio))*pval0.ratio, 360); |
|
545 |
// var end = fmodulo(pval.angle + ((pval.angle - pval0.angle)/(pval.ratio - pval0.ratio))*(1-pval.ratio), 360); |
|
546 |
// document.getElementById('res').innerHTML += 'cap_min = ' + origin + '<br/>'; |
|
547 |
// document.getElementById('res').innerHTML += 'cap_max = ' + end + '<br/>'; |
|
548 |
// } |
|
549 |
break; |
|
550 |
} |
|
551 |
} |
|
552 |
} |
|
553 |
|
|
554 |
function clean_canvas_events(e) { |
|
555 |
canvas.removeEventListener('mousemove', stickImage, false); |
|
556 |
document.getElementById('info').style.display = 'none'; |
|
557 |
speed.x = 0; |
|
558 |
speed.y = 0; |
|
559 |
} |
|
560 |
|
|
561 |
window.onload = function() { |
|
562 |
canvas = document.getElementById("mon-canvas"); |
|
563 |
canvas.style.border = border_width+"px solid red"; |
|
564 |
cntext = canvas.getContext("2d"); |
|
565 |
canvas.width = window.innerWidth-200; |
|
566 |
canvas.height = window.innerHeight-20; |
|
567 |
canvas.addEventListener("click", check_links, false); |
|
568 |
canvas_pos.x = canvas.offsetLeft+border_width; |
|
569 |
canvas_pos.y = canvas.offsetTop+border_width; |
|
570 |
canvas.addEventListener("contextmenu", show_insert_point, false); |
|
571 |
canvas.addEventListener("mouseout", clean_canvas_events, false); |
|
572 |
|
|
573 |
show_links(); |
|
574 |
|
|
575 |
var max_zoom = zooms.length - 1; |
|
576 |
zoom_control = document.getElementById("zoom_ctrl"); |
|
577 |
zoom_control.onchange = change_zoom; |
|
578 |
zoom_control.max = max_zoom; |
|
579 |
if (to_zoom == undefined || to_zoom > max_zoom) to_zoom = Math.floor(max_zoom/2); |
|
580 |
zm = zooms[to_zoom]; |
|
581 |
zoom_control.value = to_zoom; |
|
582 |
zm.refresh(); |
|
583 |
|
|
584 |
zoom = zm.value; |
|
585 |
tile = zm.tile; |
|
586 |
ntiles = zm.ntiles; |
|
587 |
|
|
588 |
angle_control = document.getElementById("angle_ctrl"); |
|
589 |
angle_control.value = to_cap; |
|
590 |
angle_control.onchange = change_angle; |
|
591 |
angle_control.onclick = change_angle; |
|
592 |
angle_control.onkeyup = change_angle; |
|
593 |
elvtn_control = document.getElementById("elvtn_ctrl"); |
|
594 |
elvtn_control.value = to_ele+elevation; |
|
595 |
elvtn_control.onchange = change_angle; |
|
596 |
elvtn_control.onclick = change_angle; |
|
597 |
elvtn_control.onkeyup = change_angle; |
|
598 |
|
|
599 |
change_angle(); |
|
600 |
|
|
601 |
canvas.addEventListener('mousedown', onImageClick, false); |
|
602 |
addEventListener('keyup', keys, false); |
|
603 |
canvas.addEventListener('mousewheel', wheel_zoom, false); |
|
604 |
}; |
js/pano_old.js | ||
---|---|---|
1 |
if (img_prefix == undefined) var img_prefix = './tiles/ttn_mediatheque/mediatheque_70'; |
|
2 |
if (to_cap == undefined) var to_cap = 0; |
|
3 |
if (to_ele == undefined) var to_ele = 0; |
|
4 |
if (cap == undefined) var cap = 0; |
|
5 |
if (elevation == undefined) var elevation = 0; |
|
6 |
if (cap_min == undefined) var cap_min = cap; |
|
7 |
if (cap_max == undefined) var cap_max = cap_min+360; |
|
8 |
|
|
9 |
var inserted_points = new Array(); |
|
10 |
var canvas; |
|
11 |
var cntext; |
|
12 |
var point_list = new Array(); |
|
13 |
var zoom; |
|
14 |
var to_zoom; |
|
15 |
var zooms = new Array(); |
|
16 |
var prev_zm; |
|
17 |
var zm; |
|
18 |
var tile = {width:256, height:256}; |
|
19 |
var ntiles = {x:228, y:9}; |
|
20 |
var border_width = 5; |
|
21 |
var imageObj = new Array(); |
|
22 |
|
|
23 |
var last = {x:0,y:0}; |
|
24 |
var shift = {x:0,y:0}; |
|
25 |
var mouse = {x:0,y:0}; |
|
26 |
var speed = {x:0,y:0}; |
|
27 |
var canvas_pos = {x:0,y:0}; |
|
28 |
var tmt; |
|
29 |
|
|
30 |
var test = {x:0, y:0, i:100}; |
|
31 |
|
|
32 |
function nmodulo(val, div) { // pour obtenir un modulo dans l'espace des nombres naturels N. |
|
33 |
return Math.floor((val%div+div)%div); // il y a peut être plus simple, mais en attendant .... |
|
34 |
} |
|
35 |
|
|
36 |
function fmodulo(val, div) { // pour obtenir un modulo dans l'espace des nombres réels positifs. |
|
37 |
return (val%div+div)%div; // il y a peut être plus simple, mais en attendant .... |
|
38 |
} |
|
39 |
|
|
40 |
function distort_canvas(p, x, y) { |
|
41 |
if (p == 0) distort = 0; |
|
42 |
else { |
|
43 |
cntext.save(); |
|
44 |
distort++; |
|
45 |
cntext.clearRect(0, 0, canvas.width, 2*canvas.height); |
|
46 |
var ratio = (canvas.width-2*distort)/canvas.width; |
|
47 |
var shift = canvas.height/2*(1-ratio); |
|
48 |
cntext.scale(1, ratio); |
|
49 |
if (p == 1) cntext.translate(0, 0); |
|
50 |
else if (p == -1) cntext.translate(0, 0); |
|
51 |
draw_image(x, y); |
|
52 |
cntext.restore(); |
|
53 |
document.getElementById('res').innerHTML = 'distort : ' + distort + ' shift ' + shift + ' ratio : ' + ratio + '<br/>'; |
|
54 |
} |
|
55 |
} |
|
56 |
|
|
57 |
function draw_image(ox, oy) { |
|
58 |
ox = nmodulo(ox-canvas.width/2, zm.im.width); // pour placer l'origine au centre du canvas |
|
59 |
var ocx = nmodulo(ox - zm.phase_pix, zm.im.width); |
|
60 |
//document.getElementById('res').innerHTML = zm.phase_pix + ' -- ' + zm.im.width + ' shift(x,y) ' + shift.x; |
|
61 |
oy = Math.floor(oy-canvas.height/2); // pas de rebouclage vertical |
|
62 |
|
|
63 |
cntext.clearRect(0, 0, canvas.width, canvas.height); |
|
64 |
cntext.fillStyle = "rgba(128,128,128,0.8)"; |
|
65 |
|
|
66 |
if (canvas.height > zm.im.height) { |
|
67 |
var fy = Math.floor((oy+canvas.height/2-zm.im.height/2)/(tile.height*zm.ntiles.y))*zm.ntiles.y; |
|
68 |
if (fy < 0) fy = 0; |
|
69 |
var ly = fy + zm.ntiles.y; |
|
70 |
} else { |
|
71 |
var fy = Math.floor(oy/tile.height); |
|
72 |
var ly = Math.floor((oy+canvas.height+tile.height-1)/tile.height+1); |
|
73 |
if (fy < 0) fy = 0; |
|
74 |
if (ly > zm.ntiles.y) ly = zm.ntiles.y; |
|
75 |
} |
|
76 |
|
|
77 |
for (var j=fy; j<ly; j++) { |
|
78 |
var delta_y = (Math.floor(j/zm.ntiles.y) - Math.floor(fy/zm.ntiles.y)) * (tile.height - zm.last_tile.height); |
|
79 |
var dy = j*tile.height - oy - delta_y; |
|
80 |
var ny = j%ntiles.y; |
|
81 |
var wy = zm.tile.width; |
|
82 |
if (ny == zm.ntiles.y - 1) wy = zm.last_tile.height; |
|
83 |
|
|
84 |
var cpx = 0; |
|
85 |
var i = 0; |
|
86 |
var Nx = zm.ntiles.x; |
|
87 |
if (zm.im.unused_width != 0) Nx++; |
|
88 |
while (cpx < ocx+canvas.width) { |
|
89 |
var cur_width = zm.tile.width; |
|
90 |
if (i%Nx == zm.ntiles.x-1) cur_width = zm.last_tile.width; |
|
91 |
else if (i%Nx == Nx-1) cur_width = zm.im.unused_width; |
|
92 |
if (cpx >= ocx-cur_width) { |
|
93 |
if (i%Nx == Nx-1 && zm.im.unused_width != 0) { |
|
94 |
cntext.fillRect(cpx-ocx, dy, zm.im.unused_width, wy); |
|
95 |
} else { |
|
96 |
var nx = i%Nx; |
|
97 |
load_image(nx, ny, cpx-ocx, dy, ox, oy); |
|
98 |
} |
|
99 |
} |
|
100 |
cpx += cur_width; |
|
101 |
i++; |
|
102 |
} |
|
103 |
} |
|
104 |
drawDecorations(ox, oy); |
|
105 |
} |
|
106 |
|
|
107 |
function load_image(nx, ny, ox, oy, x, y) { |
|
108 |
var idx = nx+'-'+ny+'-'+zoom; |
|
109 |
if (imageObj[idx] && imageObj[idx].complete) { |
|
110 |
draw_tile(idx, ox, oy); // l'image est déja en mémoire, on force le dessin sans attendre. |
|
111 |
} else { |
|
112 |
var fname = get_file_name(nx, ny, zoom); |
|
113 |
imageObj[idx] = new Image(); |
|
114 |
imageObj[idx].src = fname; |
|
115 |
var ts = zm.get_tile_size(nx, ny); |
|
116 |
cntext.fillRect(ox, oy, ts.width, ts.height); |
|
117 |
var dx = shift.x; |
|
118 |
var dy = shift.y; |
|
119 |
imageObj[idx].addEventListener('load', function() {draw_tile_del(zoom, dx, dy, idx, ox, oy, x, y)}, false); |
|
120 |
} |
|
121 |
} |
|
122 |
|
|
123 |
function draw_tile_del(ezoom, dx, dy, idx, ox, oy, x, y) { |
|
124 |
if (ezoom == zoom && dx == shift.x && dy == shift.y) { |
|
125 |
draw_tile(idx, ox, oy); |
|
126 |
drawDecorations(x, y); |
|
127 |
} |
|
128 |
} |
|
129 |
|
|
130 |
function draw_tile(idx, ox, oy) { |
|
131 |
var img = imageObj[idx]; |
|
132 |
cntext.drawImage(img, ox, oy); |
|
133 |
} |
|
134 |
|
|
135 |
function drawDecorations(ox, oy) { |
|
136 |
var wgrd = zm.im.width/360; |
|
137 |
var od = ((ox+canvas.width/2)/wgrd)%360; |
|
138 |
var el = (zm.im.height/2 - (oy+canvas.height/2))/wgrd; |
|
139 |
// document.getElementById('angle_ctrl').value = od.toFixed(2); |
|
140 |
// document.getElementById('elvtn_ctrl').value = el.toFixed(2); |
|
141 |
cntext.fillStyle = "rgba(0,128,128,0.9)"; |
|
142 |
cntext.strokeStyle = "rgb(255,255,255)"; |
|
143 |
cntext.lineWidth = 1; |
|
144 |
cntext.fillRect(canvas.width/2-5, canvas.height/2-5, 10, 10); |
|
145 |
cntext.strokeRect(canvas.width/2-5, canvas.height/2-5, 10, 10); |
|
146 |
for(var i = 0; i < zm.pt_list.length; i++) { |
|
147 |
var cx = zm.pt_list[i]['xc'] - ox; |
|
148 |
var cy = zm.pt_list[i]['yc'] - oy; |
|
149 |
if (zm.pt_list[i]['lnk'] != undefined) cntext.fillStyle = "rgba(255,128,128,0.5)"; |
|
150 |
else cntext.fillStyle = "rgba(128,255,128,0.5)"; |
|
151 |
cntext.beginPath(); |
|
152 |
cntext.arc(cx, cy, 20, 0, 2*Math.PI, true); |
|
153 |
cntext.fill(); |
|
154 |
} |
|
155 |
|
|
156 |
//cntext.font = "20pt Arial"; |
|
157 |
//cntext.fillRect(0, 0, 200, 20); |
|
158 |
//cntext.fillStyle = "rgb(255,0,0)"; |
|
159 |
//cntext.fillText(od.toFixed(2), 5, 20); |
|
160 |
//for (i=0; i<canvas.width/wgrd; i++) { |
|
161 |
//cntext.strokeRect(i*wgrd, 0, wgrd, 20); |
|
162 |
//} |
|
163 |
} |
|
164 |
|
|
165 |
function get_file_name(x, y, z) { // recherche du fichier correspondant au zoom et à la position |
|
166 |
var prm = [z, x, y]; |
|
167 |
var fname = img_prefix; |
|
168 |
for (var i = 0; i < prm.length; i++) { |
|
169 |
fname += '_'; |
|
170 |
if (prm[i] < 10) fname += '00'; |
|
171 |
else if (prm[i] < 100) fname += '0'; |
|
172 |
fname += prm[i]; |
|
173 |
} |
|
174 |
fname += '.jpg'; |
|
175 |
return fname; |
|
176 |
} |
|
177 |
|
|
178 |
function keys(key) { |
|
179 |
event.preventDefault(); |
|
180 |
event.stopPropagation(); |
|
181 |
if (!key) { |
|
182 |
key = event; |
|
183 |
key.which = key.keyCode; |
|
184 |
} |
|
185 |
evt = key || event; |
|
186 |
// alert(key); |
|
187 |
// if (!evt.shiftKey) return; |
|
188 |
switch (key.which) { |
|
189 |
case 36: // home |
|
190 |
test.x=0; |
|
191 |
test.y=0; |
|
192 |
putImage(test.x, test.y); |
|
193 |
return; |
|
194 |
case 66: // b |
|
195 |
alert(key.pageX); |
|
196 |
test.x=tile.width*(ntiles.x-3); |
|
197 |
test.y=0; |
|
198 |
putImage(test.x, test.y); |
|
199 |
return; |
|
200 |
case 67: // c |
|
201 |
test.x=0; |
|
202 |
test.y=tile.height*(ntiles.y-3); |
|
203 |
putImage(test.x, test.y); |
|
204 |
return; |
|
205 |
case 35: // end |
|
206 |
test.x=tile.width*(ntiles.x-3); |
|
207 |
test.y=tile.height*(ntiles.y-3); |
|
208 |
putImage(test.x, test.y); |
|
209 |
return; |
|
210 |
case 39: // left |
|
211 |
test.x+=test.i; |
|
212 |
putImage(test.x, test.y); |
|
213 |
return; |
|
214 |
case 40: // up |
|
215 |
test.y+=test.i; |
|
216 |
putImage(test.x, test.y); |
|
217 |
return; |
|
218 |
case 37: // right |
|
219 |
test.x-=test.i; |
|
220 |
putImage(test.x, test.y); |
|
221 |
return; |
|
222 |
case 38: // down |
|
223 |
test.y-=test.i; |
|
224 |
putImage(test.x, test.y); |
|
225 |
return; |
|
226 |
case 33: // pageup |
|
227 |
test.y=0; |
|
228 |
putImage(test.x, test.y); |
|
229 |
return; |
|
230 |
case 34: // pagedown |
|
231 |
test.y=tile.height*(ntiles.y-3); |
|
232 |
putImage(test.x, test.y); |
|
233 |
return; |
|
234 |
default: |
|
235 |
//alert(key.which) |
|
236 |
return; |
|
237 |
} |
|
238 |
} |
|
239 |
|
|
240 |
function onImageClick(e) { |
|
241 |
shift.x = last.x; |
|
242 |
shift.y = last.y; |
|
243 |
speed.x = 0; |
|
244 |
speed.y = 0; |
|
245 |
mouse.x = e.pageX; |
|
246 |
mouse.y = e.pageY; |
|
247 |
clearTimeout(tmt); //arrêt de l'éffet eventuel d'amorti en cours. |
|
248 |
canvas.addEventListener('mousemove', stickImage, false); |
|
249 |
canvas.addEventListener('mouseup', launchImage, false); |
|
250 |
//canvas.addEventListener('mouseout', launchImage, false); |
|
251 |
canvas.style.cursor='move'; |
|
252 |
//document.onmousemove = stickImage; |
|
253 |
document.onmouseup = launchImage; |
|
254 |
hide_links(); |
|
255 |
} |
|
256 |
|