Question

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

这是如何使用画布区域（HTML CODE）

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

Answer 1

尝试使用@ViewChildren而不是@ViewChild，并使用

遍历每个画布

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

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

Answer 2

主要问题是标识符（#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

Answer 3

从服务器获取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]);

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

3 个答案: