'flex 객체 크기 변경'에 해당되는 글 1건

  1. 2014.06.10 [펌] flex 컴포넌트 크기 변경하기
00.Flex,Flash,ActionScript/Flex2014. 6. 10. 11:12

[펌] flex 컴포넌트 크기 변경하기

반응형


위 처럼 컨트롤 포인트를 이용하여 사이즈를 조절하는 컴포넌트를 만들려면...

1. 우선 각각의 포인트가 되는 사각형을 만듭니다.

ControlPoint.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="9" height="9">
 
 <s:Rect width="9" height="9">
  <s:fill>
   <s:SolidColor />
  </s:fill>
 </s:Rect>
</s:Group>


2. 그 다음 위 검정색 사각형을 위치시켜 놓을 컨트롤 박스(Group)를 만들고 위 사각형을 제 위치에 놓습니다.

<?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[
   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;
   
   protected function mouseDownListener( event:MouseEvent ):void
   {
    _startPointX = this.parent.mouseX;
    _startPointY = this.parent.mouseY;
    _currentPointID = ControlPoint(event.target).id;
    _x = this.x;
    _y = this.y;
    _width = this.width;
    _height = this.height;
    
    this.systemManager.addEventListener(MouseEvent.MOUSE_MOVE, moveListener);
    this.systemManager.addEventListener(MouseEvent.MOUSE_UP, upListener);
   }
  
   
   protected function moveListener( event:MouseEvent ):void
   {
    var pointer:ControlPoint = event.target as ControlPoint;
    
    var dx:Number = this.parent.mouseX - _startPointX;
    var dy:Number = this.parent.mouseY - _startPointY;
    
    if( _currentPointID == "topLeft" )
    {
     this.x = _x + dx;
     this.width = _width - dx;
     this.y = _y + dy;
     this.height = _height - dy;
    }
    else if( _currentPointID == "topCenter" )
    {
     this.y = _y + dy;
     this.height = _height - dy;
    }
    else if( _currentPointID == "topRight" )
    {
     this.width = _width + dx;
     this.y = _y + dy;
     this.height = _height - dy;
    }
    else if( _currentPointID == "middleLeft" )
    {
     this.x = _x + dx;
     this.width = _width - dx;
    }
    else if( _currentPointID == "middleRight" )
    {
     this.width = _width + dx;
    }
    else if( _currentPointID == "bottomLeft" )
    {
     this.x = _x + dx;
     this.width = _width - dx;
     this.height = _height + dy;
    }
    else if( _currentPointID == "bottomCenter" )
    {
     this.height = _height + dy;
    }
    else if( _currentPointID == "bottomRight" )
    {
     this.width = _width + dx;
     this.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>



이 컴포넌트를 이용하여 다음과 같은 결과물을 얻을 수 있습니다.


p.s. 하양감자님의 지적부분을 수정하여 업데이트 하였습니다.

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

출처:[Flex 4.0] 컨트롤 포인트를 이용하여 크기 조절하기...


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


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

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

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]
출처:[Flex 4.0] 컨트롤 포인트를 이용하여 크기 조절하기 - 두번째...


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

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 는 전에 올린 내용을 참고하시면 됩니다.


퍼블리싱 및 추천


Posted by 1010

티스토리툴바