Using the Rect primitive you can define a fill using bitmap data like so.
<!-- Draw rectangle that is filled with a repeating bitmap. -->
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:BitmapFill
source="@Embed('../assets/AirIcon12x12.gif')"
fillMode="repeat"/>
</s:fill>
</s:Rect>
That looks like this:
Is there a way to set define a bitmap fill for the border stroke (and the center is transparent)?
Answer based on suggestions. Since I was trying to create dashed border there are a few additions:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
mouseMove="application1_mouseMoveHandler(event)"
click="application1_clickHandler(event)">
<fx:Script>
<![CDATA[
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
if (resize) {
mainGroupRect.width = event.stageX - mainGroup.x;
mainGroupRect.height= event.stageY - mainGroup.y;
}
}
protected function application1_clickHandler(event:MouseEvent):void
{
resize = !resize;
application1_mouseMoveHandler(event);
}
public var resize:Boolean;
]]>
</fx:Script>
<s:Button id="button" label="hello" width="100%" height="100%" visible="true" />
<s:Group id="mainGroup" verticalCenter="0" horizontalCenter="0" maskType="alpha" mask="{rectMask.displayObject}">
<s:Rect id="mainGroupRect" height="100" width="200" >
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="rectMask" top="0" left="0" right="1" bottom="1"
alwaysCreateDisplayObject="true" alpha=".9999999">
<s:stroke>
<s:SolidColorStroke color="0xFF0000" pixelHinting="true"/>
</s:stroke>
</s:Rect>
<s:Rect id="rightEdge" height="100%" width="1" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="bottomEdge" height="1" width="100%" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="@Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
</s:Group>
</s:Application>
The fill image is shown below (it appears as a dot. It's a 4x4 image png with transparency on half the image. So additional fills are used on those.
This creates a dashed border. Since there are transparent pixels it does not fill in the image on the right or bottom sides at times. So there are two extra fills that run along the right and bottom edges.
In the example above, click on the stage and you can resize the fill.
You can also wrap the rectMask in a group and then you can just set the mask="{rectMask}"