Rogner transparence image

Version imprimable

13/04/2014, 15h52
pipitt05000

3 pièce(s) jointe(s)

Rogner transparence image

Bonjour ! Aujourd'hui je crée un jeu Online de construction de ville et tout le bazar.
J'en suis à un stade bien avancé de mon jeu, à un (gros) détail près... Les contour de l'image !

Je m'explique: tout est un problème de "cadre" ! :p

Tout d'abord, j'ai une image (d'exemple) tel que celle-ci:
Pièce jointe 142826
(Le contour est naturellement invisible...)

On sait donc que cette image à un cadre:
Pièce jointe 142827

Et donc, ce que j'aimerais (par toute les méthodes possible comme Flash, CSS, jquery ou autre chose), c'est un cadre comme celui la:
Pièce jointe 142828

Tout ça est une histoire d'image chevauchante, j'aimerais cliquer sur celle de derrière sans prendre en compte le "cadre"... :D

Quelqu'un de brave aurait une solution ? ;)
13/04/2014, 16h02
NoSmoking

Bonjour,
regarde peut être du coté de l'attribut usemap des images.
:fleche: http://cyberzoide.developpez.com/html/map.php3
13/04/2014, 16h07
pipitt05000

Merci beaucoup ! :D Je vais voir ça...
13/04/2014, 16h51
pipitt05000

En faite, c'est beaucoup trop compliqué vu la tronche de l'image...

Il n'y aurait pas une autre option afin de pouvoir cliquer sur l'élément derrière la transparence de l'image ?
14/04/2014, 09h42
thelvin

Avec des <canvas>. Au clic, tu regardes sur quel pixel du canvas tu as cliqué, puis tu regardes les données de ce pixel. Si le canal transparence est à 0 (ou à pas beaucoup, comme tu veux,) c'est un pixel transparent et il faut traverser l'image.

Naturellement ça n'a rien à voir avec CSS

Si les formes géométriques sont simples, tu peux t'en sortir en jouant sur un empilement de zone, celle du dessus masquant celle du dessous.

exemple de simulation simple

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>USEMAP</title>
<style>
#div_image{
  position:relative;
  width:216px;
  height:90px;
}
#div_image img{
  border:none;
  position:relative;
}
#centre_image{
  border:1px dotted #00f;
  position:absolute;
  top:20px;
  left:50px;
  width:116px;
  height:50px;
}
</style>
</head>
<body>
<div id="div_image">
  <div id="centre_image"></div>
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo" usemap="#map">
</div>
<map name="map">
  <area shape="rect" coords="50,20,166,70" onclick="alert('centre image')">
  <area shape="rect" coords="0,0,216,90" onclick="alert('out centre image')">
</map>
</body>
</html>

15/04/2014, 20h34
pipitt05000

Citation:

Envoyé par thelvin

Avec des <canvas>. Au clic, tu regardes sur quel pixel du canvas tu as cliqué, puis tu regardes les données de ce pixel. Si le canal transparence est à 0 (ou à pas beaucoup, comme tu veux,) c'est un pixel transparent et il faut traverser l'image.

Naturellement ça n'a rien à voir avec CSS

Ce que tu es en train de me dire c'est qu'il est donc possible de cliquer au travers de la transparence d'une image ? O.o
15/04/2014, 23h57
thelvin

Plus ou moins, en contournant le problème. Si tu insères cette image dans un <canvas> il devient possible de lire les données RGBA de ses pixels. Et donc de vérifier si ses pixels sont transparents ou non. Lorsqu'il y a clic à un endroit sur ce <canvas>, il est donc possible de regarder à quelle image ça correspond, en étudiant de la plus au-dessus à la plus en-dessous, si oui ou non le pixel est opaque ou transparent, et dans le cas de la transparence, passer à l'image suivante.

Ça demande toute une mécanique JavaScript, mais ça marche. Un peu le principe des jeux HTML5.