déplacement latéral et horizontal [Résolu]

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

Citation:

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.

16/06/2011, 09h14	#1
sylvain230 Sylvain Poitiers Inscription : mai 2008 Messages : 229 Détails du profil Informations personnelles : Nom : Sylvain Âge : 25 Localisation : France Informations professionnelles : Activité : Poitiers Secteur : Industrie Pharmaceutique Informations forums : Inscription : mai 2008 Messages : 229 Points : -3 Points : -3	déplacement latéral et horizontal 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
	00

16/06/2011, 11h39	#3
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	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 ???! ) __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

16/06/2011, 11h40	#4
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	merci Romain de civiliser quelque peu ma pensée __________________ On ne mord pas, on manifeste seulement notre tristesse face à des exposés de situations qui défient notre entendement binaire.
	00

16/06/2011, 13h53	#9
sylvain230 Sylvain Poitiers Inscription : mai 2008 Messages : 229 Détails du profil Informations personnelles : Nom : Sylvain Âge : 25 Localisation : France Informations professionnelles : Activité : Poitiers Secteur : Industrie Pharmaceutique Informations forums : Inscription : mai 2008 Messages : 229 Points : -3 Points : -3	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
	00

16/06/2011, 13h55	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	la même qu'entre IE et ffx ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/06/2011, 12h02	#6
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	ça rappelle le merveilleux clipper de Bovino, non? http://www.developpez.net/forums/d10...e-google-maps/
	00

16/06/2011, 12h07	#7
sylvain230 Sylvain Poitiers Inscription : mai 2008 Messages : 229 Détails du profil Informations personnelles : Nom : Sylvain Âge : 25 Localisation : France Informations professionnelles : Activité : Poitiers Secteur : Industrie Pharmaceutique Informations forums : Inscription : mai 2008 Messages : 229 Points : -3 Points : -3	Oui c'est un truc comme ca merci
	00

16/06/2011, 14h04	#12
sylvain230 Sylvain Poitiers Inscription : mai 2008 Messages : 229 Détails du profil Informations personnelles : Nom : Sylvain Âge : 25 Localisation : France Informations professionnelles : Activité : Poitiers Secteur : Industrie Pharmaceutique Informations forums : Inscription : mai 2008 Messages : 229 Points : -3 Points : -3	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email