Angular 4的讨论

我研究了一下如何在Angular中与HTML5的canvas元素进行连接。这是在TypeScript 2.2和Angular 4中的写法。

动作示范样例

我已将动作示例上传到了Plunker上。

Angular 4 Example – How to use Canvas Element

解释步骤

1. 将ID值分配给模板中的选择器。分配ID值的方式使用Angular的语法。（例：

1. ）

1. 通过使用implements关键字指定AfterViewInit接口来指定类。这将强制实现ngAfterViewInit()方法（生命周期）。

1. 使用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);
    }
  }
}

具體的例子 (jù tǐ de lì zi)

本网站「HTML5 设计工具 Particle Develop – ICS」的开发是采用了这种方法进行实现的。在屏幕的左侧，HTML5 Canvas 的实现并不是直接调用 API，而是使用了框架「CreateJS」。

展望

使用canvas元素可以在图形绘制和可视化方面发挥作用。由于Angular是组件思维，我觉得如果增加包含canvas元素的组件，大家会变得更加快乐。

修改历史

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