Add a border or outline to Text or Bitmap at runtime

Update: I’ve created a new border filter based on the Spark DropShadowFilter. It works better and it’s native. You can read more here.

I’ve been trying to figure out how to add an outline to dynamic text and found out that there’s little usable concrete examples out there.

I hobbled together some classes that find the outline of an object and used that to draw pixels in those places. I then attempted to outline that outline to create a simple border weight like effect. Here’s the demo.

The main issue for a text outline is that the text has to be rasterized first; it’s not as easy to apply as a drop shadow filter effect.

The other issues are that the border grows in rather than out, the edge is aliased and the outline is cut off if the bitmap is not large enough ahead of time.

I think a better approach would be to create a pixel bender filter that can be applied to display object. Or instead of getting the points around an object get the text path (like in FXG Path) and then apply a stroke to it.

<s:Path data="M 1,2 L 3,4">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>

If possible the class would extend Label and add a stroke property or extend Path and add a text property (when you set the text the path would be created). Examples:

<s:Path text="Test Text">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
<s:Path bitmapData="{image1}">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
<s:Label text="Test Text">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
This entry was posted in AIR, Flash, Flex, FXG. Bookmark the permalink.

2 Responses to Add a border or outline to Text or Bitmap at runtime

  1. GamyGuru says:

    Hey Judah!!!
    Great Post and great blog… Its really good content and art you uploaded on the blog. Keep up the good work…. and please dont stop sharing…. :D

    Regards,
    GamyGuru

Leave a Reply

Your email address will not be published. Required fields are marked *

Wrap your code before posting! Click the links below:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">