Skip to main content
Participant
December 14, 2010
Answered

Creating a bitmap copy of a TextFlow object without the caret [cursor]

  • December 14, 2010
  • 1 reply
  • 848 views

Hey all

I'm currently working on creating a bitmap copy of a TextFlow object and I am looking at hiding the caret. What would be the best way forward, using the focusmanager to 'unfocus' the TextFlow object, or is there some more direct approach available? I know there is a cursormanager in Flex, but this is an AS3 only project.

Cheers for your thoughts once again

emd

This topic has been closed for replies.
Correct answer

Your SelectionManager has three selection format properties - focused, unfocused and inactive. Those can be set to SelectionFormat objects, which have settings for the cursor. You could set pointColor to the background, or pointAlpha to zero.

If you know that the focused selection format is the relevant one, you could have code like this:

var fFormat:SelectionFormat = mySelManager.focusedSelectionFormat;

mySelManager.focusedSelectionFormat = new SelectionFormat(fFormat.rangeColor, fFormat.rangeAlpha, fFormat.rangeBlendMode, fFormat.pointColor, 0);

// get the bitmap now that the cursor alpha is set to zero

// then set it back

mySelManager.focusedSelectionFormat = fFormat;

1 reply

Participating Frequently
December 14, 2010

I think I've just done something similar to what you need (except I'm adjusting the width of the bitmap according to that of the text), and so far I have seen no cursor

Here's the code. You'll need to adjust it depending on how many containers (Sprites) you are drawing the TextFlow to.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               applicationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
   
    <s:Group id="groupText" width="560" />
   
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.container.ContainerController;
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.elements.TextFlow;
           
            import mx.core.UIComponent;
            private function init() : void
            {
                var text : String = "Greek god gives mints.";
                var fontSize : int = 24;
               
                //We create a textflow with some text and set it's font size, just as an example.
                var flow : TextFlow = TextConverter.importToFlow(text, TextConverter.PLAIN_TEXT_FORMAT);
                flow.fontSize = 24;
               
                //We'll use a single container (and consecuently a single controller)
                var container : Sprite = new Sprite()
                var controller : ContainerController = new ContainerController(container);
                flow.flowComposer.addController(controller);
               
                //This is kind of weird, but I saw it in a TLF example, and it works.
                //It seems you have to "stretch" the container.
                controller.setCompositionSize(this.stage.stageWidth, this.stage.stageHeight);
                flow.flowComposer.compose();
               
                //Set the text's actual width and height as the composition size.
                controller.setCompositionSize(controller.getContentBounds().width,
                    controller.getContentBounds().height);
               
                //Redraw.
                flow.flowComposer.updateAllControllers();
               
               
                //As BitmapData's draw method takes an IBitmapDrawable,
                //we'll need to wrap the Sprite instance in an UIComponent.
                var tf : UIComponent = new UIComponent();
                tf.addChild(container);
               
               
                //Create an instance of BitmapData and "draw the container" into it.
                var bd : BitmapData = new BitmapData(controller.getContentBounds().width,
                    controller.getContentBounds().height + 2, true, 0x000000);
                bd.draw(tf);
               
                //Create a Bitmap with the text's data and add it to the application.
                var bmp : Bitmap = new Bitmap(bd);
                var ui : UIComponent = new UIComponent();
                ui.addChild(bmp);
               
                this.groupText.addElement(ui);           
            }
        ]]>
    </fx:Script>
</s:Application>

Hope it helps,

Sebastián.

Correct answer
December 14, 2010

Your SelectionManager has three selection format properties - focused, unfocused and inactive. Those can be set to SelectionFormat objects, which have settings for the cursor. You could set pointColor to the background, or pointAlpha to zero.

If you know that the focused selection format is the relevant one, you could have code like this:

var fFormat:SelectionFormat = mySelManager.focusedSelectionFormat;

mySelManager.focusedSelectionFormat = new SelectionFormat(fFormat.rangeColor, fFormat.rangeAlpha, fFormat.rangeBlendMode, fFormat.pointColor, 0);

// get the bitmap now that the cursor alpha is set to zero

// then set it back

mySelManager.focusedSelectionFormat = fFormat;

FlashertAuthor
Participant
December 15, 2010

This worked like a charm, thanks very much!