How do you add a stroke to text?

3.7k views Asked by At

How do I add a stroke to text in Flex 4? Specifically I'd like to add it to a Label (the text will change in it).

Update
The closest solution suggested has been to add a drop shadow filter as shown below. I've added a rectangle with a stroke for comparison. If the stroke weight is between 2 to 3 it's acceptable. If it's above or below that then it's too blurry or rough. In my case I need to support 2 to 6 weight.

A follow up question would be is it possible to create a stroke filter through Pixel Bender.

<s:VGroup>

<s:Label text="Select an example on the left. Right-click to view source." 
         color="#FF8C00"
         top="10" left="10"
         fontSize="25">
    <s:filters>
        <s:DropShadowFilter blurX="2" blurY="2" distance="0" quality="1" strength="10" color="#000000"/>
    </s:filters>
</s:Label>

<s:Rect width="100%" radiusX="8" radiusY="8"
        height="18">
    <s:fill>
        <s:SolidColor color="#FF8C00"/>
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke weight="1" />
    </s:stroke>
</s:Rect>

<s:Label text="Select an example on the left. Right-click to view source." 
         color="#FF8C00"
         top="10" left="10"
         fontSize="25">
    <s:filters>
        <s:DropShadowFilter blurX="4" blurY="4" distance="0" quality="1" strength="10" color="#000000"/>
    </s:filters>
</s:Label>

<s:Rect width="100%" radiusX="8" radiusY="8"
        height="18">
    <s:fill>
        <s:SolidColor color="#FF8C00"/>
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Rect>

<s:Label text="Select an example on the left. Right-click to view source." 
         color="#FF8C00"
         top="10" left="10"
         fontSize="25">
    <s:filters>
        <s:DropShadowFilter blurX="6" blurY="6" distance="0" quality="1" strength="10" color="#000000"/>
    </s:filters>
</s:Label>

<s:Rect width="100%" radiusX="8" radiusY="8"
        height="18">
    <s:fill>
        <s:SolidColor color="#FF8C00"/>
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke weight="3" />
    </s:stroke>
</s:Rect>

<s:Label text="Select an example on the left. Right-click to view source." 
         color="#FF8C00"
         top="10" left="10"
         fontSize="25">
    <s:filters>
        <s:DropShadowFilter blurX="8" blurY="8" distance="0" quality="1" strength="10" color="#000000"/>
    </s:filters>
</s:Label>

<s:Rect width="100%" radiusX="8" radiusY="8"
        height="18">
    <s:fill>
        <s:SolidColor color="#FF8C00"/>
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke weight="4" />
    </s:stroke>
</s:Rect>

</s:VGroup>
3

There are 3 answers

4
Marty On

Only way I know how is to apply a really, really strong GlowFilter with a tiny blur radius.

Something like:

var stroke:GlowFilter = new GlowFilter(0x000000, 1, 2, 2, 10, 1);
field.filters = [stroke];
4
Daniel On

You can't apply to text that way, but you can redraw the text as graphics and create the outlines that way.

You could use a library like degrafa, or look at (or use) the typography class inside five3d, that converts fonts into graphics Typography3D There is also an application that allows you to convert fonts to motifs, so you can use any font that way.

so essentially, it is possible, but the question is whether it is worth it.

1
Barış Uşaklı On

A drop shadow filter with a distance of 0 works too, the angle isn't important. Something like :

var shadow:DropShadowFilter = new DropShadowFilter(0, 90, 0x000000, 1, 10, 10, 10);
text.filters = [shadow];