Is there a way to use a bitmap fill as the stroke of a rectangle?

Question

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

I'd use a "fake" border with two rectangles, background one is filled as normal with transparent border, the inner and foreground rectangle is filled white with transparent border. — Vesper, Mar 01 '17 at 10:48
I second @Vesper's suggestion. Outside of Flex I would have just made two rectangles, one is bitmap filled and the other (outline) acts as a bitmap's mask. This would give visual effect of only the border having a bitmap fill (since fill only shows via the outline). — VC.One, Mar 01 '17 at 11:51
Hmm, mask is even better approach, since mask doesn't get drawn. Nice one @VC.One — Vesper, Mar 01 '17 at 12:18
@Vesper One problem I ran into is that the stroke is positioned on top of the edge of the rectangle. I couldn't find a way to specify the location so I ended up using a mask. — 1.21 gigawatts, Mar 05 '17 at 20:52

1.21 gigawatts · Accepted Answer · 2017-03-02T21:26:38.623

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}"

Is there a way to use a bitmap fill as the stroke of a rectangle?

1 Answers1