outline flex 4 fxg graphic

Question

I'm trying to add a thick border to edge of my fxg shape (shapes:munch2 id="paper") in flex 4 to represent bleed area.

Please can anyone suggest a way to do this, i need to do it with a variable width, rather than setting it up when i draw the fxg

Thanks David

<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx"
          xmlns:shapes="fxgGraphics.shapes.*"
          width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace shapes "fxgGraphics.shapes.*";

        #paper {
            border: 3px solid #ff6600;
        }
    </fx:Style>
    <shapes:munch2 id="paper" width="100%" height="100%" horizontalCenter="0" verticalCenter="0" />
</s:Module>

you could add a GlowFilter to the fxg instance to get the border — user1901867

Sunil D. Sunil D. · Accepted Answer · 2013-04-05T15:42:53

FXG assets are optimized for displaying graphics and don't support CSS styles or a lot of the other things that a Flex component does.

Also, Flex doesn't support the shorthand syntax you're using to set the border. CSS in Flex is rather limited when compared to what you can do with CSS in HTML.

One simple solution is to wrap your FXG asset in another Flex component like BorderContainer. Then you can apply the border to the container object:

<s:BorderContainer borderColor="#ff0000" borderWeight="2" cornerRadius="6">
    <local:MyFxgAsset />
</s:BorderContainer>

The style attributes borderColor, borderWeight, etc. can be applied via CSS as well (but not using that shorthand/combined syntax).

outline flex 4 fxg graphic

1 Answers