在flex中，如何将一个位图网格设置为画布的背景

Question

我在我的应用中有一个画布，我想用网格背景。我想，我需要创建一个带有单个网格单元的DisplayObject，并将其设置为画布的重复位图填充，但我无法弄清楚如何实现这一点。

我真的会很高兴见到的代码示例

感谢

Answer 1

试试这个博客：他有可用的源。 Tiling background image

Answer 2

我刚刚为上面的CookieOfFourtune的回答+1了。
 
他提供的链接有很多获得重复背景的例子。

我经历了Cookie指向的链接中提到的许多技巧。我花了一点时间，但在看各种方法 - 我发现一个我认为是最好的（性能，代码等）。对我来说，最好的答案是从degrafa.org。

关键的原因是因为它使用直接的CSS-goodness来完成工作，并且不需要额外的代码。 Cookie指出的链接中有解决方案，实际上只提供一小部分代码来获取所需内容。不过，我认为Degrafa在使用flex提供的功能方面是最好的。

This link应该带你直接进入样品 - 只需点击右键和'查看源代码'。一目了然地了解这个方法 - 这里有一个内联源。

在你的应用程序 - 这样做：

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

在你的CSS - 做到这一点：

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

你还需要对资产这个小家伙：

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; 

    } 
}