Skip to main content
Inspiring
February 9, 2012
Question

How to draw a Stroke under each line

  • February 9, 2012
  • 1 reply
  • 3690 views

How do I draw a line (Stroke) under each line?

Background

I'm trying to get the appearance of notebook paper. I'm using the Spark TextArea. I've tried a number of different approaches and all of them have drawbacks.

This topic has been closed for replies.

1 reply

Adobe Employee
February 9, 2012

I guess you may dislike textDecoration format.

7.3.7. textDecoration attribute

<xs:attributename="textDecoration"type="xs:string"default="none."/>

The text decoration to apply. Valid values include:

none
underline

Without help of textDecoration, you may want to retrieve "y" values for all flash.text.engine.TextLine upon TextArea to draw those lines on your own.

thx1138Author
Inspiring
February 9, 2012

I'm going more for a background look rather than text-underline. 

I've retrieved the text lines through the following code:

                textContainerManager = textDisplay.mx_internal::textContainerManager;

                if (textDisplay.getStyle("lineHeight")) {

                    lineHeightRatio = parseInt(textDisplay.getStyle("lineHeight"))/100;

                }

                textLines = new Vector.<DisplayObject>(linesLength);

                linesLength = textContainerManager.numLines;

                linesLength = textContainerManager.tlf_internal::getActualNumLines();

The linesLength using numLines usually returns a smaller number than getActualNumLines(). I'm guessing because the non-visible lines are being reused.

Right now I'm using the graphics object of parent Spark Group container and draw lines on that by iterating through the text lines and getting the y value as you stated. The problem I'm having with this is to know when to draw the lines and if the TextLine is null then extrapolating out the correct coordinates, which I've done to some success.

Another cleaner approach I was thinking about is to extend TextLine where in the updateDisplayList method draw the line and then apply the ExtendedTextLine to the TextLineFactory(?)? I looked into it and could not find it. My skill is in Flex component lifecycle so I don't know if TextLine has a updateDisplayList method. Is this the right approach to solve this problem?

Adobe Employee
February 10, 2012

The problem I'm having with this is to know when to draw the lines and if the TextLine is null then extrapolating out the correct coordinates, which I've done to some success.

TLF draws background by flashx.textLayout.BackgroundManager. For TextArea, the specific function is BackgroundManager.drawAllRects(), which is the perfect place. Otherwise, bugs occur easily.