1
イオングリッドにイメージを配置し、キャンバスオーバーレイでそれらを連結するコンポーネントをイオン3で構築しています。私はイオンのイオングリッドを使用しましたが、キャンバスのサイズを変更しようとすると、キャンバスコンテナが正しいサイズになっていないため、キャンバスコンテナが初期サイズになります。キャンバスをグリッドコンテナと同じサイズにする必要があるので、動的にしたいと思います。ここに私のコード：キャンバスを親要素のイオングリッドに合わせる
<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);
}