2 Replies Latest reply on Apr 27, 2011 2:47 AM by Karl_Sigiscar_1971

    How to put a huge image inside a small canvas?

    Kumar Pratik Level 1

      Hi All,

       

      I wanted to put a huge image inside a small canvas in a datagrid column. I am able to put image inside the canvas but somehow image is not looking very good, although it is completely visible. Is there any properties or any other way through which i can achieve this?

       

      Here is the code which I am using:

      <mx:DataGridColumn headerText="Image Name" >

      <mx:itemRenderer>

      <mx:Component>

       

      <mx:Canvas>

       

      <mx:Image height="100%" width="100%" id="showimg" source="{data.imgname}"

      scaleContent="true" maintainAspectRatio="true"/>

       

      </mx:Canvas>

       

      </mx:Component>

      </mx:itemRenderer>

      </mx:DataGridColumn>

       

      Thanks

        • 1. Re: How to put a huge image inside a small canvas?
          Shravan P Level 1

          Specify the width and height properties to the image, not in percentage. If you want to set that image in a canvas, specify the width and height values for canvas.

           

          You can embed image without using canvas, here is a example, check it out:

           

          <mx:Application

           

           

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

           

           

           

          <mx:Script>

          <![CDATA[

           

           

          import mx.collections.ArrayCollection;

           

          [

          Bindable]

           

          private var initDG:ArrayCollection = new ArrayCollection([

          {Artist:

          'Pavement', Album:'Brighten the Corners',

          Price:11.99, Cover:

          'image.JPG'}

          ]);

          ]]>

           

          </mx:Script>

           

           

           

          <mx:DataGrid id="myGrid" dataProvider="{initDG}" rowHeight="100">

           

          <mx:columns>

           

           

          <mx:DataGridColumn dataField="Artist"/>

           

          <mx:DataGridColumn dataField="Album"/>

           

          <mx:DataGridColumn dataField="Cover"

          itemRenderer="

          mx.controls.Image" width="50" />

           

          <mx:DataGridColumn dataField="Price"/>

           

          </mx:columns>

           

          </mx:DataGrid>

          </mx:Application>

          1 person found this helpful
          • 2. Re: How to put a huge image inside a small canvas?
            Karl_Sigiscar_1971 Level 3

            You need to activate smoothing (bilinear filtering) which in Flash Professional is done via a checkbox.

             

            In Flex:

             

            If you target Flash Player 9, use the Smooth Image component:

            http://cookbooks.adobe.com/post_Smooth_Image-4001.html

             

            If you target Flash Player 10, the Image control has a new property smooth. Just set it to true.