簡體   English   中英

將畫布大小調整為其父元素 ion-grid

[英]resize canvas to its parent element ion-grid

我正在 Ionic 3 中構建一個組件,該組件放置圖像網格並將它們與畫布覆蓋層連接起來。 我使用了 Ionic 的ion-grid ,但是當我嘗試調整畫布大小時,我找不到容器的正確尺寸,因此畫布容器保持其初始大小。 我想讓它動態化,所以我需要畫布與網格容器具有相同的大小。 這是我的代碼:

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


  }

我剛剛找到了一個可行的解決方案。 在使用生命周期鈎子接口ngAfterViewChecked完全渲染視圖后,我將函數稱為“drawgraphs”。 更多信息

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM