Discussion :

[ouaqa]

Bonjour à tous,
Tout est dans le titre.

Je travaille sur un projet de création graphique. Comme dans la plupart des logiciels de création graphique, je souhaite afficher une règle de repères au dessus et sur le côté de la zone de travail.

Pour organiser cet affichage, j'utilise un composant grid (toute suggestion de remplacement est la bienvenue).
Ce composant grid me permettant d'organiser l'affichage des 3 objets : la règle horizontale, celle verticale et le canvas servant de zone de travail.

Seulement, mon problème est que le canvas "zone de travail" déborde sur les deux autres items.

Je connais mal le composant grid mais je n'avais jamais rencontré ce genre de problème auparavant. Les éléments s'affichaient toujours les uns à côté des autres.

voici quelques morceaux de codes choisis pour vous aider un peu :

le grid :

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
 
<mx:Grid
	id="displayGrid"
	width="100%"
	height="80%"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	autoLayout="true"
	horizontalAlign="center"
	verticalAlign="middle"
	>
 
		<mx:GridRow
			id="topRow"
			verticalAlign="top"
			horizontalAlign="center"
			autoLayout="true"
			>
				<mx:GridItem
					id="blankItem"
					width="100%"
					height="100%">
				</mx:GridItem>
 
				<mx:GridItem
					id="horizontalRuler"
					width="100%"
					height="100%">
				</mx:GridItem>
		</mx:GridRow>
 
		<mx:GridRow
			id="bottomRow">
 
			<mx:GridItem
				id="verticalRuler"
				width="100%"
				height="100%">
			</mx:GridItem>
 
			<mx:GridItem
				id="maquetteContainer"
				width="100%"
				height="100%">
				<mx:Canvas 
					id="CanvasImageCreator">	
				</mx:Canvas>
			</mx:GridItem>
		</mx:GridRow>
</mx:Grid>

la fonction remplissant le grid :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
public function addMaquette ( AGraphicMaquette : LCElementMaquette ) : void
{	
	var maxPixelWidth : int = LCConstants.MAX_CENTIMETER_WIDTH * 10 * LCConstants.MILIMETER_TO_PIXEL_RATIO ;
	var maxPixelHeight : int = LCConstants.MAX_HEIGH * 10 * LCConstants.MILIMETER_TO_PIXEL_RATIO ;
			this.horizontalRuler.addChild(LCUtilTools.getHorizontalRuler(maxPixelWidth));
			this.verticalRuler.addChild(LCUtilTools.getVerticalRuler(maxPixelHeight));
	this.blankItem.width = this.verticalRuler.width ;
	this.blankItem.height = this.horizontalRuler.height ;
 
	this.maquetteInCreation = AGraphicMaquette ;
			this.CanvasImageCreator.addChild(this.maquetteInCreation);
}

et pour les très curieux, les 2 fonctions générant les règles :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
public static function getHorizontalRuler ( aLength : int ,
								aStep : int = 5,
								aLineThickness : int = 1 ,
								aLineColor : uint = 0 ,
								aLineAlpha : int = 1 ,
								aBackGroundColor : uint = 0xFFFFFF ,
								aSmallTickHeight : int = 10 ,
								aBigTickHeight : int = 20 
								) : UIComponent
{
	var ruler : Shape = new Shape() ;
 
	ruler.graphics.lineStyle(aLineThickness, aLineColor,aLineAlpha);
	ruler.graphics.moveTo(0,0) ;
	ruler.graphics.lineTo(aLength , 0) ;
 
	ruler.graphics.moveTo(0,0) ;
 
	var counter : int = 0 ;
	var step : int = aStep ;
	var stepCounter : int = 0 ;
 
	while (counter <= aLength ) 
	{
		ruler.graphics.moveTo(counter , 0 ) ;
		if (stepCounter % step == 0)
		{ ruler.graphics.lineTo( counter , aBigTickHeight ); }
		else
		{ ruler.graphics.lineTo( counter , aSmallTickHeight ); }
 
		counter += LCConstants.MILIMETER_TO_PIXEL_RATIO ;
		stepCounter += 1 ;
	}
 
	var conteneurHorizontal : UIComponent = new UIComponent() ;
	var conteneurHorizontalBackground : UIComponent = new UIComponent() ;
 
	var horizontalBackground : Shape = new Shape() ;
	horizontalBackground.graphics.beginFill(aBackGroundColor);
	horizontalBackground.graphics.drawRect(0,0,ruler.width,ruler.height) ;
 
	conteneurHorizontalBackground.addChild(horizontalBackground);
	conteneurHorizontal.addChild(ruler) ;
 
 
	var myResultCanvas : Canvas = new Canvas() ;
	myResultCanvas.addChild(conteneurHorizontalBackground);
	myResultCanvas.addChild(conteneurHorizontal) ;
 
	return myResultCanvas ;
}
 
 
public static function getVerticalRuler ( aLength : int ,
							aStep : int = 5,
							aLineThickness : int = 1 ,
							aLineColor : uint = 0 ,
							aLineAlpha : int = 1 ,
							aBackGroundColor : uint = 0xFFFFFF ,
							aSmallTickHeight : int = 10 ,
							aBigTickHeight : int = 20 
							) : UIComponent
{
	var ruler : Shape = new Shape() ;
 
	ruler.graphics.lineStyle(aLineThickness, aLineColor,aLineAlpha);
	ruler.graphics.moveTo(0,0) ;
	ruler.graphics.lineTo(0,aLength) ;
 
	ruler.graphics.moveTo(0,0) ;
 
	var counter : int = 0 ;
	var step : int = aStep ;
	var stepCounter : int = 0 ;
 
	while (counter <= aLength ) 
	{
		ruler.graphics.moveTo(0 ,counter ) ;
		if (stepCounter % step == 0)
		{ ruler.graphics.lineTo( aBigTickHeight ,counter); }
		else
		{ ruler.graphics.lineTo( aSmallTickHeight , counter); }
 
		counter += LCConstants.MILIMETER_TO_PIXEL_RATIO ;
		stepCounter += 1 ;
	}
 
	var conteneurVertical : UIComponent = new UIComponent() ;
	var conteneurVerticalBackground : UIComponent = new UIComponent() ;
 
	var VerticalBackground : Shape = new Shape() ;
	VerticalBackground.graphics.beginFill(aBackGroundColor);
	VerticalBackground.graphics.drawRect(0,0,ruler.width,ruler.height) ;
 
	conteneurVerticalBackground.addChild(VerticalBackground);
	conteneurVertical.addChild(ruler) ;
 
 
	var myResultCanvas : Canvas = new Canvas() ;
	myResultCanvas.addChild(conteneurVerticalBackground);
	myResultCanvas.addChild(conteneurVertical) ;
 
	return myResultCanvas ;
}

merci d'avance pour votre aide, je suis à votre disposition pour toute information complémentaire.
Ah s'il y avais d'autres développeurs flex dans cette boite ...

[ouaqa]

A défaut de mieux, j'ai résolu le problème de la manière suivante :

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
 
<mx:Grid
	id="displayGrid"
	width="100%"
	height="80%"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	horizontalAlign="center"
	verticalAlign="top"
	horizontalGap="5"
	verticalGap="5"
	>
 
	<mx:GridRow
		id="topRow"
		horizontalAlign="center"
		verticalAlign="top"
		>
		<mx:GridItem
			id="blankItem"
			horizontalAlign="center"
			verticalAlign="middle"
			>
			<mx:Canvas
				id="blankContent"
				width="20"
				height="20"
			>
			</mx:Canvas>
		</mx:GridItem>
		<mx:GridItem
			id="horizontalRuler"
			horizontalAlign="left"
			verticalAlign="top">
		</mx:GridItem>
	</mx:GridRow>
 
	<mx:GridRow
		id="bottomRow"
		horizontalAlign="center"
		verticalAlign="right">
 
			<mx:GridItem
				id="verticalRuler"
				horizontalAlign="left"
				verticalAlign="top">
			</mx:GridItem>
 
			<mx:GridItem
				id="maquetteContainer"
				horizontalAlign="center"
				verticalAlign="top"
				>
				<mx:Canvas 
					id="CanvasImageCreator">	
				</mx:Canvas>
			</mx:GridItem>
		</mx:GridRow>
</mx:Grid>

J'ai donc défini un canvas et une taille minimale dans mon grid Item.
Cette taille est ensuite réadaptée si les règles prennent une taille différente.