3 Replies Latest reply on Mar 27, 2007 2:49 AM by rkschulz

    graphics.drawText - sensible workarounds


      there is no graphics.drawText. Ok. What are sensible workarounds?

      I have tried to implement my own component and basically add labels (in createChildren) and then set the text and move them around in updateDisplayList amongst the drawing other stuff on the graphics of that component.. That works reasonably well but does not scale.

      The addChild call seems to be taking a relative long time ... I have a custom renderer where I need about 60 labels. For
      20 rows that 1200 labels and that is too slow. It's complete overkill for what I am trying to do (each label only displays a single number - but this number needs to be on exactly the right spot in the datagrid cell).

      Is there any other way to get text draw on a specific spot on the screen?
      1) I can of course write code to draw the digits 0 to 9 using lines - I reckon that would be quicker for what I need but seems even more silly.
      2) Is there a way of using a label to draw the text and then "transfer" then graphics across? This way I would not need so many labels floating around?
      3) Any other thoughts on how to do this? I think somebody on a similar post said "use flash" ... how do I do that? Can I mix flash and flex (as in write an ItemRenderer in Flash)?

      Surely that's a fairly common problem ...



        • 1. Re: graphics.drawText - sensible workarounds
          peterent Level 2
          For what you are doing, I would make bitmaps of the numerals - either as GIF or PNG or Flash so you can have transparent backgrounds. Embed the symbols and use either an Array or an Object to index them. So the graphic for "0" is in the 0 position, etc.

          private var zeroImage:Class;
          ... // the others here
          var digits:Array = [zeroImage, oneImage, twoImage, ... ];

          If you use PNG or GIF, just use the source part of the Embed and leave off the symbol.
          • 2. Re: graphics.drawText - sensible workarounds
            You can create a BitmapData object, create a Label object, set the Label to the digit you want, and pass the Label object to the draw() method of the BitmapData object.

            It won't do transparency, so you'll need to set the bitmap background to whatever you need (I think?) before you draw. You can then draw the bitmapdata using the beginBitmapFill method of the Graphics object - however I can't see how one can move the origin, so you may need to make a sprite for each one, which may leave you with the same performance problem.

            So, not a solution, but I spent a bit of time playing around with it and you may be able to get it to work. I had a problem getting the Label to calculate its sizes, etc. - this is because I don't want to parent it. Shouldn't I be able to just call mylabel.initialize() to force it to figure out its size - I can't call measure() directly.
            • 3. Re: graphics.drawText - sensible workarounds
              rkschulz Level 1

              Since I seem to come across this question in various places, here is what is a sort-of workable solution.

              By all means, if somebody has a nicer way of doing this, hit reply now and tell me how.

              - create a (invisible) component on startup that has labels for all the different text you need (and different fonts
              for that matter) and capture the BitmapData for the labels and store them
              - in the renderer, use graphics.beginBitmapFill(bitmapData, new Matrix( 1,0,0,1,xAdjust), false);
              - xAdjust is the X coordinate were the custom text is supposed to go (same deal for Y)

              This seems a very long way to do what I need to do, but it works and is sooo much quicker than creating hundreds of labels (the addChild method seems very slow). In my particular app there are about 10 different letters and about 30
              rows with 60 letters each and this is quick enough (whereas 30*60 addChilds aren't ;-)

              I do believe a (fast) graphics.drawText method would be a nice feature for Flex 3.0 ;-)