[Flex 4.0] 컨트롤 포인트를 이용하여 크기 조절하기 - 세번째... Flex 4

컨트롤 포인트를 이용해서 그림을 컨트롤 할 수 있는 소스입니다.

Image.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:control="org.jhl.control.*"
   width="64" height="64">
 
 <fx:Script>
  <![CDATA[
   override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    
    img.width = unscaledWidth;
    img.height = unscaledHeight;
   }
  ]]>
 </fx:Script>
 
 <s:BitmapImage id="img" source="@Embed('assets/rss.png')" />
 
 <control:ControlBox target="{this}" width="{this.width}" height="{this.height}"/>
 
</s:Group>

 




ControlBox 는 전에 올린 내용을 참고하시면 됩니다.



[Flex 4.0] 컨트롤 포인트를 이용하여 크기 조절하기 - 두번째... Flex 4

어제 만든 컴포넌트를 활용하여 원을 컨트롤하는 컴포넌트를 만들어 볼려고 합니다.


위 그림 처럼 외부는 컨트롤하는 외곽선과 컨트롤 점들로 그리고 내부는 원, 여기서 원이 사각형 또는 다각형의 모양일 수도 있구요

이렇게 구성하기 위해 먼저 원을 그리면..

Circle.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100" height="100">
 
 <fx:Script>
  <![CDATA[
   override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    
    var g:Graphics = this.graphics;
    
    g.clear();
    g.lineStyle(1, 0x000000);
    g.beginFill(0xEEEEEE);
    g.drawEllipse(0, 0, unscaledWidth, unscaledHeight);
    g.endFill();
   }
  ]]>
 </fx:Script>
  
</s:Group>

그리고 어제 만든 컴포넌트를 원 컴포넌트에 추가하면...
(원 컴포넌트를 컨트롤 하기 위해 컨트롤 컴포넌트에 target 이라는 속성을 둬서 원 컴포넌트를 컨트롤 하게 합니다.)

Circle.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:control="org.jhl.control.*"
   width="100" height="100">
 
 <fx:Script>
  <![CDATA[
   override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    
    var g:Graphics = this.graphics;
    
    g.clear();
    g.lineStyle(1, 0x000000);
    g.beginFill(0xEEEEEE);
    g.drawEllipse(0, 0, unscaledWidth, unscaledHeight);
    g.endFill();
   }
  ]]>
 </fx:Script>

 <control:ControlBox target="{this}" width="{this.width}" height="{this.height}"/>

</s:Group>

그리고 아래는 수정된 컨트롤 컴포넌트...

ControlBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:control="org.jhl.control.*"
   width="100" height="100" >
 
 <fx:Script>
  <![CDATA[
   import mx.core.UIComponent;
   private var _currentPointID:String;
   private var _startPointX:Number = 0;
   private var _startPointY:Number = 0;
   private var _x:Number;
   private var _y:Number;
   private var _width:Number;
   private var _height:Number;
   private var _target:UIComponent = null;
   
   
   public function set target( value:UIComponent ):void
   {
    _target = value;
   }


   protected function mouseDownListener( event:MouseEvent ):void
   {
    _startPointX = _target.parent.mouseX;
    _startPointY = _target.parent.mouseY;
    _currentPointID = ControlPoint(event.target).id;
    _x = _target.x;
    _y = _target.y;
    _width = _target.width;
    _height = _target.height;
    
    this.systemManager.addEventListener(MouseEvent.MOUSE_MOVE, moveListener);
    this.systemManager.addEventListener(MouseEvent.MOUSE_UP, upListener);
   }
  
   
   protected function moveListener( event:MouseEvent ):void
   {
    var dx:Number = _target.parent.mouseX - _startPointX;
    var dy:Number = _target.parent.mouseY - _startPointY;
    
    if( _currentPointID == "topLeft" )
    {
     _target.x = _x + dx;
     _target.width = _width - dx;
     _target.y = _y + dy;
     _target.height = _height - dy;
    }
    else if( _currentPointID == "topCenter" )
    {
     _target.y = _y + dy;
     _target.height = _height - dy;
    }
    else if( _currentPointID == "topRight" )
    {
     _target.width = _width + dx;
     _target.y = _y + dy;
     _target.height = _height - dy;
    }
    else if( _currentPointID == "middleLeft" )
    {
     _target.x = _x + dx;
     _target.width = _width - dx;
    }
    else if( _currentPointID == "middleRight" )
    {
     _target.width = _width + dx;
    }
    else if( _currentPointID == "bottomLeft" )
    {
     _target.x = _x + dx;
     _target.width = _width - dx;
     _target.height = _height + dy;
    }
    else if( _currentPointID == "bottomCenter" )
    {
     _target.height = _height + dy;
    }
    else if( _currentPointID == "bottomRight" )
    {
     _target.width = _width + dx;
     _target.height = _height + dy;
    }
    
    event.updateAfterEvent();
   }
   
   
   protected function upListener( event:MouseEvent ):void
   {
    this.systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, moveListener);
    this.systemManager.removeEventListener(MouseEvent.MOUSE_UP, upListener);
   }
   
   
   override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    
    var g:Graphics = this.graphics;
    
    g.clear();
    g.lineStyle(1, 0x000000);
    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
   }
  ]]>
 </fx:Script>
  
 <control:ControlPoint id="topLeft" left="-4" top="-4"
        mouseDown="mouseDownListener(event)" />
 <control:ControlPoint id="topCenter" top="-4" horizontalCenter="0"
        mouseDown="mouseDownListener(event)" />
 <control:ControlPoint id="topRight" right="-4" top="-4"
        mouseDown="mouseDownListener(event)" />
 
 <control:ControlPoint id="middleLeft" left="-4" verticalCenter="0"
        mouseDown="mouseDownListener(event)" />
 <control:ControlPoint id="middleRight" right="-4" verticalCenter="0"
        mouseDown="mouseDownListener(event)"/>
 
 <control:ControlPoint id="bottomLeft" left="-4" bottom="-5"
        mouseDown="mouseDownListener(event)" />
 <control:ControlPoint id="bottomCenter" bottom="-5" horizontalCenter="0"
        mouseDown="mouseDownListener(event)" />
 <control:ControlPoint id="bottomRight" right="-4" bottom="-5"
        mouseDown="mouseDownListener(event)" />
 
</s:Group>

아래는 위 코드의 결과물입니다.


Flex 4 배포버전 : 4.0.0.14159 [2010/03/21]
Flex 4 현재버전 : 4.1.0.16076 [2010/06/10]

1 2 3 4 5 6 7 8 9 10 다음