基于json提供的动态生成多个画布区域

Question

我使用的是angular2和html5画布。基于JSON提供，我想创建与他们内的画布区域的多个div。

这是如何的json

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" 
      } 
     ] 
    } 
    ]; 

根据JSON两个帆布生成我的div画布区域（HTML代码）

<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码

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; 
} 

下面

应该有一些形状，但在我的情况下，第二个画布是空的

Answer 1

尝试使用@ViewChildren代替@ViewChild和使用

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

那么，谁将会得到每一个访问的每个画布迭代动态创建的画布区域。

Answer 2

刚刚从服务器获取JSON和用JSON.parse解析它。

用于绘制画布图。

你可以使用这个库中的JavaScript绘制的jQuery - http://www.flotcharts.org/

它会帮助你通过绘制JSON数据的图表。

对AJAX更新 - http://www.flotcharts.org/flot/examples/ajax/index.html 对于实时更新 - http://www.flotcharts.org/flot/examples/realtime/index.html 样品静态情节 - 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

的主要问题是该标识符（#myCanvas）只能处理一个 参照的元素。

不幸的是，据我所知，无法生成多个 唯一标识符dinamically。

为了更新几个不同的画布元素，您需要通过其他方式获取他们的 引用。其中之一是直接操作DOM， 但它不建议，如：

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

另一个例子是使用querySelector（通过ElementRef）：

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

看看和ViewChildren文档。它可能提供一些线索，以你想要做什么 ： https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html