typescript - Hur skapar man en Angular 2-komponent baserad på canvas som svarar på att den ändras i storlek?

Jag vill skapa en komponent vars vy helt enkelt är ett canvas-element. Jag vill att denna komponent ska:

  • Fyll vilket element det än placeras i med canvasen
  • Bestäm dess bredd och höjd under dess initialiseringsprocess
  • Vet när det har ändrats i storlek, räkna ut dess nya höjd och bredd, och reagera lämpligt.

Jag antar att jag kan uppnå den första delen genom att ange bredden och höjden på duken i min komponents mall som 100%, på detta sätt:

@Component({
  selector: 'canvas-component',
  template:'<canvas style="width:100%; height:100%"></canvas>'
})

Men jag har ingen aning om hur man ska gå tillväga med den andra eller tredje delen.

Det ultimata målet är att kunna rita former på duken som tar upp samma relativa storlek av duken, oavsett dess storlek. Som ett exempel vill jag rita en cirkel med en diameter som är 3/4 av dukens bredd - så om duken växer eller krymper, bör cirkeln ritas om och växa eller krympa också.

Jag vet inte om det spelar någon roll, men jag gör webbappen i Typescript.

Vet någon ett bra sätt att uppnå detta? Jag letar efter att göra det på det mest "Angular-sätt" möjligt, eftersom detta är ett personligt projekt som jag använder för att lära mig Angular 2.

Tack i förväg!

Svar #1

Detta är långt ifrån ett "svar" men borde få dig att komma igång:

Komponent

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myCanvas') canvas;

  onResize() {
    // Not a good thing to do but will get you going.
    // I need to look into the Renderer service instead.
    const canvasElement = this.canvas.nativeElement;

    // These don't change (canvas intrinsic dimensions)
    const canvasWidth = canvasElement.width;
    const canvasHeight = canvasElement.height;

    // These will change (scaling applied by the style)
    const computedStyles = getComputedStyle(canvasElement);
    const computedWidth = computedStyles.width;
    const computedHeight = computedStyles.height;
  }
}

Mall

<div (window:resize)="onResize()"></div>
<canvas #myCanvas style="width:100%; height:100%" width="150" height="150"></canvas>

Svar #2

Ett alternativt sätt: introducera en föräldrakontainer i mallen och bind till dess dimensioner.

I canvas-panel.component.html

<div #canvasWrapper class="canvas-wrapper" (window:resize)="draw()">
  <canvas id="wfcanvas" #canvasId
     [height]="canvasWrapper.offsetHeight" 
     [width]="canvasWrapper.offsetWidth">
  </canvas>
</div>

I canvas-panel.component.css

.canvas-wrapper {
  width: 94%;
  height: 128px;
  margin: auto;
}

I canvas-panel.component.ts

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-canvas-panel',
  templateUrl: './canvas-panel.component.html',
  styleUrls: ['./canvas-panel.component.scss']
})
export class CanvasPanelComponent implements OnInit {

  @ViewChild('canvasId') canvasRef: ElementRef;

  constructor() {}

  ngOnInit() {}

  draw() {
    let ctx: CanvasRenderingContext2D =
      this.canvasRef.nativeElement.getContext('2d');

    console.log("canvas size: ", ctx.canvas.width, ctx.canvas.height);
  }
}

Relaterade artiklar