0
273
ViewsGenere dinámicamente múltiples áreas de lienzo basadas en json proporcionado
Estoy usando lienzo angular2 y html5. Basado en json provisto, quiero crear múltiples divs con área de lienzo dentro de ellos.
Así es como genero mis divs con área de lienzo (CÓDIGO 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>código .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; }a continuación es mi 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" } ] } ];según json, ambos lienzos deberían tener algunas formas, pero en mi caso, el segundo lienzo está vacío
3 answers
Answer question0
Intente usar @ViewChildren en lugar de @ViewChild e itere sobre cada lienzo usando
let canvas = this.myCanvas.toArray()[i].nativeElement;Entonces, ¿quién tendrá acceso a cada una de las áreas del lienzo creadas dinámicamente?
0
El principal problema es que el identificador (#myCanvas) solo puede manejar una referencia a un elemento.
Y desafortunadamente, que yo sepa, no hay forma de generar múltiples identificadores únicos dinámicamente.
Para actualizar varios elementos de lienzo diferentes, deberá obtener sus referencias por otros medios. Una de ellas es manipular el DOM directamente, pero no se recomienda, como:
let canvas = document.getElementById('canvas' + i);Otro ejemplo sería usar un querySelector (a través de ElementRef):
this.elementRef.nativeElement.querySelector('.myCanvasClass');Eche un vistazo a la documentación de ViewChildren. Podría arrojar algo de luz sobre lo que está tratando de hacer: https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html
0
Simplemente obtenga el json del servidor y analícelo con JSON.parse.
Para dibujar un gráfico de lienzo.
Puede utilizar esta biblioteca de trazado de javaScript para jQuery - http://www.flotcharts.org/
Le ayudará a trazar un gráfico a través de datos JSON.
Para actualización ajax - http://www.flotcharts.org/flot/examples/ajax/index.html Para actualización en tiempo real - http://www.flotcharts.org/flot/examples/realtime/index.html Gráfico estático de muestra - 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]);