12 Replies Latest reply on Dec 21, 2009 11:11 PM by mrdicamillo

    BitmapData.draw does not show text

    Dajji Level 3

      Hey Guys,

      I have this very simple code snippet which does not work fine. It simply shows a white rectangle without any text in it. I have searched for this on net and this seems to be the correct way of doing it. Any idea why it is not working?

      numberText = new Text();
      numberText.width = 100;
      numberText.height = 100;
      numberText.setStyle("horizontalCenter", true);
      numberText.setStyle("fontSize", 18);
      numberText.text = "Hello";

      var bmd:BitmapData = new BitmapData(numberText.width, numberText.height);
      var uiComp:UIComponent = new UIComponent();
      bmd.draw(numberText);
      uiComp.x = 500;
      uiComp.y = 200;
      uiComp.width = 100;
      uiComp.height = 100;
      uiComp.addChild(new Bitmap(bmd));
      this.addChild(uiComp);

        • 1. Re: BitmapData.draw does not show text
          susrut316

          Hey Dajji,

                              I had a similar issue sometimes back with the validation of the text controls if used in AS3.0. I created a custom component here http://talkxe.com/?p=28 that contains a string validator. You can use the same component for the code below and it will work.

           

           


                          var numberText:CustomTextArea = new CustomTextArea ();
                          addChild(numberText);
                          numberText.width = 100;
                          numberText.height = 100;
                          numberText.setStyle("horizontalCenter", true);
                          numberText.setStyle("fontSize", 18);
                          numberText.text = "Hello";
                          var bmd:BitmapData = new BitmapData(numberText.width, numberText.height);
                          var uiComp:UIComponent = new UIComponent();
                          bmd.draw(numberText);
                          uiComp.width = 100;
                          uiComp.height = 100;
                          uiComp.addChild(new Bitmap(bmd));
                          this.addChild(uiComp);
                          removeChild(numberText);

           

           

          Another simple method is to add a text control using mxml on the stage change the styling and text and draw it inside a BitmapData. You can make the component on stage invisible and it will work without a problem. You can try both the methods. Hope it solves your purpose.

          • 2. Re: BitmapData.draw does not show text
            Flex harUI Adobe Employee

            Flex components use validation (you set properties, the component is marked as invalidated and is later validated).  You have to add the component to display list to get it to be validated.

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

            Blog: http://blogs.adobe.com/aharui

            • 3. Re: BitmapData.draw does not show text
              susrut316 Level 1

              Hey did it work for you?

              • 4. Re: BitmapData.draw does not show text
                Dajji Level 3

                @All sorry guys I have not been active for some time so couldn't reply.

                 

                @susrut316 Thanks for your suggestion mate...I changed the way I was trying to achieve something.

                • 5. Re: BitmapData.draw does not show text
                  Dajji Level 3

                  Alex,

                   

                  I did add it to the display list...but it didn't work...may be it was taking time to validate.

                  • 6. Re: BitmapData.draw does not show text
                    Flex harUI Adobe Employee

                    You may need a call to validateNow() before bmd.draw()

                     

                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.

                    Blog: http://blogs.adobe.com/aharui

                    • 7. Re: BitmapData.draw does not show text
                      Dajji Level 3

                      @Alex It didn't work even after calling validateNow().

                       

                      Interesting part is it works if I already have the Text component in the display list as shown in the code below.

                       

                      <?xml version="1.0" encoding="utf-8"?>

                       

                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                              layout="vertical"

                              verticalAlign="middle"

                              creationComplete="init(event)">

                       

                      <mx:Script>

                      <![CDATA[

                      import mx.events.FlexEvent;

                      import mx.core.UIComponent;

                      import mx.controls.Text;

                       

                       

                      private function init(e:FlexEvent):void{

                       

                      var bmd:BitmapData = new BitmapData(numberText.width, numberText.height);

                      var uiComp:UIComponent = new UIComponent();

                      bmd.draw(temp);

                      uiComp.x = 500;

                      uiComp.y = 200;

                      uiComp.width = 100;

                      uiComp.height = 100;

                      uiComp.addChild(new Bitmap(bmd));

                      this.addChild(uiComp);

                       

                      }

                       

                      ]]>

                      </mx:Script>

                       

                      <mx:Text id="temp" text="Hey"/>

                      </mx:Application>

                      • 8. Re: BitmapData.draw does not show text
                        Flex harUI Adobe Employee

                        It that's a valid solution for you then great.  Otherwise you'll probably have to use the debugger figure out why the Text isn't validating its text into its internal TextField with the right size before you call BitmapData.draw.

                         

                        Alex Harui

                        Flex SDK Developer

                        Adobe Systems Inc.

                        Blog: http://blogs.adobe.com/aharui

                        • 9. Re: BitmapData.draw does not show text
                          Dajji Level 3

                          Well this is not the solution for me. This was just to show you what I figured out while doing investigation on the issue. I will try debugger to trace what is going on.

                          • 10. Re: BitmapData.draw does not show text
                            mrdicamillo Level 1

                            Alex - who is the domain expert on the Flex team for generating bitmaps from textfields / textareas?  I have an issue with instead of the text not displaying, portions of characters are being clipped in the resulting bitmap even though they display fully in the UIcomponent itself.  (http://forums.adobe.com/thread/538288?tstart=0).  Who is best to discuss this?

                            • 11. Re: BitmapData.draw does not show text
                              Flex harUI Adobe Employee

                              I'm not sure we have an expert for that.  We don't make a lot of bitmaps except for the QA folks in their testing.  Post a screen shot and the incorrect bitmap.

                               

                              Alex Harui

                              Flex SDK Developer

                              Adobe Systems Inc.

                              Blog: http://blogs.adobe.com/aharui

                              • 12. Re: BitmapData.draw does not show text
                                mrdicamillo Level 1

                                When using an italic system font, such as BrushScriptStd.otf (pretty standard on Windows PCs - attached if you don't have it), it renders a capital "B" correctly in the textarea:

                                 

                                public var letB:String = '<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="BrushScriptStd" SIZE="72" COLOR="#000000" LETTERSPACING="0" KERNING="0">B</FONT></P></TEXTFORMAT>';

                                myTextArea.htmlText = letB;

                                 

                                Looks like this in the flash player in Firefox:

                                 

                                B.jpg

                                 

                                When I try to create a bitmap image of the TextArea, the edge of the italic "B" that "overhangs" the next character position gets clipped off in the rendered bitmap:

                                 

                                Bclipped.jpg

                                 

                                I used the BitmapData.draw method to generate the bitmap.  I have also tried ImageSnapShot with the same result.

                                 

                                            myTextArea.setStyle("backgroundAlpha", 0.0);
                                            var myBitmap:BitmapData = new BitmapData(myTextArea.width*1, myTextArea.height*1, true, 0x00000000);
                                            var m:Matrix = new Matrix();
                                            m.scale(1, 1);
                                            myBitmap.draw(myTextArea, m);
                                            BitmapImageOfB.source = new Bitmap(myBitmap);

                                 

                                BTW - I need to use system (device) fonts (allow the user to be able to create text with any fonts they have on their hard drive.)  However, I have tried this with embedding the BrushScriptStd font just to see if that was the problem, but embedding did not change anything.

                                 

                                Basically, clipping occurs whenever a letter overhangs another character position in the following conditions:

                                 

                                1) There is no character following the letter (for italic ascenders - the reverse is true for no character preceeding with an italic descender that would normally flow under the letter before) [Big issue for some fancy fonts that have long swashes that extend over several characters. - For example, if you only added one space, you would see more of the long swash, but it would still be clipped at the end.]

                                 

                                2) If the next character is not of the exact same font family as the letter (for example a ScriptBrushStd "B" being followed by a Verdana "e.")

                                 

                                3) If you use negative LETTERSPACING (HTMLtext) to bring the letters closer together (like if you were trying to make the 2 "f"'s closer together in "off."  I think that is called a ligature look.

                                 

                                Again, I don't fully understand why these letter combinations render perfectly without any clipping in the TextArea in the Flash player in a browser, it is just when I try to capture them as bitmaps for the user to use with other images that I have this problem.