47
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

Angular 4でcanvas要素を扱う方法

Angular 4の話

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

動作サンプル

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

手順の解説

  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へ変更しました
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
47
Help us understand the problem. What are the problem?