déplacement latéral et horizontal

**sylvain230** · 16/06/2011, 09h14

Bonjour,

Je voudrais me déplacer sur une page web sur les axes x et y avec la souris en tenant le clic gauche.
Si je me déplace à gauche je vais à gauche, si je me déplace en bas, je vais en bas etc ...

Je ne vois pas trop comment faire :S

Pouvez vous m'aider ?
Merci d'avance

**javatwister** · 16/06/2011, 11h32

Envoyé par sylvain230

Bonjour,

Je voudrais me déplacer sur une page web sur les axes x et y avec la souris en tenant le clic gauche.
Si je me déplace à gauche je vais à gauche, si je me déplace en bas, je vais en bas etc ...

eh bien voilà: tu as la réponse!

**RomainVALERI** · 16/06/2011, 11h39

Tu veux mettre en place un drag and drop sur des éléments de ta page ?

ou autre chose ? Je comprends l'ironie de javatwister... on ne comprend pas ton problème, il faut faire un effort !

(tu veux "te déplacer sur la page" ? tu fais partie de la page ???!

)

**javatwister** · 16/06/2011, 11h40

merci Romain de civiliser quelque peu ma pensée

**sylvain230** · 16/06/2011, 11h49

Ok bon je m'explique lol. J'avoue que le problème est un peu flou dans ma tête donc forcément, c'est pas facile à expliquer.

J'ai une scène 3D dans le navigateur en utilisant WebGL et je voudrais me déplacer en 2D dedans de façon horizontale et verticale.

Cette action se ferait de la manière suivante :

Partout sur l'écran, je voudrais utiliser le clic gauche de la souris et me déplacer un peu comme un logiciel de rendu 3D.

Alors oui cela ressemble à un drag and drop mais pas seulement cela. En effet, si je déplace la souris dans un axe de 45° avec comme direction un vecteur 2D (0.5, -0.5), je voudrais me déplacer dans la direction de ce vecteur.

Voici mon code. Il ne fonctionne pas correctement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
if(lastMouseX > 0 && lastMouseY > 0) {
 
            camera.position.x += lastMouseX/30;
            camera.target.position.x += lastMouseX/30;
 
            camera.position.y += lastMouseY/30;
            camera.target.position.y += lastMouseY/30;
 
        } else if(lastMouseX < 0 && lastMouseY < 0) {
 
            camera.position.x -= lastMouseX/30;
            camera.target.position.x -= lastMouseX/30;
 
            camera.position.y -= lastMouseY/30;
            camera.target.position.y -= lastMouseY/30;
 
        } else if(lastMouseX < 0 && lastMouseY < 0) {
 
            camera.position.x -= lastMouseX/30;
            camera.target.position.x -= lastMouseX/30;
 
            camera.position.y -= lastMouseY/30;
            camera.target.position.y -= lastMouseY/30;
 
        } else if(lastMouseX > 0 && lastMouseY < 0) {
 
            camera.position.x += lastMouseX/30;
            camera.target.position.x += lastMouseX/30;
 
            camera.position.y -= lastMouseY/30;
            camera.target.position.y -= lastMouseY/30;
 
        } else if(lastMouseX < 0 && lastMouseY > 0) {
 
            camera.position.x -= lastMouseX/30;
            camera.target.position.x -= lastMouseX/30;
 
            camera.position.y += lastMouseY/30;
            camera.target.position.y += lastMouseY/30;
 
        }

Si je ne suis toujours pas assez clair, n'hésitez pas à me flageler lol !!

**javatwister** · 16/06/2011, 12h02

ça rappelle le merveilleux clipper de Bovino, non?

http://www.developpez.net/forums/d10...e-google-maps/

**sylvain230** · 16/06/2011, 12h07

Oui c'est un truc comme ca merci

**javatwister** · 16/06/2011, 12h31

en simplifiant, ça marche ça?

http://javatwist.imingo.net/truc_un_peu_flou.htm

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>...</title>
<style type="text/css">
body {margin:0px}
#cadre {width:200px;height:200px;position:absolute;top:200px;left:200px;border:2px solid black;overflow:hidden}
#cadre img {width:2000px;position:absolute}
</style>
 
</head>
<body>
 
<div id="cadre">
	<img src="http://www.developpez.net/template/images/logo.gif" alt="Dev" />
</div>
 
<script type="text/javascript">
 
var im=document.images[0];
im.style.left=im.style.top="0px";
 
var evx, evy, posx, posy, capt;
 
im.ondragstart=function(){return false}
im.onmousedown=function(e){
	capt=this;	
	evx=!e ? event.clientX : e.clientX;
	evy=!e ? event.clientY : e.clientY;
	posx=evx-parseInt(this.style.left);
	posy=evy-parseInt(this.style.top);
}
 
im.onmouseup=im.onmouseout=function(){
	capt=false
}
 
document.onmousemove=function(e){
	if(capt){
		evx=!e ? event.clientX : e.clientX;
		evy=!e ? event.clientY : e.clientY;
		capt.style.left=evx-posx+"px";
		capt.style.top=evy-posy+"px";
	}
}
 
</script>
 
</body>
</html>

**sylvain230** · 16/06/2011, 13h53

Attend je test tout ca et j'essaie de comprendre

mais j'ai peut être une question bête.

Que signifie cette ligne ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 evx!=event ? event.clientX: e.clientX;

et quelle est la différence entre event et e ? :s

**SpaceFrog** · 16/06/2011, 13h55

la même qu'entre IE et ffx ?

**javatwister** · 16/06/2011, 14h02

attention, tu t'es planté en recopiant la ligne;

bref, ça permet de savoir si le navigateur transmet automatiquement à la fonction l'événement déclencheur; si oui, on est sur Fox et compagnie, sinon, on précise explicitement qu'on recherche l'event courant et ça permet à IE de fonctionner;

tu peux aussi faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
ev = e || event;
evx=ev.clientX;
evy=ev.clientY;

**sylvain230** · 16/06/2011, 14h04

a d'accord merci je ne connaissais pas cette différence.
Je préfère privilégier les écritures moins lourdes pour l'instant. Peut être que je manque d'expérience.

Le truc c'est que WebGL fonctionne uniquement sous Chrome et FF4.

déplacement latéral et horizontal

JavaScript

Discussions similaires

Partager

Partager