Adobe Flex - Comment intégrer un composant dans la "fenêtre" d'une image?

Question

J'ai une image, appelons-la "StageSkin.png". C'est une image qui n'est en réalité qu'une bordure, et le milieu de l'image est "fenêtré", ce qui signifie qu'il est censé montrer d'autres informations à l'intérieur. Les informations à l'intérieur sont sous la forme d'un composant (basé sur un composant de canevas, appelons-le 'Gauge'). Je souhaite créer un composant à partir de l'image 'StageSkin' et du composant 'Gauge' qui me permettrait de redimensionner le composant avec le composant 'Gauge' restant dans la fenêtre de StageSkin. J'ai cherché sur ceci, et ai obtenu le code ci-dessous, mais le composant embarqué chevauche juste l'image entière. Qu'est-ce que je dois faire?

<mx:Style> 
    .nineSliceScalingBackground 
    { 
     background-image: Embed("assets/StageSkin.png", 
     scaleGridTop="53", scaleGridBottom="523", 
     scaleGridLeft="20", scaleGridRight="485"); 

     background-size:"100%"; 
    } 
</mx:Style> 

Answer 1

Je ne suis pas sûr à 100% que c'est votre problème, mais il semble que vous ayez juste besoin de remplir votre conteneur.

<mx:Style> 
    .nineSliceScalingBackground 
    { 
     background-image: Embed("assets/StageSkin.png", 
     scaleGridTop="53", scaleGridBottom="523", 
     scaleGridLeft="20", scaleGridRight="485"); 

     background-size:"100%"; 

     paddingTop: 53; 
     paddingLeft: 20; 
    } 
</mx:Style> 

Une chose qui est gênant est que le rembourrage ne fonctionne pas pour Canvas composants. Cela signifie que vous devez utiliser Container comme classe de base (ou VBox/HBox si votre cas d'utilisation l'exige).

Le remplissage détermine la quantité d'espace entre le bord du parent et le bord de l'enfant.

Vous devrez peut-être également définir explicitement le width de vos éléments enfants pour correspondre à la largeur de votre fenêtre (585-20 = 565). Vous ne pouvez pas le faire en CSS, mais MXML ou ActionScript fonctionnera. Vous pouvez également vous en sortir en définissant paddingRight et en définissant la largeur du composant à 100%.

Answer 2

Le composant (et ses composants enfants) ont-ils des couleurs d'arrière-plan définies? Si tel est le cas, il se peut que ceux-ci dessinent au-dessus de l'image d'arrière-plan, ce qui l'empêche de s'afficher.