HarmonyOS 鸿蒙Next JS UI框架的画布canvas如何获取其宽度(width)和高度(height)的值？

HarmonyOS 鸿蒙Next JS UI框架的画布canvas如何获取其宽度(width)和高度(height)的值？ 在使用canvas组件时，我在实现清空画布绘制内容的功能时，其canvas的clearRect()方法需要获取其画布的高度和宽度，才能真正实现。

但是，const el = this.$refs.canvas;这一行代码中的变量el无法引用出相关的width和height属性。

请问：画布canvas正确引用出width和height属性的方式是怎样的？

11 回复

酱紫：

let obj = this.$refs.canvas.getBoundingClientRect()
let width = obj.width;
let height = obj.height;

更多关于HarmonyOS 鸿蒙Next JS UI框架的画布canvas如何获取其宽度(width)和高度(height)的值？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


变量obj引用的width和height可以正常获取，非常感谢您的指点。

对于我自己的项目，我这边是通过const 这个关键字来声明变量obj,如下：

我自己的项目深度使用canvas，发现鸿蒙生态还有很长的路要走，共勉！

楼主你好，暂时没有相关api，请持续关注HarmonyOS官网。

大小一类的属于样式
用el.style.width就行了

这属性不起作用。

getstyle里有

不好意思，不太明白您提示的内容，能否给出完整的信息？

欢迎开发小伙伴们进来帮帮楼主

在HarmonyOS鸿蒙系统中使用Next JS UI框架时，可以通过访问Canvas组件的属性来获取其宽度和高度。以下是如何获取Canvas组件宽度和高度的值：

  1. 获取Canvas组件的引用： 首先，需要在你的页面或组件中定义一个Canvas组件，并通过ref属性获取其引用。例如：

    import { ref } from '[@ohos](/user/ohos).js.components';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct MyComponent {
    canvasRef = ref(null);

    getCanvasSize() {
        const canvas = this.canvasRef.value;
        if (canvas) {
            const width = canvas.width;
            const height = canvas.height;
            console.log('Canvas Width:', width);
            console.log('Canvas Height:', height);
        }
    }

    build() {
        Column() {
            Canvas(this.canvasRef)
                .width('100%')
                .height('100%')
                .onReady(() => {
                    this.getCanvasSize();
                });
        }.width('100%').height('100%');
    }
}

  2. 在Canvas组件准备好后获取尺寸： 使用onReady生命周期钩子，在Canvas组件准备好后调用getCanvasSize方法。在这个方法中，通过this.canvasRef.value获取Canvas组件实例，然后直接访问其width和height属性。

注意：上述代码中的width和height属性获取的是Canvas组件在布局中设置的尺寸，如果Canvas是通过样式（如百分比）设置的尺寸，则获取到的是解析后的像素值。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部