En flex, comment définir une grille bitmap en tant qu'arrière-plan pour canvas

Question

J'ai une toile dans mon application que je veux être en arrière-plan avec une grille. Je suppose, j'ai besoin de créer un DisplayObject avec une seule cellule de la grille dessiné dessus et le définir comme un remplissage bitmap répété pour la toile, mais je ne peux pas comprendre comment faire cela.

Je serais vraiment heureux de voir des exemples de code

Merci

Answer 1

Essayez ce blog: Il a source disponible. Tiling background image

Answer 2

Je viens + 1'ed réponse de CookieOfFourtune ci-dessus.
 
Le lien qu'il fournit contient de nombreux exemples de répétition de l'arrière-plan. Je suis passé par un certain nombre de techniques mentionnées dans le lien Cookie pointé vers. Il m'a fallu un peu de temps, mais en regardant les différentes approches - j'en ai trouvé une qui me semble la meilleure (performance, code, etc ...) Pour moi, la meilleure réponse était celle de degrafa.org. La raison principale est parce qu'il utilise la bonté CSS pour effectuer le travail et ne nécessite pas de code supplémentaire. Il y a des solutions dans le lien que Cookie a pointé qui fournissent un petit peu de code pour obtenir ce dont vous avez besoin. Cependant, je pensais que Degrafa était le meilleur en termes d'utilisation de flex.

This link devrait vous emmener directement à l'échantillon - juste un clic droit et «voir la source». Pour avoir une idée de l'approche en un coup d'œil, voici une petite source en ligne.

Dans votre application - faire:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    viewSourceURL="srcview/index.html"> 
    <mx:Style source="assets/style/style.css" /> 
    <mx:Panel title="Degrafa CSS Skinning!" left="20" 
     right="20" top="20" bottom="20" /> 
</mx:Application> 

Dans votre CSS - faire:

/* http://www.w3.org/TR/2005/WD-css3-background-20050216/ */ 
/* http://dbaron.org/css/css-vg/ */ 

/* Degrafa CSS Example */ 

Application { 
    background-color:   "-45deg #330000 #550000 #330000"; 
    background-image:   Embed("assets/images/designer.png"); 
    background-repeat:   repeat; 
    background-position:  center; 
    background-blend:   multiply; 
    borderSkin:    ClassReference("com.degrafa.skins.CSSSkin"); 
} 

Panel { 
    color:       #FFFFFF; 
    border-alpha:     0.8; 
    border-color:     "#002255 #002255 #001144 #001144"; 
    border-width:     "10px 30px 10px 10px"; 
    border-top-right-radius:  24px; 
    border-bottom-left-radius:  24px; 
    background-image:    RETRO, KITCHEN, "-90deg #666666 60px 
            #FFFFFF 90% #AAAAAA", GRUNGE; 
    background-repeat:    repeat, repeat-y, stretch, stretch; 
    background-position:   "top center", "top 85%", center, center; 
    background-blend:    normal, normal, multiply, multiply; 
    asset-class:     ClassReference("assets.ExamplesAssets"); 
    borderSkin:     ClassReference("com.degrafa.skins.CSSSkin"); 
} 

Et vous aurez besoin de ce petit gars pour les actifs:

package assets 
{ 
    public class ExamplesAssets 
    { 

     [Embed("//assets/images/retro.gif")] 
     public static const RETRO:Class; 

     [Embed("//assets/images/kitchen.gif")] 
     public static const KITCHEN:Class; 

     [Embed("//assets/images/grunge.png", 
     scaleGridTop="120", scaleGridBottom="140", 
     scaleGridLeft="257", scaleGridRight="267")] 
     public static const GRUNGE:Class; 

    } 
}