Dynamisch mehrere Leinwand Bereich basierend auf JSON

Question

Ich benutze Angular2 und HTML5 Canvas. Basierend auf json zur Verfügung gestellt, möchte ich mehrere divs mit Canvas-Bereich in ihnen erstellen.

Dies ist, wie mein divs mit Canvas-Bereich (HTML CODE)

<div class="masterpage" *ngFor="let x of masterPages" draggable [dragScope]="'masterpage'" [dragData]="x"> 
    <canvas #myCanvas width="105" height="149" style="background:lightgray;"></canvas> 
</div> 

.ts Code

ngAfterViewInit() { 
    let canvas = this.myCanvas.nativeElement; 
    this.context = canvas.getContext("2d"); 
    this.tick(this.masterPages); 
} 

tick(masterPages) { 
    var ctx = this.context; 
    ctx.clearRect(0, 0, 150, 150); 
    for (let j = 0; j < this.masterPages[this.count].areas.length; j++) { 
     ctx.fillStyle = this.masterPages[this.count].areas[j].type; 
     ctx.fillRect(masterPages[this.count].areas[j].x/2, masterPages[this.count].areas[j].y/2, masterPages[this.count].areas[j].width/2, masterPages[this.count].areas[j].height/2); 
    } 
    this.count = this.count + 1; 
} 

unten ist mein json beid Leinwand

masterPages = [{ 
     areas: [ 
      { 
       type: "FlowArea", 
       width: "183.0", 
       x: "12.0", 
       y: "40.0", 
       id: "FAR.1", 
       height: "237.0" 
      }, 
      { 
       type: "StaticArea", 
       width: "210.0", 
       x: "0.0", 
       y: "7.0", 
       id: "SAR.2", 
       height: "25.0" 
      }, 
      { 
       type: "StaticArea", 
       width: "210.0", 
       x: "0.0", 
       y: "282.0", 
       id: "SAR.1", 
       height: "15.0" 
      }, 
      { 
       type: "StaticArea", 
       width: "2.0", 
       x: "6.0", 
       y: "26.0", 
       id: "SAR.3", 
       height: "256.0" 
      } 
     ] 
    }, 
    { 
     areas: [ 
      { 
       type: "FlowArea", 
       width: "183.0", 
       x: "12.0", 
       y: "13.25", 
       id: "FAR.1", 
       height: "265.0" 
      }, 
      { 
       type: "StaticArea", 
       width: "210.0", 
       x: "0.0", 
       y: "282.0", 
       id: "SAR.1", 
       height: "15.0" 
      } 
     ] 
    } 
    ]; 

nach json erzeugen sollte einige Formen haben, aber in meinem Fall kommt zweite Leinwand leer

Answer 1

mit @ViewChildren statt @ViewChild und iterieren jede Leinwand mit

let canvas = this.myCanvas.toArray()[i].nativeElement; 

Also, wer Zugang zu jedem von Versuchen erhalten Der Canvas-Bereich wird dynamisch erstellt.

Answer 2

Holen Sie sich einfach den JSON vom Server und parsen Sie ihn mit JSON.parse.

Zum Zeichnen eines Leinwanddiagramms.

können Sie diese Bibliothek verwendet Javascript für jQuery Plotten - http://www.flotcharts.org/

Es ist erhalten Sie eine grafische Darstellung über JSON-Daten plotten helfen.

Ajax Update - http://www.flotcharts.org/flot/examples/ajax/index.html Für Echtzeit-Aktualisierung - http://www.flotcharts.org/flot/examples/realtime/index.html Probe statische plot - http://www.flotcharts.org/flot/examples/basic-usage/index.htm

var d = []; 
for (var i = 0; i < 14; i += 0.5) { 
    d .push([i, Math.sin(i)]); 
} 
var do = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
// A null signifies separate line segments 

var dd = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; 

$.plot("#placeholder", [ d, do, dd]); 

Answer 3

Das Hauptproblem ist, dass die Kennung (#myCanvas) kann auf ein Element nur ein Referenzhandhaben.

Und leider, soweit ich weiß, gibt es keine Möglichkeit, mehrere eindeutige Kennzeichnungen dynamisch zu generieren.

Um mehrere verschiedene Canvas-Elemente zu aktualisieren, müssen Sie ihre Referenzen auf andere Weise erhalten. Einer von ihnen ist das DOM direkt, zu manipulieren, aber es wird nicht empfohlen, wie:

let canvas = document.getElementById('canvas' + i); 

Ein weiteres Beispiel eines querySelector wäre die Verwendung (über ElementRef):

this.elementRef.nativeElement.querySelector('.myCanvasClass'); 

Werfen Sie einen Blick und die ViewChildren-Dokumentation. Es könnte etwas Licht vergießen, was Sie versuchen zu tun: https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html