2 Replies Latest reply on Jul 24, 2009 2:57 PM by aprildavid

    how to add text to canvas using Action script

    aprildavid Level 1

      I need to add a text to canvas, the position of text will change when the canvas size changed. Following is my code: (The label didn't show on screen at all). Could you tell me what is wrong with my code?

       

      import flash.display.CapsStyle;
          import flash.display.Graphics;
          import flash.display.JointStyle;
          import flash.display.LineScaleMode;
         
          import mx.collections.ArrayCollection;
          import mx.containers.Canvas;
          import mx.controls.Label;
          import mx.controls.Text;
         
          public class SpectrumCanvas extends Canvas
          {
              private var MAX_ROW:int=40;
              private var MAX_COL:int=10;
              private var dataCollection:ArrayCollection ;
              private var colors:Array=new Array(0xfe2b00,0xff8905,0xfbf700,0xb5fe00,0x0cff04,0x00f6f5,0x03a1fe,0x001afc);
              private var values:Array=new Array(80,70,60,50,40,30,20,0);
              // var canvas:Canvas;
              private var rWidth:int;
              private var rHeight:int;
              private var _alpha:Number = 1;
         
              private var leftMargin:int;
              private var rightMargin:int;
              private var topMargin:int;
              private var bottomMargin:int;
             
              private static const MARGIN_LEFT:Number=0.10;
              private static const MARGIN_TOP:Number=0.05;
              private static const MARGIN_DOWN:Number=0.05;
              private  static const MARGIN_RIGHT:Number=0.20;
             
              private static const LABEL_TOP_MARGIN=0.20;
              private static const LABEL_SIDE_MARGIN=0.08;
             
              private var ymax:Label;
              private var ymid:Label;
              private var ymin:Label;
              private var xfreq1:Label;
              private var xfreq2:Label
              public function SpectrumCanvas(w:int,h:int)
              {
                 
                  this.width=w;
                  this.height=h;
                  //this.percentWidth=1;
              //    this.percentHeight=1;
                  this.minHeight=300;
                  this.minWidth=400;
                  dataCollection =new ArrayCollection();
                 
                  ymax=new Label();
                  ymax.text="-180";
                  ymax.x=100;
                  ymax.y=200;
                  this.addChild(ymax);
                  ymid=new Label();
                  ymid.text="-90";
                  this.addChild(ymid);
                  ymin=new Label();
                  ymin.text="0";
                  this.addChild(ymin);
                  xfreq1=new Label();
                  xfreq1.text="2.400 GHz";
                  this.addChild(xfreq1);
                  xfreq2=new Label();
                  xfreq2.text="2.420 GHz";
                  this.addChild(xfreq2);
              }
             
              public function updateData(data:Array)
              {
                  if(dataCollection.length<MAX_ROW)
                      dataCollection.addItem(data);
                  else
                      {
                          for(var i:int=0;i<MAX_ROW-1;i++)
                          {
                              var a:Array=(Array)(dataCollection[i+1]);
                              dataCollection[i]=a[0];
                          }
                          dataCollection.setItemAt(data,MAX_ROW-1);
                      }
                  updateDisplayList(this.width, this.height);
                 
                 
              }
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                  var g:Graphics = graphics;
                  g.clear();
                  var width:Number = this.width;
                  var height:Number = this.height;
                  leftMargin=MARGIN_LEFT*width;
                  rightMargin=MARGIN_RIGHT*width;
                  topMargin=MARGIN_TOP*height;
                  bottomMargin=MARGIN_DOWN*height;
                 
                  rWidth=(width-leftMargin-rightMargin)/MAX_COL;
                  rHeight=(height-topMargin-bottomMargin)/MAX_ROW;
                 
                  var marginColor:uint = 0xFFFF00;
                  g.lineStyle(1, marginColor, 1, true,LineScaleMode.NONE, CapsStyle.NONE, JointStyle.MITER);
                  g.moveTo(leftMargin, topMargin);
                  g.drawRect(leftMargin,topMargin,width-leftMargin-rightMargin,height-topMargin-bottomMargi n);
                 
                  for(var i:int=0;i<dataCollection.length;i++)
                  {
                      var y:int=height-bottomMargin-(i+1)*rHeight;
                      var d:Array=dataCollection[i];
                      for(var j:int=0;(j<MAX_COL&&j<d.length);j++)
                      {
                          var x:int=leftMargin+j*rWidth;
                          drawSpec(x,y,d[j]);
                      }
                  }
                      
                  var ymaxx:int=leftMargin-25;
                  var ymidx:int=leftMargin-15;
                  var yminx:int=leftMargin-5;
                  var ymaxy:int=topMargin;
                  var ymidy:int=topMargin+(height-topMargin-bottomMargin)/2;
                  var yminy:int=height-bottomMargin;
                  var xfreq1x:int=leftMargin;
                  var xfreq2x:int=(width-100-rightMargin);
                  var xfreqy:int=height-topMargin;
                
                  ymax.x=ymaxx;
                  ymax.y=ymaxy;
                
                  ymid.x=ymidx;
                  ymid.y=ymidy;
                
                  ymin.x=yminx;
                  ymin.y=yminy;
            
                  xfreq1.x=xfreq1x;
                  xfreq1.y=xfreqy;
          
                  xfreq2.x=xfreq2x;
                  xfreq2.y=xfreqy;
                }
               
                private function drawSpec( x:int,y:int, value:Number)
                {
                    var c:uint;
                    var g:Graphics = graphics;
                    for(var i:int=0;i<values.length;i++)
                    {
                        if(value> values[i])
                        {
                            c=colors[i];
                            break;
                        }
                    }
                    g.lineStyle(0, c, _alpha);
                     g.beginFill(c, _alpha);
                     g.drawRect(x,y,rWidth+1,rHeight+1);
                  g.endFill();
                }  
              }