5 Replies Latest reply on Mar 3, 2010 8:31 PM by Vikram_S

    Problem with trying to show only part of bitmap on screen

    TehSanHo

      I am trying to set up a simple screen that shows a map, which is shown as a bitmap. The map is much larger than will fit on the screen so I want to show only part of it on the screen and allow the user to scroll around. I am attempting to do that by defining a scrollRect on the bitmap. When I do this the only part of the map that shows on the screen is the part that is defined by the scroll rect. This is good. The bad part is that the screen still allocates enough space for the whole bitmap image, so there is a large amount of blank screen below.

       

      Here's the screen (I have set the scrollRect to only 100 pixels high but it still allocates space for the rest of the image below):

       

      problem.png

       

      This is roughly what I have in my View:

       

       

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

       

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

       

              width="800"

       

              height="500"

       

              >

       

       

       

          <mx:Script>

       

              <![CDATA[

       

                  public function monitorReceiveMapFromServer(simpleEvent:SimpleEvent):void

       

                  {                              

       

                    

       

                      messageArea.text += "Map data received.\n";                                          

       

                      messageArea.text += "Drawing Map...\n";

       

                    

       

                      mapImage.source = map.drawMap();

       

                      mapImage.scrollRect = new Rectangle(0, 0, 600, 100)

       

                      mapImage.width = mainPanel.width * .9;                    

       

                    

       

                      messageArea.text += "Map drawn.\n";

       

                  }                             

       

              ]]>
          </mx:Script>

       


          <mx:VBox id="mainVbox"
              horizontalAlign="center">
        
              <mx:Panel id="mainPanel"
                  title="Main"
                  fontSize="14"
                  fontWeight="bold" width="720">

       


                  <mx:Form visible="true" width="100%">
                      <mx:TextArea id="messageArea"
                          editable="false"
                          width="100%"
                          height="120"
                          verticalScrollPolicy="auto"              
                          />          
                  </mx:Form>          
                  <mx:Image id="mapImage"
                      width="700"/>              
              </mx:Panel>
          </mx:VBox>
      </mx:Canvas>

       

      Thanks in advance for any help.

        • 1. Re: Problem with trying to show only part of bitmap on screen
          Vikram_S

          HI,

           

          Try it using mask. use fallowing steps.

           

          1. Create Image. Set Bitmap to image source.

          2. Create any UIComponent with display size (Rectanlge  ) and set mask to image.

          3. Drag the image to view map.

           

          Let me know if It is helpfull.

           

          simple..

           

          Thanks,

          Vikram Shityalkar

          • 2. Re: Problem with trying to show only part of bitmap on screen
            TehSanHo Level 1

            Hi Vikram,

             

            Thanks for your reply. When I try to set the display mask to a rectangle I get the error:

            "1067: Implicit coercion of a value of type flash.geom:Rectangle to an unrelated type flash.display:DisplayObject."

             

            When I use a Canvas I get closer. It shows the mask component in the correct size but the background is white and my image does not show:

             

            better.png

             

            I changed to code to be like this:

             

                      mapImage.mask = imageCanvas;

            ...

                        <mx:Canvas id="imageCanvas"
                                width="600"
                                height="200">                       
                            <mx:Image id="mapImage"                   
                                width="600"/>
                        </mx:Canvas>               

            • 3. Re: Problem with trying to show only part of bitmap on screen
              Vikram_S Level 2

              Hi,

               

              use this.

                              var ui:UIComponent = new UIComponent();

               

                              var sp:Sprite = new Sprite();
                              sp.graphics.beginFill(0x00,1);
                              sp.graphics.drawRect(0,0,100,100); // Draw here rectangle
                              sp.graphics.endFill();
                              ui.addChild(sp);
                              imageHolder.addElement(ui); // imageHolder is parent of image.
                              img.mask = ui; // img is actual image

                              ui.x = img.x;

                              ui.y = img.y;

              Thanks,

              Vikram

              • 4. Re: Problem with trying to show only part of bitmap on screen
                TehSanHo Level 1

                Hi Vikram,

                 

                I am getting the following error on this line:

                imageHolder.addElement(ui); // imageHolder is parent of image. // <- 1061: Call to a possibly undefined method addElement through a reference with static type mx.containers:VBox

                 

                It seems that addElement is only a method of other types of objects (OLTP) so I wonder if it is something else?

                 

                Just to be clear, looking at my code, I have set the parent of the Image to be a VBox.

                • 5. Re: Problem with trying to show only part of bitmap on screen
                  Vikram_S Level 2

                  Hi,

                  Use addChild method of vBox

                  Thanks,

                  Vikram