鸿蒙HarmonyOS开发：构建自定义绘制组件

最新推荐文章于 2024-08-12 22:05:37 发布
最新推荐文章于 2024-08-12 22:05:37 发布
阅读量778 收藏 11
点赞数 19
分类专栏： HarmonyOS OpenHarmony 鸿蒙 文章标签： 网络 rpc harmonyos 开发语言 华为 前端 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84917132/article/details/141095388
版权
HarmonyOS 同时被 3 个专栏收录
159 篇文章 0 订阅
订阅专栏
OpenHarmony
159 篇文章 0 订阅
订阅专栏
鸿蒙
159 篇文章 0 订阅
订阅专栏

ArkUI开发框架在NDK接口提供了自定义UI组件的能力，这些能力包括自定义测算，自定义布局和自定义绘制。开发者通过注册相关自定义回调事件接入ArkUI开发框架的布局渲染流程，这些事件需要使用registerNodeCustomEvent来进行声明，并通过addNodeCustomEventReceiver函数添加组件自定义事件的监听器，在该监听器的回调函数中处理相关自定义测算，自定义布局和自定义绘制逻辑。

说明

自定义布局容器

以下示例创建了一个自定义容器，该容器将子组件最大值加上额外边距作为自身大小，同时对子组件进行居中排布。

图1 自定义容器组件

  1. 按照接入ArkTS页面创建前置工程。

  2. 创建自定义容器组件封装对象。

    // ArkUICustomContainerNode.h
// 自定义容器组件示例

#ifndef MYAPPLICATION_ARKUICUSTOMCONTAINERNODE_H
#define MYAPPLICATION_ARKUICUSTOMCONTAINERNODE_H

#include "ArkUINode.h"

namespace NativeModule {

class ArkUICustomContainerNode : public ArkUINode {
public:
    // 使用自定义组件类型ARKUI_NODE_CUSTOM创建组件。
    ArkUICustomContainerNode()
        : ArkUINode((NativeModuleInstance::GetInstance()->GetNativeNodeAPI())->createNode(ARKUI_NODE_CUSTOM)) {
        // 注册自定义事件监听器。
        nativeModule_->addNodeCustomEventReceiver(handle_, OnStaticCustomEvent);
        // 声明自定义事件并转递自身作为自定义数据。
        nativeModule_->registerNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_MEASURE, 0, this);
        nativeModule_->registerNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_LAYOUT, 0, this);
    }

    ~ArkUICustomContainerNode() override {
        // 反注册自定义事件监听器。
        nativeModule_->removeNodeCustomEventReceiver(handle_, OnStaticCustomEvent);
        // 取消声明自定义事件。
        nativeModule_->unregisterNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_MEASURE);
        nativeModule_->unregisterNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_LAYOUT);
    }

    void SetPadding(int32_t padding) {
        padding_ = padding;
        // 自定义属性事件更新需要主动调用标记脏区接口。
        nativeModule_->markDirty(handle_, NODE_NEED_MEASURE);
    }

private:
    static void OnStaticCustomEvent(ArkUI_NodeCustomEvent *event) {
        // 获取组件实例对象，调用相关实例方法。
        auto customNode = reinterpret_cast<ArkUICustomContainerNode *>(OH_ArkUI_NodeCustomEvent_GetUserData(event));
        auto type = OH_ArkUI_NodeCustomEvent_GetEventType(event);
        switch (type) {
        case ARKUI_NODE_CUSTOM_EVENT_ON_MEASURE:
            customNode->OnMeasure(event);
            break;
        case ARKUI_NODE_CUSTOM_EVENT_ON_LAYOUT:
            customNode->OnLayout(event);
            break;
        default:
            break;
        }
    }

    // 自定义测算逻辑。
    void OnMeasure(ArkUI_NodeCustomEvent *event) {
        auto layoutConstrain = OH_ArkUI_NodeCustomEvent_GetLayoutConstraintInMeasure(event);
        // 创建子节点布局限制，复用父组件布局中的百分比参考值。
        auto childLayoutConstrain = OH_ArkUI_LayoutConstraint_Copy(layoutConstrain);
        OH_ArkUI_LayoutConstraint_SetMaxHeight(childLayoutConstrain, 1000);
        OH_ArkUI_LayoutConstraint_SetMaxWidth(childLayoutConstrain, 1000);
        OH_ArkUI_LayoutConstraint_SetMinHeight(childLayoutConstrain, 0);
        OH_ArkUI_LayoutConstraint_SetMinWidth(childLayoutConstrain, 0);

        // 测算子节点获取子节点最大值。
        auto totalSize = nativeModule_->getTotalChildCount(handle_);
        int32_t maxWidth = 0;
        int32_t maxHeight = 0;
        for (uint32_t i = 0; i < totalSize; i++) {
            auto child = nativeModule_->getChildAt(handle_, i);
            // 调用测算接口测算Native组件。
            nativeModule_->measureNode(child, childLayoutConstrain);
            auto size = nativeModule_->getMeasuredSize(child);
            if (size.width > maxWidth) {
                maxWidth = size.width;
            }
            if (size.height > maxHeight) {
                maxHeight = size.height;
            }
        }
        // 自定义测算为所有子节点大小加固定边距。
        nativeModule_->setMeasuredSize(handle_, maxWidth + 2 * padding_, maxHeight + 2 * padding_);
    }

    void OnLayout(ArkUI_NodeCustomEvent *event) {
        // 获取父组件期望位置并设置。
        auto position = OH_ArkUI_NodeCustomEvent_GetPositionInLayout(event);
        nativeModule_->setLayoutPosition(handle_, position.x, position.y);

        // 设置子组件居中对齐。
        auto totalSize = nativeModule_->getTotalChildCount(handle_);
        auto selfSize = nativeModule_->getMeasuredSize(handle_);
        for (uint32_t i = 0; i < totalSize; i++) {
            auto child = nativeModule_->getChildAt(handle_, i);
            // 获取子组件大小。
            auto childSize = nativeModule_->getMeasuredSize(child);
            // 布局子组件位置。
            nativeModule_->layoutNode(child, (selfSize.width - childSize.width) / 2,
                                      (selfSize.height - childSize.height) / 2);
        }
    }

    int32_t padding_ = 100;
};

} // namespace NativeModule

#endif // MYAPPLICATION_ARKUICUSTOMCONTAINERNODE_H

  3. 使用自定义容器创建带文本的示例界面，并沿用定时器模块相关简单实现。 →【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助！~

    // 自定义NDK接口入口。

#include "NativeEntry.h"

#include "ArkUICustomContainerNode.h"
#include "ArkUITextNode.h"

#include <arkui/native_node_napi.h>
#include <arkui/native_type.h>
#include <js_native_api.h>

namespace NativeModule {

napi_value CreateNativeRoot(napi_env env, napi_callback_info info) {
    size_t argc = 1;
    napi_value args[1] = {nullptr};

    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

    // 获取NodeContent
    ArkUI_NodeContentHandle contentHandle;
    OH_ArkUI_GetNodeContentFromNapiValue(env, args[0], &contentHandle);
    NativeEntry::GetInstance()->SetContentHandle(contentHandle);

    // 创建自定义容器和文本组件。
    auto node = std::make_shared<ArkUICustomContainerNode>();
    node->SetBackgroundColor(0xFFE0FFFF);
    auto textNode = std::make_shared<ArkUITextNode>();
    textNode->SetTextContent("CustomContainer Example");
    textNode->SetFontSize(16);
    textNode->SetBackgroundColor(0xFFfffacd);
    textNode->SetTextAlign(ARKUI_TEXT_ALIGNMENT_CENTER);
    node->AddChild(textNode);
    CreateNativeTimer(env, textNode.get(), 1, [](void *userData, int32_t count) {
        auto textNode = reinterpret_cast<ArkUITextNode *>(userData);
        textNode->SetCircleColor(0xFF00FF7F);
    });

    // 保持Native侧对象到管理类中，维护生命周期。
    NativeEntry::GetInstance()->SetRootNode(node);
    g_env = env;
    return nullptr;
}

napi_value DestroyNativeRoot(napi_env env, napi_callback_info info) {
    // 从管理类中释放Native侧对象。
    NativeEntry::GetInstance()->DisposeRootNode();
    return nullptr;
}

} // namespace NativeModule

自定义绘制组件

以下示例创建了一个自定义绘制组件，该绘制组件能够绘制自定义矩形，并使用上述自定义容器进行布局排布。

图2 自定义绘制组件

  1. 按照自定义布局容器章节准备前置工程。

  2. 创建自定义绘制组件封装对象。

    // ArkUICustomNode.h
// 自定义绘制组件示例

#ifndef MYAPPLICATION_ARKUICUSTOMNODE_H
#define MYAPPLICATION_ARKUICUSTOMNODE_H

#include <native_drawing/drawing_brush.h>
#include <native_drawing/drawing_canvas.h>
#include <native_drawing/drawing_path.h>

#include "ArkUINode.h"

namespace NativeModule {

class ArkUICustomNode : public ArkUINode {
public:
    // 使用自定义组件类型ARKUI_NODE_CUSTOM创建组件。
    ArkUICustomNode()
        : ArkUINode((NativeModuleInstance::GetInstance()->GetNativeNodeAPI())->createNode(ARKUI_NODE_CUSTOM)) {
        // 注册自定义事件监听器。
        nativeModule_->addNodeCustomEventReceiver(handle_, OnStaticCustomEvent);
        // 声明自定义事件并转递自身作为自定义数据。
        nativeModule_->registerNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_DRAW, 0, this);
    }

    ~ArkUICustomNode() override {
        // 反注册自定义事件监听器。
        nativeModule_->removeNodeCustomEventReceiver(handle_, OnStaticCustomEvent);
        // 取消声明自定义事件。
        nativeModule_->unregisterNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_DRAW);
    }

    void SetRectColor(uint32_t color) {
        color_ = color;
        // 自定义绘制属性变更需要主动通知框架。
        nativeModule_->markDirty(handle_, NODE_NEED_RENDER);
    }

private:
    static void OnStaticCustomEvent(ArkUI_NodeCustomEvent *event) {
        // 获取组件实例对象，调用相关实例方法。
        auto customNode = reinterpret_cast<ArkUICustomNode *>(OH_ArkUI_NodeCustomEvent_GetUserData(event));
        auto type = OH_ArkUI_NodeCustomEvent_GetEventType(event);
        switch (type) {
        case ARKUI_NODE_CUSTOM_EVENT_ON_DRAW:
            customNode->OnDraw(event);
            break;
        default:
            break;
        }
    }

    // 自定义绘制逻辑。
    void OnDraw(ArkUI_NodeCustomEvent *event) {
        auto drawContext = OH_ArkUI_NodeCustomEvent_GetDrawContextInDraw(event);
        // 获取图形绘制对象。
        auto drawCanvas = reinterpret_cast<OH_Drawing_Canvas *>(OH_ArkUI_DrawContext_GetCanvas(drawContext));
        // 获取组件大小。
        auto size = OH_ArkUI_DrawContext_GetSize(drawContext);
        // 绘制自定义内容。
        auto path = OH_Drawing_PathCreate();
        OH_Drawing_PathMoveTo(path, size.width / 4, size.height / 4);
        OH_Drawing_PathLineTo(path, size.width * 3 / 4, size.height / 4);
        OH_Drawing_PathLineTo(path, size.width * 3 / 4, size.height * 3 / 4);
        OH_Drawing_PathLineTo(path, size.width / 4, size.height * 3 / 4);
        OH_Drawing_PathLineTo(path, size.width / 4, size.height / 4);
        OH_Drawing_PathClose(path);
        auto brush = OH_Drawing_BrushCreate();
        OH_Drawing_BrushSetColor(brush, color_);
        OH_Drawing_CanvasAttachBrush(drawCanvas, brush);
        OH_Drawing_CanvasDrawPath(drawCanvas, path);
        // 释放资源
        OH_Drawing_BrushDestroy(brush);
        OH_Drawing_PathDestroy(path);
    }

    uint32_t color_ = 0xFFFFE4B5;
};

} // namespace NativeModule

#endif // MYAPPLICATION_ARKUICUSTOMNODE_H

  3. 使用自定义绘制组件和自定义容器创建示例界面，并沿用定时器模块相关简单实现。

    // 自定义NDK接口入口组件。

#include "NativeEntry.h"

#include "ArkUICustomContainerNode.h"
#include "ArkUICustomNode.h"

#include <arkui/native_node_napi.h>
#include <arkui/native_type.h>
#include <js_native_api.h>

namespace NativeModule {

napi_value CreateNativeRoot(napi_env env, napi_callback_info info) {
    size_t argc = 1;
    napi_value args[1] = {nullptr};

    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

    // 获取NodeContent
    ArkUI_NodeContentHandle contentHandle;
    OH_ArkUI_GetNodeContentFromNapiValue(env, args[0], &contentHandle);
    NativeEntry::GetInstance()->SetContentHandle(contentHandle);

    // 创建自定义容器和自定义绘制组件。
    auto node = std::make_shared<ArkUICustomContainerNode>();
    node->SetBackgroundColor(0xFFE0FFFF);
    auto customNode = std::make_shared<ArkUICustomNode>();
    customNode->SetBackgroundColor(0xFFD3D3D3);
    customNode->SetWidth(150);
    customNode->SetHeight(150);
    node->AddChild(customNode);
    CreateNativeTimer(env, customNode.get(), 1, [](void *userData, int32_t count) {
        auto customNode = reinterpret_cast<ArkUICustomNode *>(userData);
        customNode->SetRectColor(0xFF00FF7F);
    });

    // 保持Native侧对象到管理类中，维护生命周期。
    NativeEntry::GetInstance()->SetRootNode(node);
    g_env = env;
    return nullptr;
}

napi_value DestroyNativeRoot(napi_env env, napi_callback_info info) {
    // 从管理类中释放Native侧对象。
    NativeEntry::GetInstance()->DisposeRootNode();
    return nullptr;
}

} // namespace NativeModule

     →【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助！~

太空人_喜之郎
关注
专栏目录
HarmonyOS 鸿蒙开发DevEco Studio:HarmonyOS工程介绍
sybh的博客
01-18 902
一个APP中，对于同一类型的设备，可以包含一个或多个Entry类型的HAP，如果同一类型的设备包含多个Entry模块，需要配置distroFilter分发规则。xml类型的可绘制资源，如SVG（Scalable Vector Graphics）可缩放矢量图形文件、Shape基本的几何图形（如矩形、圆形、线等）等。xml类型的可绘制资源，如SVG（Scalable Vector Graphics）可缩放矢量图形文件、Shape基本的几何图形（如矩形、圆形、线等）等。用于存储任意格式的原始资源文件。
HarmonyOS 应用开发配置—Stage模型以及应用/组件级配置详解
一键难忘的博客
11-30 2179
HarmonyOS 应用开发配置—Stage模型以及应用/组件级配置详解【鸿蒙专栏-18】 HarmonyOS 应用模型是为开发者提供应用程序所需能力的抽象，简化了应用开发流程，提供了一套统一的模型，使得应用开发更为简单、高效。在此，我们将详细解读应用模型的构成要素以及对新推出的 Stage 模型进行深入分析。
harmonyOS杂谈 - 自定义组件生命周期
weixin_42861217的博客
12-21 1290
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。状态变量 -> UI组件（包括ForEach和if）。
HarmonyOS鸿蒙学习基础篇 - 自定义组件（一）_鸿蒙系统学习 csdn(1)
tencentes的博客
04-11 1432
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：状态变量 -> UI组件（包括ForEach和if）。
HarmonyOS Next开发学习手册——使用NDK接口构建UI(构建自定义组件)
maniuT的博客
07-08 690
以下示例创建了一个自定义容器，该容器将子组件最大值加上额外边距作为自身大小，同时对子组件进行居中排布。图1自定义容器组件按照 接入ArkTS页面 创建前置工程。创建自定义容器组件封装对象。// 自定义容器组件示例public:// 使用自定义组件类型ARKUI_NODE_CUSTOM创建组件。// 注册自定义事件监听器。// 声明自定义事件并转递自身作为自定义数据。// 反注册自定义事件监听器。// 取消声明自定义事件。// 自定义属性事件更新需要主动调用标记脏区接口。
鸿蒙HarmonyOS自定义组件开发和使用
nanxuan521的专栏
06-28 1441
HarmonyOS ArkUI自定义组件的开发与使用
4.8【HarmonyOS鸿蒙开发】自定义组件
hanru723的博客
07-23 832
4.8【HarmonyOS鸿蒙开发】自定义组件 作者：韩茹 公司：程序咖（北京）科技有限公司 鸿蒙巴士专栏作家 HarmonyOS提供了一套复杂且强大的Java UI框架，其中Component提供内容显示，是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象，并对它们进行布局。 Java UI框架也提供了一部分Component和ComponentContainer的具体子类，即常用的组件（比如：Text、Button、I
HarmonyOS鸿蒙学习基础篇 - 自定义组件（一）
2303_76218115的博客
02-14 4300
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。可组合：允许开发者组合使用系统组件、及其属性和方法。可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新@Component。
HarmonyOS三方组件的开发和绘制.pptx
09-26
在 HarmonyOS 应用程序开发中，用户界面（UI）的设计和三方组件的开发与绘制是至关重要的环节。本课程由 HarmonyOS 的资深开发者董昱主讲，他作为华为HDE，不仅拥有丰富的系统课程开发经验，还曾担任过华为首届...
鸿蒙HarmonyOS应用开发 | 仓颉语言中的泛型编程应用与实践【泛型类型的子类型关系、类型别名、泛型约束】
最新发布
一键难忘的博客
08-12 1026
在许多编程语言中，泛型是一项强大的功能，允许创建灵活且可重用的代码组件。在仓颉语言（Cangjie）中，泛型扮演着重要角色，使开发者能够定义类型安全的抽象。本文将深入探讨仓颉语言中的泛型概念，特别是泛型类型的子类型关系，以及如何利用这些关系来编写更为安全且高效的代码。
鸿蒙HarmonyOS学习手册_入门篇
特创数字
01-10 1901
应用软件所涉及的文件多种多样，开发者可通过HarmonyOS提供的集成开发工具将其开发的可执行代码、资源、三方库等文件整合到一起制作成HarmonyOS应用程序包，便于开发者对应用程序的部署。应用软件所涉及的设备类型多种多样，开发者可通过HarmonyOS提供的应用程序包配置文件指定其应用程序包的分发设备类型，便于应用市场对应用程序包的分发管理。
鸿蒙开发学习笔记——自定义组件
Sweet7weight的博客
03-18 981
鸿蒙自定义组件
【鸿蒙】HarMonyOS的自定义组件之五星红旗
笔触狂放的博客
07-15 608
使用Java语言开发鸿蒙系统应用的自定义组件五角星，并绘制中国国旗。 如果对自定义组件并不了解的同学请先看【鸿蒙】HarMonyOS的自定义组件一 我们知道所有的组件都是继承至Component类，我们绘制五角星也不例外，我们先定义一个类继承至Component类，并实现几个构造方法 public class StarsChinaComponentextends Component{ public StarsChinaComponent(Context context) {
【鸿蒙】HarMonyOS的自定义组件一
笔触狂放的博客
07-13 1461
当Java UI框架提供的组件无法满足设计需求时，可以创建自定义组件，根据设计需求添加绘制任务，并定义组件的属性及事件响应，完成组件的自定义。 常用接口 表1Component类相关接口 接口名 作用 setEstimateSizeListener 设置测量组件的侦听器。 onEstimateSize 测量组件的大小以确定宽度和高度。 setEstimatedSi.
HarmonyOS应用开发：鸿蒙自定义组件slot插槽，体现的更强大！
08-04 1034
自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素
HarmonyOS Next开发学习手册——Node-API接口从异步线程向ArkTS线程投递指定优先级和入队方式的的任务
maniuT的博客
07-29 396
异步线程向ArkTS线程投递的任务需要根据任务指定的优先级和入队方式进行处理。
HarmonyOS Next开发学习手册——Form Kit（卡片开发服务）
maniuT的博客
07-25 1117
Form Kit（卡片开发服务）提供一种界面展示形式，可以将应用的重要信息或操作前置到服务卡片（以下简称“卡片”），以达到服务直达、减少跳转层级的体验效果。卡片常用于嵌入到其他应用（当前被嵌入方即卡片使用方只支持系统应用，例如桌面）中作为其界面显示的一部分，并支持拉起页面、发送消息等基础的交互能力。
【鸿蒙】HarMonyOS的自定义组件之五星好评
笔触狂放的博客
07-15 487
使用Java语言开发鸿蒙系统应用的自定义组件五角星，并实现五星好评的效果。 如果对自定义组件并不了解的同学请先看【鸿蒙】HarMonyOS的自定义组件一 我们知道所有的组件都是继承至Component类，我们绘制五角星也不例外，我们先定义一个类继承至Component类，并实现几个构造方法 public class StarsComponent extends Component{ public StarsComponent(Context context) { su
HarmonyOS应用开发：OffscreenCanvas图像绘制指南
" HarmonyOS应用开发中的图像绘制技术主要涉及OffscreenCanvasRenderingContext2D接口的使用，该技术从API version 7开始被支持，并且在后续版本中可能会有新的功能添加。开发者可以利用这个接口在离屏canvas上绘制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值