javascript - Angular2-komponent baserad på canvas: hur ritar man inuti?

Jag skrev en enkel komponent baserad på en canvas, som jag ändrar storlek på med en Input()-egenskap i följeslagarklassen (TypeScript-kod). Vad jag skulle vilja göra är att rita canvas-elementet inuti följeslagarklassen, vars kod finns nedan: vad är det enklaste sättet att uppnå det? (Se gärna kommentaren i koden: jag skulle vilja rita en blå rektangel inuti canvas från konstruktorn).

import {Component, View, Input} from 'angular2/core';

@Component({
    selector: 'chess-diagram',
})
@View({
    template: `<canvas class='chess-diag'
     [attr.width]='_size'
     [attr.height]='_size'></canvas>`,
})
export class ChessDiagram {
    private _size: number;

    constructor(){
        this._size = 150;
        // Here I would like to draw a blue rectangle inside the canvas.
    }

    get size(){
        return this._size;
    }

    @Input () set size(newValue: number){
        this._size = Math.floor(newValue);
    }
}

Svar #1

Du kan använda ViewChild-annoteringen för att ta en instans av ditt canvas-element. Efter det är allt vanlig js.

import {Component, View, Input, ViewChild, ElementRef} from 'angular2/core';

@Component({
    selector: 'chess-diagram',
})
@View({
    template: `<canvas #chessCanvas class='chess-diag'
     [attr.width]='_size'
     [attr.height]='_size'></canvas>`,
})
export class ChessDiagram {
    private _size: number;

    // get the element with the #chessCanvas on it
    @ViewChild("chessCanvas") chessCanvas: ElementRef; 

    constructor(){
        this._size = 150;
    }

    ngAfterViewInit() { // wait for the view to init before using the element

      let context: CanvasRenderingContext2D = this.chessCanvas.nativeElement.getContext("2d");
      // happy drawing from here on
      context.fillStyle = 'blue';
      context.fillRect(10, 10, 150, 150);
    }

    get size(){
        return this._size;
    }

    @Input () set size(newValue: number){
        this._size = Math.floor(newValue);
    }
}

@ViewChild kommer att returnera ett ElementRef som du kan få det inhemska canvas-elementet från genom att använda nativeElement-egenskapen.

Relaterade artiklar