根据提供的json动态生成多个画布区域答案

【问题标题】：Dynamically generate multiple canvas area based on json provided根据提供的json动态生成多个画布区域
【发布时间】：2017-09-09 13:34:32
【问题描述】：

我正在使用 angular2 和 html5 画布。基于提供的 json，我想创建多个 div，其中包含画布区域。

这就是如何使用画布区域（HTML 代码）生成我的 div

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

下面是我的 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，两个画布都应该有一些形状，但在我的情况下，第二个画布是空的

【问题讨论】：

标签： angular html5-canvas

【解决方案1】：

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

遍历每个画布

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

那么谁可以访问动态创建的每个画布区域。

【讨论】：

谢谢.. 为我工作

【解决方案2】：

主要问题是标识符（#myCanvas）只能处理一个引用一个元素。

不幸的是，据我所知，没有办法生成多个动态唯一标识符。

为了更新几个不同的画布元素，您需要获取它们的通过其他方式引用。其中之一是直接操作 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

【讨论】：

我可以动态创建多个画布的任何其他方法？
您已成功创建多个画布元素。现在您应该关注如何获得对它们的引用。如果我是你，我也会尝试创建一个组件来封装画布并使用 this.elementRef.nativeElement 和作为 @Input() 传递给组件的参数来操作它

【解决方案3】：

只需从服务器获取 json 并使用 JSON.parse 解析它。

用于绘制画布图表。

你可以使用这个库 javaScript plotting for 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]);

【讨论】：