앵귤러 튜토리얼(Angular tutorial) - 33 : 이벤트와 애니메이션(1)

저번시간에 우리는 Validator와 관련된 내용을 살펴 보았습니다.
이번시간에는 브라우저 이벤트를 감지하여 처리하는 방법에 대해서 조금씩 살펴 보겠습니다.
프로젝트는 기존에 만든 sixStudy를 그대로 사용하겠습니다.

먼저 살펴볼 내용은 마우스와 관련된 이벤트 처리방법 입니다.
사용자의 마우스와 관련된 이벤트 감지는 간단하게 속성만 달아주면 손쉽게 부여할 수 있습니다.
이를 위해 사용자가 특정 영역을 드래그(drag)하는 기능을 만들어 보도록 하겠습니다.
* 대상 : app.component.html

<!-- <input type="text" name='_title' [formControl]="title" my_check/> -->
<!-- my_check은 my-check디렉티브 셀렉터이며, 유효성 검사 함수입니다. -->
<!-- <div *ngIf="title.errors?.wrongID">
  {{title.errors?.wrongID}} 형식은 사용할 수 없는 아이디 입니다.
</div> -->
<div [ngStyle]="" (mousemove)="" (mousedown)="" (mouseup)="" (mouseleave)="">Drag Area</div>

 

div 테그에 4개의 속성과, ngStyle이라는 디렉티브를 추가하였습니다.
ngStyle에는 해당 테그의 스타일과 관련된 내용이 들어갈 예정이며 나머지 4개의 속성에는 이벤트를 위한 처리 함수가 적용 될 예정입니다.
먼저 ngStyle에 스타일을 적용하여 보겠습니다.

* 대상 : app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';  //추가
import { my_check } from './my-check.directive';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = new FormControl('', my_check()); 

  position = {
    left : '0px',
    top : '0px',
    width : '200px',
    height : '200px',
    border : '1px solid gray',
    position : 'absolute'
  };

}

 

* 대상 : app.component.html

<!-- <input type="text" name='_title' [formControl]="title" my_check/> -->
<!-- my_check은 my-check디렉티브 셀렉터이며, 유효성 검사 함수입니다. -->
<!-- <div *ngIf="title.errors?.wrongID">
  {{title.errors?.wrongID}} 형식은 사용할 수 없는 아이디 입니다.
</div> -->
<div [ngStyle]="position">Drag Area</div>

 

이렇게 해 주고나면 div테그에 나름 스타일(?)이 적용된 것을 볼 수 있습니다.

사각형이 완성되었습니다~

 

드래그(drag)라는 기능의 진행상태는 대상 테그에 마우스가 있으면서, 마우스의 버튼이 내려간(down) 상태에서 움직일때(move)를 의미 합니다.
드래그(drag)가 끝났음은 마우스가 대상에 없거나 또는 마우스 버튼이 올라간(up) 상태를 의미합니다.
위 조건을 토대로 마우스가 움직이는 조건을 위해서 먼저 app컴포넌트에 변수를 만들어 줍니다.

* 대상 : app.component.ts

  //생략..
  private canElementMove = false;  //마우스의 상태를 나타내는 변수 입니다.

  position = {
    left : '0px',
    top : '0px',
    width : '200px',
    height : '200px',
    border : '1px solid gray',
    position : 'absolute'
  };

  set mouseStatus(arg){  //마우스의 상태가 변화됨을 적용하는 함수 입니다.
    this.canElementMove = arg;
  }
  //생략..

 

그러면 1차로 html에 적용하여 보겠습니다.

* 대상 : app.component.html

<div [ngStyle]="position" (mousedown)="mouseStatus = true" (mouseup)="mouseStatus = false"  (mouseleave)="mouseStatus = false">Drag Area</div>

 

이렇게 하고 나면 대상안에 존재하면서 마우스가 down인 경우에는 움직이는 변수값이 true가 됩니다.
그리고 마우스가 up이거나 대상을 벗어나면(leave) 움직이는 변수값이 false가 됩니다.
자, 이제 mouse가 down값을 한번 나타내 보도록 하겠습니다.

* 대상 : app.component.html

<div [ngStyle]="position" (mousemove)="getEvent($event)" (mousedown)="mouseStatus = true" (mouseup)="mouseStatus = false"  (mouseleave)="mouseStatus = false">Drag Area</div>

 

* 대상 : app.component.ts

  //생략..
  getEvent(event) : void{
    if(this.canElementMove){
      console.log(event)
    }
  }
  //생략..

 

위 조건을 토대로 해당 테그에 한번 마우스 버튼을 down한 뒤에 움직여(leave) 보도록 합니다.

해당 이벤트의 값이 출력되고 있습니다.

 

event 값으로 다양한 데이터가 나오는 것을 볼 수 있습니다.
여기서 우리가 사용할 값은 clientX와 clientY값 입니다.
해당 값을 가져와서 position 변수에 top과 left값을 변경해 주도록 합니다.
이때 주의해야될 점으로는, top과 left값을 그냥 적용하면 마우스의 커서에 해당 테그의 좌측 상단의 꼭지점이 위치하게 되므로 넓이와 높이의 절반 값을 빼 주도록 합니다.

* 대상 : app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';  //추가
import { my_check } from './my-check.directive';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = new FormControl('', my_check()); 

  private canElementMove = false;  //마우스의 상태를 나타내는 변수 입니다.

  position = {
    left : '0px',
    top : '0px',
    width : '200px',
    height : '200px',
    border : '1px solid gray',
    position : 'absolute'
  };

  set mouseStatus(arg){
    this.canElementMove = arg;
  }

  getEvent(event) : void{
    if(this.canElementMove){
      //console.log(event)
      this.position.left = event.clientX - 100  + 'px';
      this.position.top = event.clientY - 100   + 'px';
    }
  }

}

 

이렇게 하고나서 이제 한번 드래그를 해 보도록 합니다.

움직입니다!

 

나름 그럴싸한 이벤트를 감지하여 적용 해 주는 기능이 완성되었습니다.
사실..drag나 resize등 관련된 모듈이 있으므로 해당 모듈을 사용하는 것이 더 좋습니다.

이미 그럴싸하게 애니메이션과 효과등이 잘 꾸며져 있기 때문 입니다. ^-^;

여기서 중요한 점은 엘리먼트(Node)에 접근하지 않고 값을 바꾸었다는 점 입니다.

이러한 방식으로 화면에서의 특정 이벤트를 관리(control) 합니다.

이번시간에는 브라우저 이벤트를 감지하여 처리하는 방법 중 마우스와 관련된 내용에 대해서 살펴보았습니다.

sixStudy.zip

0.01MB