CODEWITHSUNDEEP
angularhtml5-canvas
dsnr
dsnr

Reputation: 63

Dynamically generate multiple canvas area based on json provided

I am using angular2 and html5 canvas. Based on json provided I want to create multiple divs with canvas area inside them.

This is how generate my divs with canvas area (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;
}

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

according to json both canvas should have some shapes but in my case second canvas is coming empty

Upvotes: 5

Views: 3533

Answers (3)

Naik Ashwini
Naik Ashwini

Reputation: 808

Try using @ViewChildren instead of @ViewChild and iterate over each canvas using 

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

So who will get access to each of the canvas area created dynamically.

Upvotes: 3

Pedro Penna
Pedro Penna

Reputation: 1187

The main problem is that the identifier (#myCanvas) can handle only one reference to an element.

And unfortunately, as far as I'm aware, there's no way to generate multiple unique identifiers dinamically.

In order to update several different canvas elements, you will need to get their references by some other means. One of them is to manipulate the DOM directly, but it's not recommended, like:

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

Another example would be to use a querySelector (via ElementRef):

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

Take a look and the ViewChildren documentation. It might shed some light to what you're trying to do: https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

Upvotes: 1

ITSGuru
ITSGuru

Reputation: 194

Just get the json from server and parse it with JSON.parse.

For drawing a canvas chart.

You can used this library javaScript plotting for jQuery - http://www.flotcharts.org/

It's will help you plot a graph via JSON data.

For ajax update - http://www.flotcharts.org/flot/examples/ajax/index.html For realtime update - http://www.flotcharts.org/flot/examples/realtime/index.html Sample static 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]);

Upvotes: 0

Related Questions