Discussion :

[jonathan3357]

Bonjour tout le monde,

Je suis en train de créer un objet qui gère un planning et j'aurai besoin de créer des dégradé pour afficher chaque ligne (donc j'utilise BeginGradientFill), et sur chaque ligne j'ai besoin d'afficher aussi des images que je dessine avec beginBitmapFill.

Donc pour détailler un peu plus, voici les différentes couches dans le programme :
- Canvas : Zone ds laquelle j'affiche le planning
- UIComponent : Composant qui contient tous les objets du planning, je le rajoute au Canvas
- TimeLine-> Classe héritée de Sprite, qui contiendra toute les lignes
- Ligne -> Classe héritée de Sprite, qui contient la zone dessinée en dégradée et les images.

Le problème est le suivant (Illustré sur l'image jointe ) :
Que se soit le dégradé ou une image, j'ai l'impression que c'est utilisée comme une seule texture qui se duplique pour toutes les sprite, ce qui ne donne pas le bon résultat, en temps normal, toutes les lignes devraient avoir le même dégradé vert que celui indiqué sur l'image, et la je ne sais vraiment pas d'où peut venir le problème

Avez vous une solution pour résoudre ce problème ? Parce que la je ne sais vraiment plus ou aller, est ce que le problème peut venir du fait que tous les Sprite se partagent le même objet Graphics ? Je ne sais vraiment plus

Merci d'avance pour votre aide.

Cordialement,
Jonathan

[Jim_Nastiq]

Salut,


tu n'aurais pas un peu de code pour illustrer ce que tu fais?

[jonathan3357]

Bonjour Jim,

Désole c'est vrai que je n'avais pas illustré tout cela par une partie de code, donc voici la partie ou je dessine le dégradé, puis mon image

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
 
//  Tracé du centre
   var coul : Object = { color:0x000000, alpha:1, degrade:true };
   initCouleurTpt(coul); 
// Essaie gradient
   var matr : Matrix = new Matrix(); 
   matr.createGradientBox( _w2, _h, Math.PI/2 );
   if ( !coul.degrade )graphics.beginFill        (  coul.color, coul.alpha );   
   else                graphics.beginGradientFill( GradientType.LINEAR, [0x505050, coul.color], [1, 1], [0, 255], matr, SpreadMethod.REFLECT );
   graphics.drawRect (_x, _y , _w2, _h );
   graphics.endFill(); 
 
// Tracé de l'état de transmission
 if ( tLine.ShowEtatTrs )
    {
    var ImgLst :  ImageCollection = tLine.App.ListeImages;
    var bitData:  BitmapData = null;
 
    switch ( tpt.EtatTrs )
       {
       	case " " : bitData = ImgLst.getImage("icon-pret").Data ; break;
       	case "E" : bitData = ImgLst.getImage("icon-emis").Data ; break;
       	case "D" : bitData = ImgLst.getImage("icon-dep" ).Data ; break;
       	case "T" : bitData = ImgLst.getImage("icon-ter" ).Data ; break;
       	case "A" : bitData = ImgLst.getImage("icon-acc" ).Data ; break;
       	default  : bitData = null                              ; break;
       }
    if ( bitData != null )
       {
       var m : Matrix = new Matrix();
       var imgH : Number = _h - 4;
       var imgW : Number = _h - 4;
       m.scale( imgW / bitData.width, imgH / bitData.height ); 
       graphics.beginBitmapFill( bitData, m);
       graphics.drawRect( _xOri + _w1 + 2, _y+2, imgW, imgH );
       graphics.endFill();
       }
    }

PS : Désolé si le code n'est pas très clair, mais se serai impossible de tout mettre ici

[Edit] Voici la partie ou je calcul les coordonnées de départ

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
 
	var pos  : Rectangle = getTptPosition();
	var _x   : Number;
	var _xOri: Number; 
	var _y   : Number;
	var DateDepInPix : Number = tLine.DateInMinToPixel(tpt.DateDepInMin);
	var DateArrInPix : Number = tLine.DateInMinToPixel(tpt.DateArrInMin);
	var _w   : Number = ( DateArrInPix - DateDepInPix );
	var _h   : Number;
	graphics.clear();
 
	if ( r != null )
	   { _x = PosOri.x; _y = PosOri.y; _h = PosOri.height; }
   else
      { _x = pos.x-x; _y = pos.y-y; _h = pos.height; }  
   //Sauvegarde de la coordonée d'origine
   _xOri = _x; 
   // Initialisation des taille des rectangles
   var _w1 : Number;
   var _w2 : Number;
 
   if ( _w > 3 * tLine.TptSegmentMinWidth )
      {
      _w1 = tLine.TptSegmentMinWidth;
      _w2 = _w - ( 2 * _w1 ); 	
      }
   else
      {
      _w1 = _w2 = _w / 3;
      }

[CR_Gio]

Bonsoir,

Il aurai été utile de savoir comment tu calcule _w2, _h, _x, _y pour ce bout de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

matr.createGradientBox( _w2, _h, Math.PI/2 );

Néanmoins je pense que si tu t'arrange pour que ton code reste juste avec cette modification alors tu devrai pouvoir résoudre ton problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

matr.createGradientBox( _w2, _h, Math.PI/2, _x, _y );

(Sauf erreur de ma part, il y a surement un décalage entre l'origine de ton dégradé et l'origine du rectangle dessiné)

Crdlt,

[jonathan3357]

Bonjour,

Merci pour votre réponse que je vais tester directement, en fait hier en fin de journée j'avais trouvé une pseudo solution qui ressemblait a ce que vous venez de me donner, en rajoutant un décalage, car il était vrai que mon repère ne commençait pas réellement à l'origine du canvas car il y avait un libellé plus haut, donc j'avais rajouté une translation tx sur ma gradientbox comme vous l'avez montré, donc encore merci pour votre réponse.

Mais il y a une chose que je comprends pas, pourquoi l'origine du dégradé est dans mon cas l'origine du Canvas ? Etant donné qu'on donne les coordonnées dans la fonction BeginGradientFill, l'origine du dégradé devrait bien être les coordonnées x & y spécifiées non ? Et le problème que j'ai avec le dégradé est le même avec mon image je supose, elle est dupliqué jusqu'à l'infini tel une texture depuis le point [0;0] du canvas, et quand je veux dessiner l'image, il selectionne une partie dans cette pseudo texture...

En tout cas merci, je vais mettre le code que vous avez posté en place

Cordialement,
Jonathan

[jonathan3357]

Re-Bonjour,

Donc j'ai mis en place ce que vous venez de me montrer, et tout fonctionne parfaitement maintenant y compris pour l'image, donc voici la solution appliquée au tracé de l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
if ( bitData != null )
    {
    var m : Matrix = new Matrix();
    var imgH : Number = _h - 4;
    var imgW : Number = _h - 4;
    var __posX : Number = _xOri + _w1 + 2;
    var __posY : Number = _y+2;
    m.createBox( imgW / bitData.width,  imgH / bitData.height, 0, __posX, __posY );
 
    graphics.beginBitmapFill( bitData, m);
    graphics.drawRect( __posX , __posY, imgW, imgH );
    graphics.endFill();
    }

Encore merci pour votre aide CR_Gio
Bonne continuation.

Cordialement,
Jonathan