déplacement latéral et horizontal

Version imprimable

16/06/2011, 09h14
sylvain230

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 :)
16/06/2011, 11h32
javatwister

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!
16/06/2011, 11h39
RomainVALERI

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 ! :nono:

(tu veux "te déplacer sur la page" ? tu fais partie de la page ???! :aie:)
16/06/2011, 11h40
javatwister

merci Romain de civiliser quelque peu ma pensée :mrgreen:

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:

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 !!

16/06/2011, 12h02
javatwister

ça rappelle le merveilleux clipper de Bovino, non?

http://www.developpez.net/forums/d10...e-google-maps/
16/06/2011, 12h07
sylvain230

Oui c'est un truc comme ca merci :)

en simplifiant, ça marche ça?

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

Code:

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>

16/06/2011, 13h53
sylvain230

Attend je test tout ca et j'essaie de comprendre :) mais j'ai peut être une question bête.

Que signifie cette ligne ?

Code:

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

et quelle est la différence entre event et e ? :s
16/06/2011, 13h55
SpaceFrog

la même qu'entre IE et ffx ?
16/06/2011, 14h02
javatwister
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:

1 2 3 ev = e || event; evx=ev.clientX; evy=ev.clientY;
16/06/2011, 14h04
sylvain230

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.