在<ion-content>中获取画布的初始高度/宽度

Question

我有一个带有标题和拆分窗格菜单的IONIC4 / Angular8设置。 然后，我将BabylonJS引擎加载到#canvas内<ion-content>的View-Child中。

因此，我需要正确设置画布的高度和宽度。 使用window.innerHeight / window.innerWidth将始终包含菜单和标题。

我有一个可以正常工作的窗口大小调整事件监听器，但是第一个BabylonJS初始视图总是失真。

我的问题是，我如何动态获取画布的宽度和高度？ canvas.nativeElement.clientHeight是我的假设-但我总是收到0。

有任何提示吗？

更新

我尝试了@rtpHarry答案的建议解决方案-这是我的结果：

您可以在（1）看到我的内容画布，在（2）看到我的菜单。如果您在控制台中查看输出（3），则显示的是画布的正确高度，但宽度仍包含菜单。如果将我输出window.innerwidth的（3）与（4）进行比较，则会进一步突出显示。标题被扣除，但菜单没有。

这些是我用的东西...

Answer 1

尝试类似的操作（完整代码here）：

@ViewChild('canvasElement', {static: false}) canvasElement: ElementRef;

ngAfterViewInit() {
     var context = this.canvasElement.nativeElement.getContext("2d")
     console.log(context.canvas.width);
     console.log(context.canvas.height);
     context.canvas.width = 600;
     context.canvas.height = 700;
     console.log(context.canvas.width);
     console.log(context.canvas.height);
}

Answer 2

您正在寻找的技巧是找到离子含量的大小，可以使用以下方法完成：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { IonContent } from '@ionic/angular';

export class HomePage implements OnInit {
  @ViewChild(IonContent, { static: true }) private content: IonContent;

  constructor() { }

  ngOnInit() {
    this.content.getScrollElement().then(scrollElement => {
      console.log("clientHeight: ", scrollElement.clientHeight);
      console.log("clientWidth: ", scrollElement.clientWidth);
      console.log("scrollHeight: ", scrollElement.scrollHeight);
      console.log("scrollWidth: ", scrollElement.scrollWidth);
    });
  }
}

客户宽度和高度是您离子含量的宽度和高度。

如果内容比当前页面长，并且具有滚动条，则滚动宽度和高度将设置为这些值。

这是我得到的输出，我已经用devtools确认了：

您无法使ngOnInit处于异步状态，但是根据您执行此操作的位置，您可以执行如下异步版本：

  async someOtherFunction() {
    const scrollElement = await this.content.getScrollElement();
    console.log("clientHeight: ", scrollElement.clientHeight);
    console.log("clientWidth: ", scrollElement.clientWidth);
    console.log("scrollHeight: ", scrollElement.scrollHeight);
    console.log("scrollWidth: ", scrollElement.scrollWidth);
  }

更新

我用目前正在构建的仪表板对其进行了测试，它确实为我提供了正确的离子含量尺寸：

我添加了一个按钮（1），它输出（2），并与拆分的子窗格（3）进行检查，并与一些子像素舍入分开。

页面上还有其他东西正在溢出并影响它吗？因为实际上我最初看到的是一个带有ng-datatable组件的差异，但是当我注释掉它并只留下基础知识时，数字就匹配了。