Creating Dropshadow Text

[antun]

The example below shows how to create a drop shadow class that reads text that is defined in its instance, and constrains two text fields to that - the first is the foreground and the second is the background, which is offset by a pixel in two directions.

<canvas bgcolor="0xCC95FF">
    
    <class name="dropshadow">
        <attribute name="text" type="text" />
        <!-- The black background -->
        <text name="bgtext" fgcolor="black" 
              text="${this.parent.fgtext.text}" 
              y="${this.parent.fgtext.y+1}"
              x="${this.parent.fgtext.x+1}"
              width="${this.parent.width}"
              fontstyle="bold" />

        <!-- The white foreground -->
        <text name="fgtext" fgcolor="white"
              text="${this.parent.text}"
              fontstyle="bold"
              resize="true" />

    </class>
    <dropshadow>The quick brown fox jumped over the lazy dog.</dropshadow>
</canvas>

Notice the use of the text attribute in the class definition - this can be used to obtain the node contents. Also note how there is no dynamic instantiation of views - both the foreground and the background are constrained. That way, if the text attribute were to change at runtime, the text field(s) would update.

Enjoy!