Angular 4 이야기

Angular 에서 HTML5의 canvas 요소와 어떻게 하면 연계할 수 있는지 알아 보았습니다. TypeScript 2.2, Angular 4에서 작성하는 방법입니다.

동작 샘플

동작 샘플은 Plunker에 올려 놓았습니다.

Angular 4 Example - How to use Canvas Element

절차 설명

template 내의 셀렉터에 ID 값을 할당해 둔다. ID 값을 할당하는 방법은 Angular의 기법을 사용한다. (예 : <canvas #hoge></canvas>)

클래스에서는 AfterViewInit 인터페이스를 implements 키워드로 지정. 이것은 ngAfterViewInit () 메소드 (라이프 사이클)의 구현을 요구합니다.

클래스의 멤버 변수에 ViewChild 어노테이션에서 ID 값을 사용하여 연결합니다.

ngAfterViewInit () 메소드에서는 canvas 요소의 참조를 취하게 된다. 이 때, nativeElement 프로퍼티이 그 이름대로 HTML 요소의 원시 엘리먼트가 된다.

구체적인 코드 샘플

원시 HTML5 Canvas를 제어하는 ​​코드입니다. 가장 간단한 예이므로 코드도 적고 참고하기 쉽다고 생각합니다.

import {AfterViewInit, Component, DoCheck, ViewChild} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <canvas #myCanvas width="400" height="400"></canvas>
      <div>
        幅 <input type="range" min="1" max="400" [(ngModel)]="rectW"/><br/>
        高さ <input type="range" min="1" max="400" [(ngModel)]="rectH"/><br/>
        塗りの色 <input type="color" [(ngModel)]="rectColor" placeholder="color" value="{{rectColor}}"/>
      </div>
    </div>
  `,
  styles: [`canvas {
    background: lightgray;
  }`]
})
export class AppComponent implements AfterViewInit, DoCheck {
  rectW = 100;
  rectH = 100;
  rectColor = '#FF0000';
  context: CanvasRenderingContext2D;

  @ViewChild('myCanvas') myCanvas;

  ngAfterViewInit() {
    // 参照をとれる
    const canvas = this.myCanvas.nativeElement;
    this.context = canvas.getContext('2d');

    this.draw();
  }

  /** 値の変更時を監視するライフサイクルイベント */
  ngDoCheck() {
    this.draw();
  }

  /** Canvas要素を更新します。 */
  draw() {
    const ctx = this.context;
    if (ctx) {
      ctx.clearRect(0, 0, 400, 400);
      ctx.fillStyle = this.rectColor;
      ctx.fillRect(0, 0, this.rectW, this.rectH);
    }
  }
}

구체적인 사례

웹 사이트 「 HTML5로 만든 디자인 도구 Particle Develop - ICS 」의 개발로, 이 수법으로 구현했습니다. 화면 왼쪽의 HTML5 Canvas 구현은 직접 API를 두드리는 것이 아니라 프레임 워크로 "CreateJS"을 사용합니다.

전망

canvas 요소를 사용하면 그래프 그리기 및 시각화에 유용합니다. Angular는 컴포넌트 사고이므로, canvas 요소를 내포한 컴퍼넌트가 늘어나면 모두 해피가 되는 것 같은 생각이 듭니다.

변경 내역

2017/04/20 : Angular 2 베타에서 Angular 4로 변경