아래 예제를 실행하면 처음으로 3D Object를 확인 할 수 있다 ^_^ 감격의 기쁨 ~

 [ 그림 : 결과물 ]

- Scene, Camera, Viewport를 생성한다음 Object를 삽입한 이후 Rendering 한다가 기본임을 알고 넘어가면 쉽다.


 

this.addChild(_viewport);

_scene.addChild(_sphere);
_renderer.renderScene(_scene,_camera,_viewport);


1. 우리가 실제 볼 viewPort를 sprite에 넣어준다.
2. Scene에 Object를 삽입한다.
3. 우리가 지정한 Scene, Camera, Viewport 를 기준으로 렌더링을 한다.
=> 결과물은 viewport를 통해 볼 수 있게 된다.


 

//Main.mxml
<?xml version="1.0" encoding="utf-8"?>

<mx:Application

       creationComplete="init()"

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

       <mx:Script>

             <![CDATA[

                    import mx.core.UIComponent;

                    import sample.BasicSample;

                   

                    private function init():void{

                           var bs:BasicSample = new BasicSample();

                           var ui:UIComponent = new UIComponent();

                           ui.addChild(bs);

                           this.addChild(ui);

                    }

             ]]>

       </mx:Script>

</mx:Application>

//BasicSample.as

package sample

{

       import flash.display.Sprite;

      

       import org.papervision3d.cameras.Camera3D;

       import org.papervision3d.objects.primitives.Sphere;

       import org.papervision3d.render.BasicRenderEngine;

       import org.papervision3d.scenes.Scene3D;

       import org.papervision3d.view.Viewport3D;

 

       public class BasicSample extends Sprite

       {

             private var _scene:Scene3D;

             private var _viewport:Viewport3D;

             private var _camera:Camera3D;

             private var _renderer:BasicRenderEngine;

             private var _sphere:Sphere;

            

             public function BasicSample()

             {

                    //Scene, Camera, Viewport 생성 => Object 삽입 => 랜더링 

                    _scene = new Scene3D();

                    _camera = new Camera3D();

                    _viewport = new Viewport3D();

                    _sphere = new Sphere();

                    _renderer = new BasicRenderEngine();

                   

                    this.addChild(_viewport);

                    _scene.addChild(_sphere);              

                    _renderer.renderScene(_scene,_camera,_viewport);

             }

            

       }

}



 


아래 그림과 같이 차트에 그라디언트를 적용할 수 있다.



[샘플 적용하기]

<mx:ColumnSeries

showDataEffect="{slideIn}" hideDataEffect="{slideOut}"

styleName="waitCS" xField="serverName" yField="cpuPercent"

itemRenderer="com.izsolution.zion.comp.renderer.GradientChartRenderer"

displayName="사용량" >

<mx:fills>

<mx:SolidColor color="0xff0000"/>

</mx:fills>

</mx:ColumnSeries>


[코드]

package com.izsolution.zion.comp.renderer

{

       import flash.display.Graphics;

       import flash.geom.Rectangle;

      

       import mx.charts.ChartItem;

       import mx.charts.chartClasses.GraphicsUtilities;

       import mx.charts.series.items.ColumnSeriesItem;

       import mx.core.IDataRenderer;

       import mx.graphics.IFill;

       import mx.graphics.SolidColor;

       import mx.skins.ProgrammaticSkin;

 

 

       /**

        * 그라디언트 차트의 렌더러

        * @author wonsama

        */

       public class GradientChartRenderer extends ProgrammaticSkin implements IDataRenderer

       {

             private var _data:Object;  /* 차트에서 얻어오는 정보 */

            

             public function GradientChartRenderer()

             {

                    super();

             }

            

             public function get data():Object

             {

                    return _data;

             }

            

             public function set data(value:Object):void

             {

                    if (_data == value) return;

                    _data = value;

             }

            

             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

                    super.updateDisplayList(unscaledWidth, unscaledHeight);

                   

                   

                    var fill:IFill;

                    var state:String = "";     /*현재 차트의 상태*/

                   

                    if(_data is ChartItem && _data.hasOwnProperty('fill')){

                           //ColumnSeriesItem 적용 가능함 . 다른 차트라면 해당 SeriesItem 맞게 수정하여 사용하면 된다.

                           //SeriesItem에서 특정 (개수, 최대값, 최소값 ..) 가지고 와서 Renderer 반영 또한 가능 .

                           var tmpCI:ColumnSeriesItem = _data as ColumnSeriesItem;

                           fill = GraphicsUtilities.fillFromStyle(getStyle('fill'));

                           state = _data.currentState;                    //DISABLED ,FOCUSED ,FOCUSEDSELECTED ,NONE ,ROLLOVER ,SELECTED

                    }

                                                           

                    switch(state) //차트 상태값에 따른 색상 설정

                    {

                           case ChartItem.FOCUSED:

                           case ChartItem.ROLLOVER:

                           break;

                           case ChartItem.DISABLED:

                           break;

                           case ChartItem.FOCUSEDSELECTED:

                           case ChartItem.SELECTED:

                           break;

                    }

                   

                    //실제 차트를 그려주는 부분

                    if(fill){

                           var g:Graphics = graphics;

                           g.clear();

                                                    

                           var tmpColor:uint = (getStyle('fill') is SolidColor)?((getStyle('fill') as SolidColor).color):0x000000;

                          

                           var tmpWidth:Number = unscaledWidth;

                           var tmpHeight:Number = unscaledHeight;

                          

                           var secondX:Number = unscaledWidth/5;   // 1/5 지점에서 2번째를 그려주도록 한다.

 

//                         [ 참조사항 ]                      

//                         drawRoundRect(

//                               x,y,width,height,cornerRadius,

//                               color,alpha,

//                               gradientMatrix);

                          

//                         horizontalGradientMatrix(x,y,width,height);

                          

                           //좌측 그라디언트

                           drawRoundRect(

                                 0, 0, secondX, tmpHeight, null,

                                 [ tmpColor, 0xffffff ], 1,

                                 horizontalGradientMatrix(0, 0, secondX, tmpHeight)

                           );

                          

                           //우측 그라디언트

                           drawRoundRect(

                                 secondX, 0, tmpWidth-secondX, tmpHeight, null,

                                 [ 0xffffff, tmpColor ], 1,

                                  horizontalGradientMatrix(secondX, 0, tmpWidth-secondX, tmpHeight)

                           );

                          

                    }

             }

       }           

}

+ Recent posts