Größe Canvas zu seinem Elternelement Ion-Grid

Question

Ich baue eine Komponente in ionischen 3, die ein Raster von Bildern setzen und sie mit einem Canvas-Overlay verbindet. Ich habe das ionenraster verwendet, aber wenn ich versuche, die Größe der Leinwand zu ändern, kann ich nicht die richtigen Abmessungen des Containers finden, sodass der Canvas-Container seine ursprüngliche Größe behält. Ich möchte es dynamisch machen, also muss die Leinwand die gleiche Größe wie der Gittercontainer haben. Hier ist mein Code:

<ion-content> 
    <ion-card> 
    <div ion-card-content> 

     <div ion-grid id= "container-graph"> 
      <ion-row responsive-sm> 
      <canvas id="connection-canvas" style="position: absolute;"></canvas> 
      </ion-row> 
      <ion-row responsive-sm> 
      <ion-col col-6 text-center> 
       Generation 
       <img id="generation" src="../../assets/img/solar-panel.png"> 
      </ion-col> 
      <ion-col col-6 text-center> 
       Grid 
       <img id="grid" src="../../assets/img/grid.png"> 
      </ion-col> 
      </ion-row> 
      <ion-row responsive-sm> 
      <img id="inverter" src="../../assets/img/logo.png"> 
      </ion-row> 
      <ion-row responsive-sm> 
      <ion-col col-6 text-center> 
       Battery 
       <img id="battery" src="../../assets/img/battery.png"> 
      </ion-col> 
      <ion-col col-6 text-center> 
       Consumption 
       <img id="consumption" src="../../assets/img/house.png"> 
      </ion-col> 
      </ion-row> 
     </div> 
    </div> 
    </ion-card> 
    <ion-card> 
    <ion-card-content> 
     {{description}} 
    </ion-card-content> 
    </ion-card> 
</ion-content> 





public drawGraphs (center:string, a:string, b:string, c:string, d:string){ 
    var canvas: any = document.getElementById("connection-canvas"); 
    var connectionGraph: any = document.getElementById("container-graph"); 
    canvas.width = connectionGraph.clientWidth; 
    canvas.height = connectionGraph.clientHeight; 
    var elCenter = document.getElementById(center); 
    var contCenter = elCenter.getBoundingClientRect(); 
    var elA = document.getElementById(a); 
    this.drawLine(elCenter,elA); 
    var elB = document.getElementById(b); 
    this.drawLine(elCenter,elB); 
    var elC = document.getElementById(c); 
    this.drawLine(elCenter,elC); 
    var elD = document.getElementById(d); 
    this.drawLine(elCenter,elD); 


    } 

Answer 1

Ich habe gerade eine praktikable Lösung gefunden. Ich nenne die Funktion "Drawgraphs" , nachdem die Ansicht vollständig unter Verwendung der Lifecycle-Hook-Schnittstelle ngAfterViewChecked gerendert wurde. More info

ngAfterViewChecked(){ 
    this.drawGraphs("inverter", "generation", "grid", "battery", "consumption")}