Question

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

我真的很高兴看到代码示例

由于

Answer 1

试试此博客：他有可用的来源。 Tiling background image

Answer 2

我只是+上面的CookieOfFourtune的答案。

他提供的链接有很多让背景重复的例子。

我经历了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;

    }
}

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

2 个答案: