HarmonyOS鸿蒙Next中Canvas如何实现全屏绘制

HarmonyOS鸿蒙Next中Canvas如何实现全屏绘制 Canvas画布绘制页面，需要无视状态栏和导航栏，请问如何实现？

3 回复

如何实现沉浸式页面（包括沉浸式状态栏、沉浸式导航条）

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-370

更多关于HarmonyOS鸿蒙Next中Canvas如何实现全屏绘制的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Canvas全屏绘制需先获取屏幕尺寸。使用window.getLastWindow(getContext(this))获取窗口对象，再通过window.getWindowProperties().bounds取得屏幕宽高。创建Canvas组件时设置其宽高为屏幕尺寸，并在onDraw方法中使用Canvas的API进行绘制操作。确保Canvas组件为根节点或占满父容器，即可实现全屏绘制效果。

在HarmonyOS Next中，可以通过以下方式实现Canvas全屏绘制（无视状态栏和导航栏）：

  1. 获取屏幕真实尺寸：
import display from '@ohos.display';

let displayClass = display.getDefaultDisplaySync();
let screenWidth = displayClass.width;
let screenHeight = displayClass.height;
  1. 设置Canvas尺寸：
// 在Canvas组件中设置宽高为屏幕尺寸
Canvas(this.context)
  .width(screenWidth)
  .height(screenHeight)
  1. 使用全屏窗口模式（可选）： 在module.json5中配置：
{
  "module": {
    "abilities": [{
      "window": {
        "fullScreen": true
      }
    }]
  }
}
  1. 绘制时注意事项：
  • 坐标系原点(0,0)位于屏幕左上角
  • 绘制内容会自动适配到整个屏幕区域
  • 无需考虑状态栏和导航栏的遮挡问题

这种方式可以确保Canvas绘制覆盖整个物理屏幕区域，包括状态栏和导航栏原本占用的空间。

回到顶部