How to draw a Stroke under each line

[thx1138]

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.

[Jin-Huang]

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.

[thx1138]

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?

[Jin-Huang]

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.

[thx1138]

Where is this located? I searched for those classes and methods on TextArea and SkinnableTextBase and couldn't find them.

[Jin-Huang]

It's in textLayout.swc of Flex SDK. flashx.textLayout.BackgroundManager

To modify the code there and make it work in your way, you need to replace that swc with your custom one. Or you just include source code of textLayout.swc in your project.

[thx1138]

I have not been able to get it to work. I have copied the src into my project (removed the textLayout.swc) with no warnings but the flashx.textLayout.BackgroundManager drawAllRects is never called from anywhere.

Note for posterity:

To get it to compile I had to add -define=CONFIG::debug,false -define=CONFIG::release,true (or true / false) to the compiler options.

Also, in the constructor of some classes this class was causing compiler errors:

        public function IntPropertyHandler(minValue:int,maxValue:int,limits:String = Property.ALL_LIMITS)

It had to be changed to:

        public function IntPropertyHandler(minValue:int,maxValue:int,limits:String = "allLimits")

Also there was a conflict where a variable had to be cast to a ContextMenu because of a NativeMenu error.

Note

I've tried to set my own containerController but getController returns null if the container controller does not extend TMContainerController. The problem is you can't extend TMContainerController because it is a non public inner class in TextContainerManager. 

        private function getController():TMContainerController

        { return _textFlow.flowComposer.getControllerAt(0) as TMContainerController; }

Can it be ContainerController?

[Jin-Huang]

When background is set, drawAllRects() or onUpdateComplete() will definitely be called. The stroke is supposed to be drawn at that time, when TLF is drawing background.

flashx.textLayout.BackgroundManager drawAllRects() is called only when 1) you set background and 2) the container is a kind of TCM. textarea should be a TCM.

PS: The active participants on this sub-forum only focus on classes in textLayout.swc.