Во Flex, как установить растровую сетку в качестве фона для холста

Question

В моем приложении есть холст, который я хочу закрасить сеткой. Полагаю, мне нужно создать DisplayObject с нарисованной на нем одной ячейкой сетки и установить ее в качестве повторяющейся растровой заливки для холста, но я не могу понять, как это сделать.

Я был бы очень рад увидеть примеры кода

Спасибо

Answer 1

Попробуйте этот блог: у него есть доступный источник. Фоновое изображение плитки

Answer 2

Я только + 1 ответил CookieOfFourtune выше.

Приведенная им ссылка содержит много примеров повторения фона.

Я прошел через несколько техник, упомянутых в ссылке, на которую указал Cookie. Это заняло у меня немного времени, но, посмотрев на различные подходы - я нашел тот, который я считаю лучшим (производительность, код и т. Д.). Для меня лучшим ответом был ответ с degrafa.org .

Основная причина в том, что он использует прямое CSS-совершенство для выполнения работы и не требует дополнительного кода. В ссылке, на которую указал Cookie, есть решения, которые на самом деле предоставляют небольшой кусочек кода, чтобы получить то, что вам нужно. Тем не менее, я думал, что Degrafa был лучшим с точки зрения использования того, что предоставляет flex.

Эта ссылка должна привести вас непосредственно к образцу - просто щелкните правой кнопкой мыши и «просмотрите источник». Чтобы получить представление о подходе с первого взгляда - вот небольшой встроенный источник.

В вашем приложении - сделать это:

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

    }
}