关于Degrafa's Fills简介

    Fills are created outside and independent of any shape to make sure they can be repurposed. Each type of fill is declared in between a tag.

1 SolidFill
    Package com.degrafa.paint
    Inheritance DegrafaObject
    Implements IGraphicsFill
    Solid fill defines a fill color to be applied to a graphics contex.

   
    <degrafa:Surface verticalCenter="0" horizontalCenter="0">
          <degrafa:fills>
                <paint:SolidFill id="blue" color="#62ABCD" alpha=".6"/>
          </degrafa:fills>
    <degrafa:GeometryGroup> 
    <geometry:Circle fill="{blue}" radius="150"/> 
           </degrafa:GeometryGroup>
    </degrafa:Surface>

2 BlendFill
    Package com.degrafa.paint
    Inheritance DegrafaObject
    Implements IBlend, IGraphicsFill
    Used to wrap standard IFill objects for use in a ComplexFill. The blendMode is only recognized in the context of a ComplexFill.

3 BitmapFill
    Package com.degrafa.paint
    Inheritance DegrafaObject
    Implements IBlend, IGraphicsFill, ITransformablePaint
    Used to fill an area on screen with a bitmap or other DisplayObject.

   
    <degrafa:Surface verticalCenter="0" horizontalCenter="0">
           <degrafa:fills>
                 <paint:BitmapFill id="bitmapFill" source="@Embed   ('assets/pattern_062.gif')" rotation="45" smooth="true"/>
           </degrafa:fills>
           <degrafa:GeometryGroup>
                 <geometry:Circle fill="{bitmapFill}" radius="150"/>  
           </degrafa:GeometryGroup>  
    </degrafa:Surface>
4 LinearGradientFill
    Package com.degrafa.paint
    Inheritance GradientFillBase(Inheritance DegrafaObject)
    Implements IGraphicsFill
    The linear gradient fill class lets you specify a gradient fill.

   
    <degrafa:Surface verticalCenter="0" horizontalCenter="0">
          <degrafa:fills>
                <paint:LinearGradientFill id="blueGradient" angle="45">
          <paint:GradientStop alpha=".3" color="#000000"/>
                <paint:GradientStop alpha=".8" color="#FFFFFF"/>
          </paint:LinearGradientFill>
          </degrafa:fills>
          <degrafa:GeometryGroup>
                <geometry:Circle fill="{blueGradient}" radius="150"/>  
          </degrafa:GeometryGroup>
     </degrafa:Surface>
5 RadialGradientFill
    Package com.degrafa.paint
    Inheritance GradientFillBase(Inheritance DegrafaObject)
    Implements IGraphicsFill
    The radial gradient fill class lets you specify a gradient fill that radiates out from the center of a graphical element.

   
    <degrafa:Surface verticalCenter="0" horizontalCenter="0">
           <degrafa:fills>
                 <paint:RadialGradientFill id="blueGradient" angle="45" focalPointRatio=".5">
                       <paint:GradientStop alpha=".3" ratio=".5" color="#62ABCD"/>
                       <paint:GradientStop alpha=".8" ratio="1" color="#FFFFFF"/>
                 </paint:RadialGradientFill>
           </degrafa:fills>
           <degrafa:GeometryGroup>
                  <geometry:Circle fill="{blueGradient}" radius="150"/>
           </degrafa:GeometryGroup>  
    </degrafa:Surface>
6 ComplexFill
    Package com.degrafa.paint
    Inheritance DegrafaObject
    Implements IBlend, IGraphicsFill
    Used to render multiple, layered IGraphicsFill objects as a single fill. This allows complex background graphics to be rendered with a single drawing pass.

   
    <degrafa:Surface verticalCenter="0" horizontalCenter="0">
           <degrafa:fills>
                  <paint:ComplexFill id="complexFill">
                        <paint:GradientFillBase angle="45">
                               <paint:GradientStop color="#62ABCD"/>
                               <paint:GradientStop color="#FFFFFF"/>
                         </paint:GradientFillBase>
                         <paint:BlendFill  blendMode="multiply">
                                <paint:BitmapFill source="@Embed('assets/pattern_062.gif')" rotation="45" smooth="true"/>
                         </paint:BlendFill> 
                  </paint:ComplexFill>  
            </degrafa:fills>
            <degrafa:GeometryGroup>
                   <geometry:Circle fill="{complexFill}" radius="150"/>
            </degrafa:GeometryGroup>
    </degrafa:Surface>
7 VectorFill
    Package com.degrafa.paint
    Inheritance DegrafaObject
    Implements IBlend, IGraphicsFill, ITransformablePaint
    Used to fill an area on screen with a bitmap or other DisplayObject.

    What’s VectorFill?
           create a fill using Degrafa markup
           treat it just like a BitmapFill
           no external assets
           easy to make changes

     The focus of Degrafa beta 1 and 2 was to set up a solid core that would allow us to do really innovative things and make really complex things easy to do. We’re also chipping away at the need to have any external graphics referenced in your project. A new feature in Degrafa Beta 3 gets us even closer to meeting these goals.

     This new feature is a new Fill type called VectorFill that is going to change the way you think about what’s possible visually in your applications. VectorFill allows you to compose any Degrafa geometry together and use it as a Fill for any other Degrafa geometry. As a simple example, imagine you wanted a background of diagonal lines. To achieve this with VectorFill all you need to do is draw one diagonal line using Degrafa, specify that Line as a source in a VectorFill, then apply that VectorFill to a Degrafa geometry object using the fill property.

     Just like any other Degrafa object, you could edit that diagonal line, say change a color, and that change will dynamically get updated in the applied VectorFill. Also, when we say you can compose any Degrafa geometry together we mean shapes, transforms, fills, repeaters, strokes, and so on. You could move shapes with in VectorFill to create panning or use VectorFill with the Flex charting components to make really rich visuals. The possibilities are endless.

     We’ve also added additional properties to VectorFill to allow for even more powerful ease of use. You get all the BitmapFill goodness of repeat, scale and angle etc. You also get the recently revealed fill transform features as well. And you also get filters, autosettings, background SolidFill and the ability to clip the fill source geometry based on a third geometry object (or even part of composition).
      ------Degrafa Beta 3 Preview: VectorFill

在VectorFill使用Path填充SVG组合而成的GeometryComposition

　　VectorFill并不是像其名字翻译的那样，填充的是放大不失真的矢量图形。它只是允许通过source引用各种geometry组合而成的GeometryComposition，比如DEMO里组合了Line，RegularRectangle，Circle，Path。我们完全可以把它当作特殊的BitmapFill来对待。所以，以<degrafa:Path data="M0,25,Q12.5,37.5,25,25,M25,25,Q37.5,12.5,50,25" stroke="{blackstroke}"/>这种形式填充GeometryComposition而成的VectorFill，虽然其初衷是利用SVG矢量图形达到放大不失真，但很显然并不能达到想要的效果。

　　当然，我们可以用另一种方式来达到这个目的。那就是解析PATH中data所指向的字符串，将所有的数字乘以要放大的倍数scale。在局部应用中，这个效果看起来很让人振奋，因为无论怎样放大图形都不会失真。但考虑到其算法执行效率，并不能在大规模的页面填充中使用。相关函数及使用的SVG文件请参见sign05.rar。

使用ActionScript而不是MXML标签来实例化Fills 

      在填充一个图形时，如果需要根据业务逻辑动态加载FillS，MXML标签就无法办到了。这时需要使用ActionScript函数来实现，以bitmapFill为例：

   <mx:Script>
            <![CDATA[
                    import com.degrafa.Surface;
                    import com.degrafa.GeometryGroup;
                    import com.degrafa.paint.BitmapFill;
                    import com.degrafa.paint.SolidStroke;
                    import com.degrafa.geometry.RegularRectangle;
                    [Embed(source="assets/wellfill/yuan.jpg")]
                    private static const Yuan:Class;
   
                    public function Init():void
                    {
                          var redStroke:SolidStroke = new SolidStroke;
                          redStroke.color = "#ff0000";
                          redStroke.weight = 1;

                          var bitmapFill:BitmapFill=new BitmapFill();
                          bitmapFill.source=new Yuan().bitmapData;
    
                          var recc:RegularRectangle = new RegularRectangle(0,0,250,250);
                          recc.stroke = redStroke;    
                          recc.fill=bitmapFill;
    
                          var gg:GeometryGroup=new GeometryGroup();

                          //不是普通的gg.addChild()
                          gg.geometryCollection.addItem(recc);
    
                          var surface:Surface= new Surface();

                          //注意下面这句不可少
                          gg.target=surface;
                          surface.addChild(gg);
    
                          addChild(surface);
                    }
            ]]>
    </mx:Script>