鸿蒙NEXT开发【图像效果】ArkTS组件通用属性

最新推荐文章于 2024-12-31 09:12:37 发布
原创 最新推荐文章于 2024-12-31 09:12:37 发布 · 692 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#1024程序员节 #harmonyos #华为 #鸿蒙系统 #鸿蒙 #ui

设置组件的模糊、阴影、球面效果以及设置图片的图像效果。

说明

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

blur

blur(value: number, options?: BlurOptions)

为组件添加内容模糊效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number 是 当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
options11+ [BlurOptions] 否 灰阶梯参数。

shadow

shadow(value: ShadowOptions | ShadowStyle)

为组件添加阴影效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle]类型。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value [ShadowOptions] [ShadowStyle]10+ 是

grayscale

grayscale(value: number)

为组件添加灰度效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number 是 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参0.0则图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)默认值：0.0取值范围：[0.0, 1.0]**说明：**设置小于0.0的值时，按值为0.0处理，设置大于1.0的值时，按值为1.0处理。

brightness

brightness(value: number)

为组件添加高光效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number 是 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大，亮度为2时会变为全白。默认值：1.0推荐取值范围：[0, 2]**说明：**设置小于0的值时，按值为0处理。卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

saturate

saturate(value: number)

为组件添加饱和度效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number 是 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）默认值：1.0推荐取值范围：[0, 50)**说明：**设置小于0的值时，按值为0处理。

contrast

contrast(value: number)

为组件添加对比度效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number 是 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）默认值：1.0推荐取值范围：[0, 10)**说明：**设置小于0的值时，按值为0处理。

invert

invert(value: number | InvertOptions)

反转输入的图像。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number [InvertOptions]11+ 是

sepia

sepia(value: number)

将图像转换为深褐色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number 是 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比）

hueRotate

hueRotate(value: number | string)

色相旋转效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value number string 是

colorBlend7+

colorBlend(value: Color | string | Resource)

为组件添加颜色叠加效果。

系统能力： SystemCapability.ArkUI.ArkUI.Full

元服务API： 从API version 11开始，该接口支持在元服务中使用。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名 类型 必填
最低0.47元/天 解锁文章

200万优质内容无限畅学
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：图像效果）
m0_64420071的博客
03-02 3026
ArkTS声明式开发（通用属性：图像效果）
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：ImageBitmap）
m0_64420071的博客
03-19 1692
ArkTS声明式开发（画布组件：ImageBitmap）
【HarmonyOS NEXT】ArkTS组件如何设置阴影
Mayism123的博客
03-07 2272
图像效果中的shadow接口可以为组件添加阴影效果。图像效果 / 阴影 / shadow。ArkTS组件如何设置阴影?
鸿蒙（API 12 Beta3版）【使用ImageEffect编辑图片】图片开发指导
鸿蒙的技术博客
08-23 1442
ImageEffect提供了一系列接口用于图像的编辑。开发者可以通过ImageEffect接口处理不同图像输入类型Pixelmap、NativeWindow、NativeBuffer或Uri，获得滤镜处理效果。
鸿蒙应用ArkTS开发- 选择图片、文件和拍照功能实现
m0_71524094的博客
04-25 4666
在使用App的时候，我们经常会在一些社交软件中聊天时发一些图片或者文件之类的多媒体文件，那在鸿蒙原生应用中，我们怎么开发这样的功能呢？ 本文会给大家对这个功能点进行讲解，我们采用的是拉起系统组件来进行图片、文件的选择，拉起系统相机进行拍照的这样一种实现方式。
鸿蒙next版开发：ArkTS组件通用属性（图像效果）
小淼淼的博客
11-10 749
通过本文的介绍，你应该对HarmonyOS 5.0中ArkTS组件的图像效果有了基本的了解。图像效果是UI开发中的重要工具，合理利用这些属性可以使你的应用界面更加美观和实用。希望本文能够帮助你在开发过程中更好地利用ArkTS的图像效果属性。
鸿蒙5.0版开发：ArkTS组件通用属性-自定义绘制设置
m0_69424697的博客
10-27 973
自定义组件绘制提供了自定义绘制修改器，来实现更自由地组件绘制。
鸿蒙5.0版开发：ArkTS组件通用属性（图像效果）
m0_73088370的博客
09-01 1117
设置组件的模糊、阴影、球面效果以及设置图片的图像效果。
鸿蒙 app上怎么实现阴影效果
读心悦
10-21 1213
在鸿蒙ArkTS中，实现阴影样式主要依赖于组件的shadow属性或相关API，如。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：隐私遮罩）
m0_64420071的博客
03-05 1550
ArkTS声明式开发（通用属性：隐私遮罩）
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：背景设置）
m0_64420071的博客
03-01 9531
ArkTS声明式开发（通用属性：背景设置）
ArkTS -- 背景属性
2301_79617863的博客
11-22 625
ArkTS中的背景属性
【鸿蒙开发】第十九章 Image图片处理
Yvan
04-08 3368
应用开发中的图片开发是对图片像素数据进行解析处理构造的过程，达到目标图片效果，主要涉及图片解码图片处理图片编码等。图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG、ICO。PixelMap指图片解码后无压缩的位图，用于图片显示或图片处理。图片处理指对PixelMap进行相关的操作，如旋转、缩放、设置透明度、获取图片信息、读写像素数据等。图片编码。
鸿蒙HarmonyOS应用开发：ArkTS声明式UI设计中的背景设置艺术
qq_44103359的博客
05-05 1177
在鸿蒙HarmonyOS的应用开发中，ArkTS（ArkUI）是一种新兴的声明式开发框架，它允许开发者以更简洁、直观的方式构建用户界面。在ArkTS中，有许多通用属性可以应用于各种组件，以增强其功能和视觉效果。本文将重点探讨其中一个重要属性：背景设置。
鸿蒙ArkTS图像处理示例
weixin_55767565的博客
12-31 345
在HarmonyOS中，选择图像文件和选择普通文件使用的文件选择器是不同的，普通文件使用的是DocumentViewPicker类，图像或视频类型的文件，使用的是PhotoViewPicker类，但是PhotoViewPicker类从API 12开始被废弃了，取而代之的是PhotoAccessHelper下的PhotoViewPicker。iewMIMETypes.IMAGE_TYPE，如果选择其他的类型可以使用其他合适的枚举。可以看到，选择的图片已经正常显示了，选择模式使用的是原色。
ArkTS中background相关的方法详细介绍
LIUCHANGSHUO的博客
08-29 1775
当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不生效。params:设置组件背景提亮效果，包括：亮度变化速率，提亮程度。options:设置组件背景属性包括：饱和度，亮度，颜色。
鸿蒙UI开发——组件阴影效果
harmonyClassRoom的博客
12-17 970
其中，入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。入参类型为ShadowStyle时，可指定不同阴影样式。属性名类型说明radius阴影模糊半径。取值范围：[0, +∞)单位：px。说明：设置小于0的值时，按值为0处理。如需使用vp单位的数值可用vp2px进行转换。如果radius为Resource类型，则传入的值需为number类型。元服务API：从API version 11开始，该接口支持在元服务中使用。typeShadowType阴影类型。
鸿蒙ArkTS容器组件：【TabContent】
2401_82772199的博客
07-15 1897
仅在Tabs中使用，对应一个切换页签的内容视图。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
Android阴影绘制的方式
xiaokangss的博客
10-19 1834
不管是自定义View也还是自定义ViewGroup，都是一样的效果，我们都是通过Paint画笔自己画出阴影，本质都是操作onDraw方法。核心类就是 BlurMaskFilter 类，它的兼容性比较好，它通过一个模糊的遮罩来实现几个重要参数：mMaskRadius:扩散的半径BlurMaskFilter.Blur.NORMAL：整个图像都被模糊掉BlurMaskFilter.Blur.SOLID：图像边界外产生一层与图像颜色一致阴影效果。
surface实例
最新发布
07-23
<think>我们正在讨论Surface在UI开发中的定义、作用及使用场景。根据提供的引用，Surface在UI开发中扮演着关键角色，特别是在图形渲染和跨语言/框架交互中。 引用[1]提到：Surface是Camera系统中所有图像路径的收尾容器，负责承载GraphicBuffer，并将HAL输出图像交付给上层UseCase（如预览、拍照等）。这说明了Surface在图像处理流程中的核心地位。 引用[2]和[3]则从鸿蒙系统开发的角度描述了Surface的使用：通过XComponent组件在ArkTS侧传入Surfaceid，在native侧创建NativeWindow实例，然后创建EGL/GLES环境进行图形绘制。同时，在鸿蒙的混合开发中，Surface作为画布，成为ArkTS（声明式UI）和仓颉（高性能逻辑）之间的桥梁。 引用[4]提到了横竖屏切换时UI的优化，虽然没有直接提及Surface，但涉及了UI渲染的性能优化，间接与Surface管理有关。 因此，我们可以将Surface在UI开发中的定义、作用及使用场景总结如下： ### 1. **Surface的定义** - **系统级定义**：Surface是一个抽象概念，代表一块可绘制的内存区域（通常由`GraphicBuffer`支持），用于存储像素数据。它作为图像数据的容器，连接了上层应用和底层图形系统（如OpenGL ES、Vulkan）或硬件抽象层（HAL）。 - **在鸿蒙开发中的定义**：在鸿蒙系统中，Surface通过`XComponent`组件暴露给ArkTS，其本质是一个跨语言（ArkTS/C++）的图形渲染接口。具体表现为： - ArkTS侧：通过`XComponent`的`surfaceId`标识一个Surface实例。 - Native侧（仓颉/C++）：通过`NativeWindow` API操作Surface（如提交缓冲区、设置缓冲区大小）。 ### 2. **Surface的核心作用** - **图形渲染的载体**：Surface是图形输出的最终目的地。例如： - 在相机应用中，Surface接收来自HAL的摄像头帧数据[^1]。 - 在游戏/视频应用中，Surface承载通过OpenGL ES/Vulkan渲染的帧[^2][^3]。 - **跨进程/跨语言通信桥梁**：Surface通过`BufferQueue`机制（生产者-消费者模型）实现数据高效传递： - **生产者**：Native层（如仓颉渲染线程）向Surface写入图形数据。 - **消费者**：UI框架（如鸿蒙的渲染服务）从Surface读取数据并合成到屏幕[^3]。 - **性能优化关键**：通过直接操作Surface，开发者可以： - 控制渲染帧率（如限制VSync同步）。 - 减少内存拷贝（直接传递缓冲区句柄而非数据内容）。 - 实现离屏渲染（如将Surface绑定到FBO）。 ### 3. **Surface的使用场景** - **跨语言混合渲染**（鸿蒙示例）： - **步骤1**：ArkTS声明`XComponent`，获取`surfaceId`。 - **步骤2**：通过NAPI将`surfaceId`传递给仓颉代码。 - **步骤3**：仓颉侧创建`NativeWindow`，关联EGL/GLES环境，进行图形绘制[^2][^3]。 - **代码片段**： ```typescript // ArkTS侧 (index.ets) XComponent({ id: 'xcomp', type: 'surface' }) .onLoad((context) => { // 获取surfaceId并传递给Native let surfaceId = context.getXComponentSurfaceId(); nativeModule.startRender(surfaceId); // NAPI调用 }) ``` ```cpp // 仓颉侧 (native_module.cpp) void StartRender(std::string surfaceId) { // 1. 通过surfaceId获取NativeWindow NativeWindow* nativeWindow = GetNativeWindowFromId(surfaceId); // 2. 创建EGLSurface，绑定到NativeWindow EGLDisplay eglDisplay = eglGetDisplay(EGL_DEFAULT_DISPLAY); EGLConfig config = ...; EGLSurface eglSurface = eglCreateWindowSurface(eglDisplay, config, nativeWindow, nullptr); // 3. 渲染循环 while (true) { eglMakeCurrent(eglDisplay, eglSurface, eglSurface, eglContext); glClearColor(...); glClear(GL_COLOR_BUFFER_BIT); // 绘制图形... eglSwapBuffers(eglDisplay, eglSurface); } } ``` - **相机图像处理**： - 相机应用创建多个Surface实例，分别用于预览、拍照、AI分析[^1]。 - 示例：预览Surface直接输出到屏幕，拍照Surface保存高分辨率图像。 - **动态UI优化**： - 结合引用[4]，在横竖屏切换时，冻结非活跃UI组件（如视频详情页），避免重绘。此时Surface可被复用（如旋转后重新配置缓冲区尺寸），而非重建。 ### 4. **调试与性能考量** - **常见问题**： - Surface未及时释放导致内存泄漏。 - 缓冲区尺寸/格式不匹配（如HAL输出YUV，但Surface配置为RGB）。 - **优化方向**： - 使用`BufferQueue`的异步模式减少阻塞。 - 根据UseCase需求动态调整Surface属性（如分辨率、颜色空间）。 ### 总结 Surface在UI开发中本质是**图形数据的中间载体**，它解耦了数据生产（渲染、相机采集）和消费（屏幕显示、编码存储），是高性能图形交互的基石。在鸿蒙等现代框架中，Surface进一步成为跨语言/跨框架开发的通用接口，使得底层高性能逻辑（仓颉）与声明式UI（ArkTS）无缝协作。 §§相关问题§§ 1. 如何通过Surface实现视频播放器的横竖屏无缝切换？ 2. 在相机应用中，多个Surface实例如何协同工作（预览、拍照、分析）？ 3. Surface与BufferQueue的底层交互机制是怎样的？ 4. 鸿蒙XComponent组件如何管理Surface的生命周期？</think>### Surface实例在UI开发中的定义、作用及使用场景 #### 1. **定义** Surface是**图形渲染的底层抽象接口**，代表一块可由GPU或CPU直接操作的**像素缓冲区**（`GraphicBuffer`）。在UI框架中（如鸿蒙、Android），它作为连接上层UI组件与底层图形系统的桥梁： - **系统级定义**：由`BufferQueue`管理的共享内存区域，用于存储图像帧[^1]。 - **开发视角**：通过`XComponent`等UI控件暴露的`SurfaceId`，开发者可获取其实例进行跨语言渲染[^2][^3]。 #### 2. **核心作用** ##### (1) **跨层级图形交付** - **接收图像数据**：从相机HAL（硬件抽象层）、视频解码器等获取原始图像流[^1]。 - **输出到UI**：将处理后的图像传递到屏幕合成器（如鸿蒙的`UIView`/`XComponent`）[^2]。 - **数据流示例**： ```mermaid graph LR A[相机HAL] -->|GraphicBuffer| B(Surface) B --> C{UI组件} C -->|XComponent| D[屏幕显示] ``` ##### (2) **跨语言渲染桥梁** - **ArkTS ↔ 仓颉协作**： - ArkTS声明UI布局并传递`SurfaceId`[^3] - 仓颉通过`NativeWindow`绑定Surface，执行高性能渲染（OpenGL/Vulkan）[^2] ```cpp // 仓颉侧代码示例 NativeWindow* nativeWindow = CreateNativeWindow(surfaceId); // 通过SurfaceId创建窗口 EGLSurface eglSurface = eglCreateWindowSurface(display, config, nativeWindow); glClearColor(...); // GPU渲染指令 ``` ##### (3) **性能优化中枢** - **缓冲区复用**：通过`BufferQueue`循环使用GraphicBuffer，避免内存重复分配[^1]。 - **异步渲染**：分离UI线程与渲染线程，防止主线程阻塞（如视频播放时UI仍可响应）[^4]。 #### 3. **关键使用场景** ##### (1) **多媒体渲染** - **相机预览**：Surface接收HAL的YUV/RGB帧，转换为纹理输出到屏幕[^1]。 - **视频播放**：解码器填充Surface，`XComponent`直接消费帧数据[^2]。 - **游戏渲染**：游戏引擎通过Surface提交每帧画面。 ##### (2) **混合开发框架** - **鸿蒙 NEXT 示例**： ```typescript // ArkTS侧 XComponent({ id: 'video', type: 'surface' }) .onLoad((ctx) => { let surfaceId = ctx.getXComponentSurfaceId(); nativeModule.startRender(surfaceId); // 传递SurfaceId给仓颉 }) ``` ```cpp // 仓颉侧（NAPI） napi_value StartRender(napi_env env, napi_callback_info info) { // 获取surfaceId并绑定NativeWindow NativeWindowAttach(env, surfaceId); // 启动OpenGL渲染循环 } ``` ##### (3) **动态UI优化** - **横竖屏切换**：冻结非活跃UI组件（如视频详情页），复用Surface避免重绘开销[^4]： ```typescript @Component({ freezeWhenInactive: true }) // 组件冻结 struct VideoDetail { build() { ... } // 旋转时不触发重绘 } ``` ##### (4) **多Surface协同** - **相机多路输出**：同时绑定多个Surface实现预览+拍照+AI分析[^1]： ```mermaid graph TB CameraHAL -->|Frame| Surface1[预览Surface] CameraHAL -->|Frame| Surface2[拍照Surface] CameraHAL -->|Frame| Surface3[AI分析Surface] ``` #### 4. **调试与问题定位** - **常见异常**： - `Surface abandoned`：Surface生命周期未同步（如UI销毁后仓颉仍渲染）[^2]。 - 帧撕裂：`BufferQueue`未启用垂直同步（VSync）。 - **优化方向**： - 调整缓冲区数量（`minBufferCount`）平衡延迟与内存。 - 使用`AHardwareBuffer`直接访问GPU内存（安卓/鸿蒙）。 ### 总结 Surface是**连接应用层UI与底层图形系统的核心枢纽**，其核心价值在于： 1. **解耦渲染管线**：分离数据生产（相机/解码器）与消费（UI合成）。 2. **打破语言边界**：使声明式UI（ArkTS）与高性能语言（仓颉/C++）无缝协作[^3]。 3. **保障渲染性能**：通过缓冲区复用和异步机制确保流畅性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值