JavaScript
canvas
CreateJS
Angular
Angular2

Angular 4でcanvas要素を扱う方法

More than 1 year has passed since last update.


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へ変更しました