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>
Add a border or outline to Text or Bitmap at runtime

2 thoughts on “Add a border or outline to Text or Bitmap at runtime

  1. 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….😀

    Regards,
    GamyGuru

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s