미리보기 켄버스

미리보기 켄버스
=> 켄버스에 조그마한 켄버스가 추가되어 있음
=> 미니 켄버스는 마우스 위치에 따라 4개 위치에 존재하게 됨
=> set previewCanvas 를 통해 미리보기 켄버스 등록가능
=> 사용법 : Canvas에 마우스를 가져가면 조그마한 켄버스가 보이게 됨.
=> 크기조절 : 소스 내부 상수값을 수정하면 됨.

쓸일 있음 수정하셔서 맘대로 ~ 잘 쓰세요~ ^^

사용예)

<?xmlversion="1.0" encoding="utf-8"?>

<mx:Application

       creationComplete="init()"

       xmlns:compo="wonsama.compo.canvas.*"

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

       <mx:Script>

             <![CDATA[

                    importmx.containers.Canvas;

                    private function init():void{

                           var myCanvas:Canvas = new Canvas;

                           myCanvas.setStyle("backgroundColor",0xff0000);

                           prev.previewCanvas =myCanvas;

                    }

             ]]>

       </mx:Script>

       <compo:PreViewCanvas id="prev"width="100%" height="100%"/>

</mx:Application>

소스)

package wonsama.compo.canvas

{

 import flash.events.MouseEvent;

 

 import mx.containers.Canvas;

 import mx.core.mx_internal;

 import mx.events.FlexEvent;

 

  public class PreViewCanvas extends Canvas

 {

  /////////////////////////////////////////////////

  //

  // privateconst

  //

  private const LOC_1:uint = 0x01;

  private const LOC_5:uint = 0x11;

  private const LOC_7:uint = 0x10;

  private const LOC_11:uint = 0x00;

 

  private const PREV_SIZE:Number = 0.2; // Range : 0(MIN) ~ 1(MAX)

  private const PREV_GAP:Number = 20;

 

  /////////////////////////////////////////////////

  //

  // privatevariable

  //

  private var _previewCanvas:Canvas;

  private var _width:Number;

  private var _height:Number;

  private var _prePos:Number;

 

  /////////////////////////////////////////////////

  //

  // publicfunction

  //

  public function PreViewCanvas()

  {

   super();

  

  addEventListener(MouseEvent.ROLL_OUT,rollOutHandler);

  addEventListener(MouseEvent.ROLL_OVER,rollOverHandler);

  addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);

  

  }

 

  /////////////////////////////////////////////////

  //

  // privatefunction

  //

 

 

  /**

   * 현재 위치를 알려준다.

   * @param xPos x좌표

   * @param yPos y좌표

   * @return 위치를 알려준다. LOC_X 참조

   * */

  private function getPos(xPos:Number, yPos:Number):uint{

   var rtn:Number = 0;

  

   if(xPos>=0.5) rtn+=0x01;

   if(yPos>=0.5) rtn+=0x10;

  

   return rtn;

  }

   

  /////////////////////////////////////////////////

  //

  //listener function

  //

 

  private function movePreview(pos:uint):void{

   if(_prePos==pos) return;

  

   switch(pos){

    case LOC_1:

     _previewCanvas.x = PREV_GAP;

     _previewCanvas.y = _height - PREV_GAP -_previewCanvas.height;

    break;

   

    case LOC_5:

     _previewCanvas.x = PREV_GAP;

     _previewCanvas.y = PREV_GAP;

    break;

   

    case LOC_7:

     _previewCanvas.x = _width - PREV_GAP-_previewCanvas.width;

     _previewCanvas.y = PREV_GAP ;

    break;

   

    case LOC_11:

     _previewCanvas.x = _width - PREV_GAP -_previewCanvas.width;

     _previewCanvas.y = _height - PREV_GAP -_previewCanvas.height;

    break;

   }

  

   _prePos = pos;

  }

 

  /**

   * 마우스 핸들러

   * ==> 미리보기 화면 이동시켜주기 

   * @param e 마우스 이벤트

   * */

  private function mouseMoveHandler(e:MouseEvent):void{

   var pos:uint = getPos(e.localX/_width,e.localY/_height);

   movePreview(pos);

  }

   

  private function rollOutHandler(e:MouseEvent):void{

   _previewCanvas.visible = false;

  }

  private function rollOverHandler(e:MouseEvent):void{

   _previewCanvas.visible = true;  

  }

 

 

  /////////////////////////////////////////////////

  //

  // get /set function

  //

 

  public function get previewCanvas():Canvas{

   return _previewCanvas;

  }

 

  public function set previewCanvas(value:Canvas):void{

       this.removeAllChildren();

       this.addChild(value);

       value.visible= false;

   this._previewCanvas = value;

  }

 

  /////////////////////////////////////////////////

  //

  //override function

  //

 

  override protected function createChildren():void{

   super.createChildren();

  

   //테스트용 Canvas를 생성하여 준다.

   if(!_previewCanvas){

    _previewCanvas = new Canvas;

    _previewCanvas.visible = false;

    _previewCanvas.setStyle("backgroundColor",0x87D741);

    this.addChild(_previewCanvas);       

   }

  

  }

   

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

  

   super.updateDisplayList(unscaledWidth,unscaledHeight);

  

   _width = unscaledWidth;

   _height = unscaledHeight;  

  

   _previewCanvas.width = this.unscaledWidth * PREV_SIZE;

   _previewCanvas.height = this.unscaledHeight * PREV_SIZE;

  

   trace(_previewCanvas);

  }

 }

}