5 Replies Latest reply on Jan 20, 2010 2:11 AM by venkateshk

    Problem of fillup with colored rectangles

    venkateshk

      The following is my canvas

      <mx:Canvas id="b1" x="10" y="10" height="40" width="300" borderStyle="solid" borderColor="black"/>

      To fill this canvas with rectangles i wrote the following code

                     for(var i:int=b1.x;i<b1.x+b1.width;i=i+15)
                      {
                          var line1:UIComponent = new UIComponent();
                          var lineThickness1:Number = 1;
                          var lineColor1:Number = 0x000000;
                          var lineAlpha1:Number = 1;
                          line1.graphics.lineStyle(lineThickness1,lineColor1,lineAlpha1);
                          line1.graphics.moveTo(i,b1.y);
                          line1.graphics.drawRect(i,b1.y,15,b1.height);
                          this.addChild(line1);
                      }

      its fine then

      <mx:HBox x="40" y="450">
              <mx:Label text="Enter Units :" fontWeight="bold" fontSize="15"/>
              <mx:TextInput id="tiUnits" width="30" maxChars="1"/>
              <mx:Button id="btn" label="OK" click="btnCall(tiUnits.text);"/>
          </mx:HBox>

      In btnCall()

      entered input in tiUnits should be converted to integer and by considering that value i need to fill the rectangles(width-15) of canvas one by one with colour

      eg: if input is 15 the first rectangle needs to fill with color and if i enter 30 then after first rectangle two rectangles each width 15 needs to fill

      in this way i have fill the canvas one after another

      please help me.......

        • 1. Re: Problem of fillup with colored rectangles
          RK... Level 3

          Sample code to draw rectangle,

           

          private function drawRectangle(event: MouseEvent): void {
               var unit: int = (Number(tiUnits.text) / 15);
               var colors: Array = [0x0000FF, 0x00FF00, 0xFF0000, 0xFF00FF, 0x00FFFF, 0xFFFF00]
               
               //Remove all rectangles from canvas
               b1.removeAllChildren();
               
               for(var i: int = 0; i < unit ; i++) {
                    var lineThickness1: Number = 1;
                    var lineColor1: Number = 0x000000;
                    var lineAlpha1: Number = 1;
                    //Random background color
                    var bgColor: uint = colors[Math.floor(Math.random() * colors.length)];
                    
                    var line1: UIComponent = new UIComponent();
                    line1.graphics.lineStyle(lineThickness1, lineColor1, lineAlpha1);
                    line1.graphics.beginFill(bgColor, 1.0);
                    line1.graphics.moveTo((i * 15), b1.y);
                    line1.graphics.drawRect((i * 15) - 1, -1, 15, b1.height - 1);
                    b1.addChild(line1);
               }
          }
          

           

          <mx:Canvas id="b1" x="10" y="10" height="40" width="300" borderStyle="solid" borderColor="black"/>
          <mx:HBox x="40" y="450">
               <mx:Label text="Enter Units :" fontWeight="bold" fontSize="15"/>
               <mx:TextInput id="tiUnits" width="30" />
               <mx:Button id="btn" label="OK" click="drawRectangle(event);"/>
          </mx:HBox>     
          

          • 2. Re: Problem of fillup with colored rectangles
            venkateshk Level 1

            Thanks for the reply RK

            It's working but the problem is every time when i am giving the units its removing the existing children and draw new rectangles

            but thing that i want is that if we give 2units it needs to draw 2 rectangles with 15 pixels each

            and again if i give another 3 units i want the rectangles from last position where the last rectangles drawn it doesn't need to remove the existing children

            i need the existing rectangles also

            • 3. Re: Problem of fillup with colored rectangles
              RK... Level 3

              Hope this code solves your problem

               

              private var lastPos: int = 0;
              
              private function drawRectangle(event: MouseEvent): void {
                   var unit: int = (Number(tiUnits.text) / 15);
                   var colors: Array = [0x0000FF, 0x00FF00, 0xFF0000, 0xFF00FF, 0x00FFFF, 0xFFFF00]
                   
                   for(var i: int = 0; i < unit ; i++) {
                        var lineThickness1: Number = 1;
                        var lineColor1: Number = 0x000000;
                        var lineAlpha1: Number = 1;
                        var bgColor: uint = colors[Math.floor(Math.random() * colors.length)];
                        
                        var line1: UIComponent = new UIComponent();
                        line1.graphics.lineStyle(lineThickness1, lineColor1, lineAlpha1);
                        line1.graphics.beginFill(bgColor, 1.0);
                        line1.graphics.moveTo(((lastPos + i) * 15), b1.y);
                        line1.graphics.drawRect(((lastPos + i) * 15) - 1, -1, 15, b1.height - 1);
                        b1.addChild(line1);
                   }
                   lastPos = lastPos + unit;
              }
              

              • 4. Re: Problem of fillup with colored rectangles
                venkateshk Level 1

                ThanQ RK its working


                • 5. Re: Problem of fillup with colored rectangles
                  venkateshk Level 1

                  its working

                  how to do if there are multiple canvas with one lastPos variable

                  and how to fill particular position of canvas not from left to right