Manipulation de giga image

**iparcos** · 03/11/2015, 11h19

Bonjour à tous,

Je suis en train de créer un jeu d'aventure style point and clique sur navigateur. Il n'est pas question de faire de l'animation dans des décors, mais plus de faire vivre de nombreuses aventures sur des cartes et plans de grandes tailles et très détaillés.

Pour cela je voudrais afficher des images de grande taille (6000x3000px) dans le navigateur avec un zoom sur la molette de souris. Au zoom mini, l'image s'afficherait en plein écran. Pour les zooms intermédiaires à maximum (deux ou trois niveaux), on pourrait faire des cliqués-glissés sur l'image. Il faut bien penser qu'après, il faut afficher sur l'image des sprites qui eux ne changeraient pas de taille pendant un zoom et garderait toujours la même position sur la carte, quelle que soit sa taille pour indiquer des lieux.

Je n'ai pas d'expérience en javascript et html5 qui est la seule manière pour créer ce genre de fonctionnalité. Il doit exister un jquery qui propose ce genre de fonctionnalité. Quelqu'un en connaîtrait un qui serait adapté à cela.
Je ne pense pas qu'utiliser un système style google map serait la bonne solution.

Merci d'avance.

**SpaceFrog** · 03/11/2015, 11h53

Il existe en effet quelques plugin jquery pour gérer ce genre de cartes
http://www.jqueryrain.com/example/jquery-map/page/5/

**iparcos** · 04/11/2015, 15h59

Merci,

Grace à cette piste, j'ai trouvé ce jQuery.

http://www.jqueryrain.com/?tD0QO4eg

Mais je n'arrive pas à le faire fonctionné.

Par contre j'ai réussi à intégrer celui-ci.

http://bl.ocks.org/sgruhier/1d692762f8328a2c9957

Maintenant il ne reste plus qu'à trouver comment remplacer le cercle bleu par une image et créer des bornes au zoom et déplacement.

Je ne sais toujours pas si cela est adapté.

**SylvainPV** · 04/11/2015, 19h48

Sans un minimum de connaissances c'est peine perdue. Ton second lien bl.ocks.org utilise d3 basée sur SVG, avec V comme vectoriel. Donc pas d'image bitmap...

**melka one** · 05/11/2015, 13h12

jour

un truc dans ce genre ?

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{
background-color:gray;
}
#conte{
cursor:zoom-in;
height:400px;
width:500px;
overflow:hidden;
position:relative;
top:20px;
background-color:white;
margin:auto;
border:2px solid;
border-color:black;
}
 
#divim{
height:400px;background:red;position:relative;left:0px;top:0px
}
</style>
<script>
 
function dirizoom(e){
 
		e.preventDefault();
 
		var delta = e.wheelDelta ? e.wheelDelta/120 : -e.detail/3;
 
		var val= delta< 0 ? -0.15 : 0.15;
 
		var elem=document.getElementById('divim');
 
		var position = elem.getBoundingClientRect();
 
		var dirle=(elem.offsetWidth/2)-(e.clientX-position.left);
		var dirto=(elem.offsetHeight/2)-(e.clientY-position.top);
		var lf=elem.offsetWidth;
		var rf=elem.offsetHeight;
		elem.style.width=lf+(lf*val)+'px';
		elem.style.height=rf+(rf*val)+'px';
		elem.style.left=elem.offsetLeft-((elem.offsetWidth-lf)/2)+(dirle*val)+'px';
		elem.style.top=elem.offsetTop-((elem.offsetHeight-rf)/2)+(dirto*val)+'px';
}
 
function zoominit(){
 
		var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel')
 
		document.getElementById('divim').addEventListener(elmouse,dirizoom, false);
}
 
addEventListener('load',zoominit,false);
</script>
</head>
<body>
 
<div id='conte'>
<img src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6-960x641.jpg" id='divim' />
</div>
 
</body>
</html>

**iparcos** · 05/11/2015, 14h15

Je suis là pour apprendre.

Donc avec SVG, on ne peut pas mettre d'image. Il faut que je m'oriente sur autre chose. Merci Sylvain.

Le truc du genre de ce que propose melka one a certaines bases intéressantes. Merci. Mais il n'y a que le zoom et pas de cliquer-glisser de l'image. Aussi, il y a un problème, car le zoom est influencé par la position du curseur de la souris. Que l'on ne puisse zoomer que quand la sourie est sur l'image pas de problème, mais le zoom déplacement en même temps la position de l'image. Et au bout d'un certain nombre de manipulations, on arrive même à faire sortir l'image du cadre.

J'ai essayé de modifier le code en remplaçant la taille du cadre par 100% pour être en plein écran et cela se comporte bizarrement.

Mais cela avance.

Manipulation de giga image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager