Gestion des Z-index

Version imprimable

07/07/2008, 19h36
joubizo

Gestion des Z-index

Bonjour à tous,

je vais essayer d'être clair,

Objectif:
Z-index identique, comment savoir lequel est au dessus de l'autre

Principe de l'application :
j'ai des éléments graphiques type panel, title window dans un élément qui me permet de les déplacer, de changer leur parent (drag & drop), d'en modifier la taille, de les faire tourner ...

Problème :
Il se trouve que malgrès un Z-index identique certain éléments sont affiché par dessus les autres, comment savoir quel élément est au dessus de l'autre dans ce cas la ?

Cause :
Lors du drag et drop, il faut que les éléments soit visible au dessus de tous les autres, je défini donc le Z-index au max possible.
De plus certain éléments on le même z-index que d'autre par nature : (enfant d'enfant par exemple).

But :
Savoir exactement sur quel élément est positionné la souris.

Je suis bloqué sur ce problème depuis 3 jours, si vous pouviez me donnez un coup de main, ce serait vraiment bien !!
08/07/2008, 10h48
David Buff

Le player ne peut évidemment pas afficher deux éléments sur le même niveau... comment pourrait-il faire? les mélanger?... donc bien évidemment, il a des z-index différents pour chaque éléments. Sinon, il pourrait éventuellement arbitrairement choisir d'en mettre un pardessus l'autre, au hasard.

Mais je ne vois pas comment tu fais pour donner des z-index identiques... ça ne me parait pas possible vu comment est faite la pile graphique en AS3...

Tu parles bien de l'index que l'on récupère avec getChildIndex()??

Ajoutons enfin que les indexs des enfants tiennent compte des index des parents, c'est une arborescence. Si A contient A0 (index 0) et A1 (index 1) et B contient B0 (index 0) et B1 (index 1), et que A a l'index 0 et B, 1, alors tu as un truc qu'on peut représenter:
- A (dessous)
- A0
- A1
- B
- B0
- B1 (dessus)

C'est à dire que A0 et B0, du même index enfant 0, sont bien l'un au-dessus de l'autre, car leur parent n'ont pas le même index.

Ma Solution

Avec la méthode Sprite.getObjectsUnderPoint(), on peux obtenir les objets situées sous le point passé en paramètre et qui sont des enfants de l'instance de Sprite appelant la méthode.

Dans mon cas, il faudrait donc appliquer cette méthode sur l'élément dont je parlais qui contient tous les autres.

Petit exemple pour illustrer :
j'ai plusieurs panels imbriqués les uns dans les autres. Je place un écouteur des clics sur mon canvas cvs1 et ses enfants (= les panels), afin de savoir l'ordre de superposition de ces panels.

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
52
 
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="init();" layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
 
      <![CDATA[
 
      import flash.display.DisplayObject;
      import flash.display.Sprite;
      import flash.events.MouseEvent;
      import flash.geom.Point;
      import mx.core.Application;
 
      private function init():void
      {
         cvs1.addEventListener(MouseEvent.CLICK, onClick, true);
      }
 
      private function onClick(e:MouseEvent):void
      {
         var objs:Array = (e.currentTarget as Sprite).getObjectsUnderPoint(new Point(e.stageX, e.stageY));
 
         var i:int = 0;
         trace("Objets sous ce point, du plus lointain au plus proche :");
         for each (var obj:DisplayObject in objs)
         {
            trace(i+" : "+obj.toString());
            i++;
         }
      }
 
      ]]>
 
   </mx:Script>
 
   <mx:Canvas id="cvs1" width="100%" height="100%">
 
      <mx:Panel id="panel_0" x="750" y="520" layout="absolute" height="200" width="200" />
 
      <mx:Panel id="panel_1" x="150" y="120" layout="absolute" height="500" width="700">
 
         <mx:Panel id="panel_10" x="250" y="320" layout="absolute" height="150" width="100">
            <mx:Panel id="panel_101" x="50" y="20" layout="absolute" height="200" width="150" />
         </mx:Panel>
         <mx:Panel id="panel_11" x="25" y="220" layout="absolute" height="100" width="200" />
 
      </mx:Panel>
 
   </mx:Canvas>
 
</mx:Application>