Angular 4でcanvas要素を扱う方法

Angular 4の話

AngularでHTML5のcanvas要素とどうやったら連携できるのか調べてみました。TypeScript 2.2, Angular 4での書き方です。

動作サンプル

動作サンプルはPlunkerにアップしておきました。

• Angular 4 Example - How to use Canvas Element

手順の解説

1. template内のセレクターにID値を割り当てておく。ID値の割り当て方はAngularの記法を使う。(例 : <canvas #hoge></canvas>)
2. クラスではAfterViewInitインターフェースをimplementsキーワードで指定。これによってngAfterViewInit ()メソッド(ライフサイクル)の実装が義務付けられる。
3. クラスのメンバー変数にViewChildアノテーションでID値を使って関連付けを行う。
4. 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);
    }
  }
}

具体的な事例

Webサイト「HTML5製のデザインツール Particle Develop - ICS」の開発で、この手法で実装しました。画面左側のHTML5 Canvasの実装は直接APIを叩くのではなく、フレームワークとして「CreateJS」を使っています。

展望

canvas要素を使えばグラフ描画やビジュアライゼーションに役立ちます。Angularはコンポーネント思考なので、canvas要素を内包したコンポーネントが増えればみんなハッピーになるような気がします。

変更履歴

• 2017/04/20 : Angular 2 BetaからAngular 4へ変更しました