Im Flex, wie setze ich ein Bitmap-Gitter als Hintergrund für Canvas

Question

Ich habe eine Leinwand in meiner App, die ich mit einem Gitter umgeben werden soll. Ich nehme an, ich muss ein DisplayObject mit einer einzelnen Rasterzelle erstellen und es als eine wiederholte Bitmap-Füllung für die Leinwand festlegen, aber ich kann nicht herausfinden, wie das geht.

Ich würde wirklich froh sein, Code-Beispiele

Dank

Answer 1

Versuchen Sie diesen Blog zu sehen: Er hat Quelle zur Verfügung. Tiling background image

Answer 2

Ich habe gerade die Antwort von CookieOfFourtune oben + 1.
 
Die Verbindung, die er zur Verfügung stellt, hat viele Beispiele, wie der Hintergrund wiederholt werden kann.

Ich ging durch eine Reihe der Techniken, die in dem Link erwähnt Cookie erwähnt. Ich brauchte ein wenig Zeit, aber wenn ich mir die verschiedenen Ansätze anschaute, fand ich eine, die ich für die beste halte (Leistung, Code, etc ...). Für mich war die beste Antwort die von degrafa.org.

Der Hauptgrund ist, weil es gerade CSS-Güte verwendet, um die Arbeit zu erledigen, und keinen zusätzlichen Code erfordert. Es gibt Lösungen in der Verbindung, auf die Cookie hingewiesen hat, die tatsächlich ein kleines bisschen Code zur Verfügung stellen, um zu bekommen, was Sie brauchen. Allerdings dachte ich, dass Defrafa die beste Lösung für den Einsatz von Flex ist.

This link sollten Sie direkt zum Beispiel - nur mit der rechten Maustaste und "Quelle anzeigen". Um sich einen Überblick über den Ansatz zu verschaffen, hier eine kleine Inline-Quelle.

in Ihrer Anwendung - dies tun:

<?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> 

In Ihrem CSS - dies tun:

/* 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"); 
} 

Und Sie werden diesen kleinen Kerl für Vermögenswerte müssen:

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; 

    } 
}