!384 add add readme and napi tutorial

Merge pull request !384 from wshikh/master
This commit is contained in:
openharmony_ci 2024-03-18 13:06:08 +00:00 committed by Gitee
commit 73446c8505
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
147 changed files with 15716 additions and 0 deletions

View File

@ -0,0 +1,25 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{
"app": {
"bundleName": "com.example.napitutorials",
"vendor": "example",
"versionCode": 1000000,
"versionName": "1.0.0",
"icon": "$media:app_icon",
"label": "$string:app_name"
}
}

View File

@ -0,0 +1,8 @@
{
"string": [
{
"name": "app_name",
"value": "NapiTutorials"
}
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,353 @@
## NAPI 开发教程
### 背景
#### Node-API 介绍
Node-API以前称为 N-API是用于构建原生插件的 API。它独立于底层 JavaScript 运行时,并作为 Node.js 本身的一部分进行维护。此 API 将在 Node.js 的各个版本中保持稳定的应用二进制接口 (ABI)。它旨在将插件与底层 JavaScript 引擎的变化隔离开来,并允许为一个主要版本编译的模块无需重新编译即可在以后的 Node.js 主要版本上运行。[ABI 稳定性](docs/guides/abi-stability/) 指南提供了更深入的解释。
插件是使用标头为 [C++ 插件](api/addons.html) 的部分中概述的相同方法/工具构建/打包的。唯一的区别是原生代码使用的 API 集。
Node-API 公开的 API 通常用于创建和操作 JavaScript 值。概念和操作通常映射到 ECMA-262 语言规范中指定的想法。API 具有以下属性:
- 所有 Node-API 调用都会返回 `napi_status` 类型的状态代码。此状态指示 API 调用是成功还是失败。
- API 的返回值通过 out 参数传递。
- 所有 JavaScript 值都被抽象为一个名为 `napi_value` 的不透明类型。
- 如果出现错误状态代码,可以使用 `napi_get_last_error_info` 获取附加信息。可以在错误处理部分 [错误处理](api/n-api.html#error-handling) 中找到更多信息。
Node-API 是一种 C API可确保跨版本和不同编译器级别的 ABI 稳定性。C++ API 可以更容易使用。为了支持使用 C++,该项目维护了一个名为 `node-addon-api` 的 C++ 封装器模块。这个封装器提供了一个可内联的 C++ API。使用 `node-addon-api` 构建的二进制文件将取决于 导出的基于 Node-API C 的函数的符号。`node-addon-api` 是编写调用 Node-API 的代码的更有效方式。
---
#### Native APINativeDevelopKit
Native API是OpenHarmony SDK上提供的一组native开发接口与工具集合也称为NativeDevelopKit方便开发者使用C或者C++语言实现应用的关键功能。Native API只覆盖了OHOS基础的一些底层能力如libc图形库窗口系统多媒体压缩库等并没有完全提供类似于JS API上的完整的OHOS 平台能力。在应用中使用Native API会编译成动态库打包到应用中。
##### 名词概念
| 名词 | 名词解释 |
| :--------- | :----------------------------------------------------------- |
| Native API | OHOS SDK里面native包提供的面向三方应用开发的Native 接口以及相应编译脚本编译工具链。包括C运行时基础库libc3D图形库opengl面向JS与C跨语言的接口Node-API等具体内容详见下表。 |
| NativeDevelopKit | Native Develop Kit的缩写在OHOS上就是Native APINative API是官方名字NativeDevelopKit指代相同意思。 |
| SDK CAPI | OHOS Native API中的C语言接口以及工具链部分当前OHOS的Native API里面只包含C语言接口因此Native API与CAPI意思一样建议交流的时候使用CAPI防止Native API与napi缩写混用。 |
| Node-API | 曾用名napi是OHOS中提供JS与C跨语言调用的接口是Native API接口中的一部分. 该接口在Node.js提供的Node-API基础上扩展而来但不完全与Node.js中的Node-API完全兼容。 |
| napi | Node-API的曾用名当前Node-API头文件中的接口仍然以napi_开头不建议使用。 |
##### Native API构成介绍
* 目录结构
Native API在SDK包的位置为$(SDK_ROOT)/native目录主要有以下几个部分组成
| 目录 | 功能说明 |
| :---------- | :----------------------------------------------------------- |
| build | 应用中编译动态库的toolchain cmake脚本这个目录下ohos.toolchain.cmake文件定义了给OHOS交叉编译选项 |
| build-tools | 放置编译构建的工具如cmake |
| docs | Native API接口参考文档通过doxgen从头文件中提取出来 |
| sysroot | 放置编译链接的依赖文件目录,包含头文件,动态库等 |
* API接口
| 接口分类 | 接口功能 | 引入版本 |
| :----------------------------------------------------------- | :----------------------------------------------------------- | :------- |
| [标准C库](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/native-lib/third_party_libc/muslc.md) | 以muslc为基础提供的标准c库接口当前提供了1500+的接口 | 8 |
| [标准C++库](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/native-lib/third_party_libc/cpp.md) | c++运行时库libcpp_shared此库在打包的时候需要打包或者静态链接到应用中 | 8 |
| 日志 | 打印日志到系统的hilog接口 | 8 |
| Node-API | ArkUI提供的方便应用开发接入JS应用环境的一组类Node-API也叫napi是属于Native API的一部分 | 8 |
| XComponent | ArkUI XComponent组件中的界面与触屏事件接口方便开发者开发高性能图形应用 | 8 |
| libuv | ArkUI集成的三方的异步IO库 | 8 |
| libz | zlib库提供基本的压缩解压接口 | 8 |
| Drawing | 系统提供的2D图形库可以在界面进行绘制 | 8 |
| OpenGL | 系统提供的openglv3接口 | 8 |
| Rawfile | 应用资源访问接口,可以读取应用中打包的各种资源 | 8 |
| OpenSLES | 用于2D3D音频加速的接口库 | 8 |
| Mindspore | AI模型接口库 | 9 |
| 包管理 | 包服务接口,方便查询应用包信息 | 8 |
* 相关资料
- [Native API参考](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/native-apis/_o_h___native_x_component.md)介绍各个API参考手册
- [Native API中支持的标准库](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/native-lib/third_party_libc/muslc.md)介绍Native API支持的开源标准库
- [Native API开发指南](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/napi/napi-guidelines.md),结合具体的例子,场景介绍各类接口的使用
- [如何在Cmake工程中使用NativeDevelopKit](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/faqs/cmake-with-nativedevkit.md)介绍如何使用使用NativeDevelopKit开发一个CMake工程
- [Node-API在应用工程中的使用指导](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/napi/napi-guidelines.md), 如何使用Node-API接口
---
#### 教程介绍
此教程是 Node-API 和 ArkTS 的联合使用版本展示了如何引入Native-C++的lib库和头文件然后通过ArkUI进行展示和直接在 OpenHarmony 设备中运行。它为开发人员提供了在 DevEco Studio 开发中使用 lib库和Native-C++ 的能力,并且通过一系列教程来引导用户了解 Native-C++ 中提供的各种功能。
Native-C++ 教程的目的包括:
- 帮助将 Native-C++ 应用于 OpenHarmony 应用开发中
- 帮助 OpenHarmony 社区、开发人员和三方库尤其是C/C++研究人员交互式地访问各种基于 OpenHarmony 的 C/C++ 示例,以帮助理解特定的视觉算法
- 由于 Native-C++ 能够直接在 OpenHarmony 设备中运行,教程页面具有直观和交互式的特点。例如,利用 ArkUI 和 评估 ArkTS 代码,开发人员可以更改 Native-C++ 函数的参数,并在 OpenHarmony 上进行实时的 C/C++ 编程,以实时查看结果。
为了更好地理解这些教程,建议具备一定的 ArkUINAPI 和 C++ 应用程序开发知识。通过学习 Native-C++ 教程,开发人员可以更好地利用 Native-C++ 在 OpenHarmony 开发中的优势,并通过交互式的方式进行实时的算法处理,从而加深对 Native-C++和Node-API 的理解和应用能力。
---
#### 步骤
在本教程中,您将学习如何在 OpenHarmony 应用开发里引入和使用 Native API 开发。
请注意,以下是一些步骤供您参考:
1. 使用napitutorials样例工程
- IDE版本为DevEco Studio 4.0 ReleaseBuild Version: 4.0.0.600, built on October 17, 2023
2. 自行开发nativedevkit应用
- 按照 [创建NativeDevelopKit工程]([创建NativeDevelopKit工程 (openharmony.cn)](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/napi/create-with-nativedevkit.md)) 教程中的步骤,配置和构建 native C++ 工程。
完成上述步骤后,您就可以在 OpenHarmony 设备上体验 Native API 的能力,并按照 [Node-API]([Node-API | Node.js v20 文档](api/n-api.html)) 教程进行进一步的学习和实践了。
#### 样例能力
| 模块 | 接口 | 是否支持 | 备注 |
| -------------------------------- | ------------------------------------------------------------ | -------- | ---------- |
| 环境生命周期API | [`napi_set_instance_data`](api/v18/n-api.html#napi_set_instance_data) | 不支持 | 缺少对应库 |
| | [`napi_get_instance_data`](api/v18/n-api.html#napi_get_instance_data) | | |
| | | | |
| 基本Node-API数据类型 | | | |
| | [`napi_status`](api/v18/n-api.html#napi_status) | | |
| | [`napi_extended_error_info`](api/v18/n-api.html#napi_extended_error_info) | | |
| | [`napi_env`](api/v18/n-api.html#napi_env) | | |
| | [`napi_value`](api/v18/n-api.html#napi_value) | | |
| | [`napi_threadsafe_function`](api/v18/n-api.html#napi_threadsafe_function) | | |
| | [`napi_threadsafe_function_release_mode`](api/v18/n-api.html#napi_threadsafe_function_release_mode) | | |
| | [`napi_threadsafe_function_call_mode`](api/v18/n-api.html#napi_threadsafe_function_call_mode) | | |
| | | | |
| Node-API内存管理类型 | [`napi_handle_scope`](api/v18/n-api.html#napi_handle_scope) | | |
| | [`napi_escapable_handle_scope`](api/v18/n-api.html#napi_escapable_handle_scope) | | |
| | [`napi_ref`](api/v18/n-api.html#napi_ref) | | |
| | [`napi_type_tag`](api/v18/n-api.html#napi_type_tag) | | |
| | [`napi_async_cleanup_hook_handle`](api/v18/n-api.html#napi_async_cleanup_hook_handle) | | |
| | | | |
| Node-API回调类型 | [`napi_callback_info`](api/v18/n-api.html#napi_callback_info) | | |
| | [`napi_callback`](api/v18/n-api.html#napi_callback) | | |
| | [`napi_finalize`](api/v18/n-api.html#napi_finalize) | | |
| | [`napi_async_execute_callback`](api/v18/n-api.html#napi_async_execute_callback) | | |
| | [`napi_async_complete_callback`](api/v18/n-api.html#napi_async_complete_callback) | | |
| | [`napi_threadsafe_function_call_js`](api/v18/n-api.html#napi_threadsafe_function_call_js) | | |
| | [`napi_cleanup_hook`](api/v18/n-api.html#napi_cleanup_hook) | | |
| | [`napi_async_cleanup_hook`](api/v18/n-api.html#napi_async_cleanup_hook) | | |
| | | | |
| 错误处理 | | | |
| 返回值 | [`napi_get_last_error_info`](api/v18/n-api.html#napi_get_last_error_info) | | |
| | | | |
| 异常 | [`napi_throw`](api/v18/n-api.html#napi_throw) | | |
| | [`napi_throw_error`](api/v18/n-api.html#napi_throw_error) | | |
| | [`napi_throw_type_error`](api/v18/n-api.html#napi_throw_type_error) | | |
| | [`napi_throw_range_error`](api/v18/n-api.html#napi_throw_range_error) | | |
| | [`node_api_throw_syntax_error`](api/v18/n-api.html#node_api_throw_syntax_error) | | |
| | [`napi_is_error`](api/v18/n-api.html#napi_is_error) | | |
| | [`napi_create_error`](api/v18/n-api.html#napi_create_error) | | |
| | [`napi_create_type_error`](api/v18/n-api.html#napi_create_type_error) | | |
| | [`napi_create_range_error`](api/v18/n-api.html#napi_create_range_error) | | |
| | [`node_api_create_syntax_error`](api/v18/n-api.html#node_api_create_syntax_error) | | |
| | [`napi_get_and_clear_last_exception`](api/v18/n-api.html#napi_get_and_clear_last_exception) | | |
| | [`napi_is_exception_pending`](api/v18/n-api.html#napi_is_exception_pending) | | |
| | [`napi_fatal_exception`](api/v18/n-api.html#napi_fatal_exception) | | |
| | | | |
| 致命错误 | [`napi_fatal_error`](api/v18/n-api.html#napi_fatal_error) | | |
| | | | |
| 对象生命周期管理 | | | |
| 使句柄寿命短于本地方法 | [`napi_open_handle_scope`](api/v18/n-api.html#napi_open_handle_scope) | | |
| | [`napi_close_handle_scope`](api/v18/n-api.html#napi_close_handle_scope) | | |
| | [`napi_open_escapable_handle_scope`](api/v18/n-api.html#napi_open_escapable_handle_scope) | | |
| | [`napi_close_escapable_handle_scope`](api/v18/n-api.html#napi_close_escapable_handle_scope) | | |
| | [`napi_escape_handle`](api/v18/n-api.html#napi_escape_handle) | | |
| | | | |
| 对生命周期比原生方法长的值的引用 | [`napi_create_reference`](api/v18/n-api.html#napi_create_reference) | | |
| | [`napi_delete_reference`](api/v18/n-api.html#napi_delete_reference) | | |
| | [`napi_reference_ref`](api/v18/n-api.html#napi_reference_ref) | | |
| | [`napi_reference_unref`](api/v18/n-api.html#napi_reference_unref) | | |
| | [`napi_get_reference_value`](api/v18/n-api.html#napi_get_reference_value) | | |
| | | | |
| 当前 Node.js 环境退出时的清理 | [`napi_add_env_cleanup_hook`](api/v18/n-api.html#napi_add_env_cleanup_hook) | | |
| | [`napi_remove_env_cleanup_hook`](api/v18/n-api.html#napi_remove_env_cleanup_hook) | | |
| | [`napi_add_async_cleanup_hook`](api/v18/n-api.html#napi_add_async_cleanup_hook) | | |
| | [`napi_remove_async_cleanup_hook`](api/v18/n-api.html#napi_remove_async_cleanup_hook) | | |
| 在Node.js环境退出时完成 | | | |
| | | | |
| 模块注册 | | | |
| | | | |
| 使用JavaScript值 | | | |
| 枚举类型 | [`napi_key_collection_mode`](api/v18/n-api.html#napi_key_collection_mode) | | |
| | [`napi_key_filter`](api/v18/n-api.html#napi_key_filter) | | |
| | [`napi_key_conversion`](api/v18/n-api.html#napi_key_conversion) | | |
| | [`napi_valuetype`](api/v18/n-api.html#napi_valuetype) | | |
| | [`napi_typedarray_type`](api/v18/n-api.html#napi_typedarray_type) | | |
| | | | |
| 对象创建函数 | [`napi_create_array`](api/v18/n-api.html#napi_create_array) | | |
| | [`napi_create_array_with_length`](api/v18/n-api.html#napi_create_array_with_length) | | |
| | [`napi_create_arraybuffer`](api/v18/n-api.html#napi_create_arraybuffer) | | |
| | [`napi_create_buffer`](api/v18/n-api.html#napi_create_buffer) | | |
| | [`napi_create_buffer_copy`](api/v18/n-api.html#napi_create_buffer_copy) | | |
| | [`napi_create_date`](api/v18/n-api.html#napi_create_date) | | |
| | [`napi_create_external`](api/v18/n-api.html#napi_create_external) | | |
| | [`napi_create_external_arraybuffer`](api/v18/n-api.html#napi_create_external_arraybuffer) | | |
| | [`napi_create_external_buffer`](api/v18/n-api.html#napi_create_external_buffer) | | |
| | [`napi_create_object`](api/v18/n-api.html#napi_create_object) | | |
| | [`napi_create_symbol`](api/v18/n-api.html#napi_create_symbol) | | |
| | [`node_api_symbol_for`](api/v18/n-api.html#node_api_symbol_for) | | |
| | [`napi_create_typedarray`](api/v18/n-api.html#napi_create_typedarray) | | |
| | [`napi_create_dataview`](api/v18/n-api.html#napi_create_dataview) | | |
| | | | |
| 从 C 类型转换为 Node-API 的函数 | [`napi_create_int32`](api/v18/n-api.html#napi_create_int32) | | |
| | [`napi_create_uint32`](api/v18/n-api.html#napi_create_uint32) | | |
| | [`napi_create_int64`](api/v18/n-api.html#napi_create_int64) | | |
| | [`napi_create_double`](api/v18/n-api.html#napi_create_double) | | |
| | [`napi_create_bigint_int64`](api/v18/n-api.html#napi_create_bigint_int64) | | |
| | [`napi_create_bigint_uint64`](api/v18/n-api.html#napi_create_bigint_uint64) | | |
| | [`napi_create_bigint_words`](api/v18/n-api.html#napi_create_bigint_words) | | |
| | [`napi_create_string_latin1`](api/v18/n-api.html#napi_create_string_latin1) | | |
| | [`node_api_create_external_string_latin1`](api/v18/n-api.html#node_api_create_external_string_latin1) | | |
| | [`napi_create_string_utf16`](api/v18/n-api.html#napi_create_string_utf16) | | |
| | [`node_api_create_external_string_utf16`](api/v18/n-api.html#node_api_create_external_string_utf16) | | |
| | [`napi_create_string_utf8`](api/v18/n-api.html#napi_create_string_utf8) | | |
| | | | |
| 从Node-API转换为C类型的函数 | [`napi_get_array_length`](api/v18/n-api.html#napi_get_array_length) | | |
| | [`napi_get_arraybuffer_info`](api/v18/n-api.html#napi_get_arraybuffer_info) | | |
| | [`napi_get_buffer_info`](api/v18/n-api.html#napi_get_buffer_info) | | |
| | [`napi_get_prototype`](api/v18/n-api.html#napi_get_prototype) | | |
| | [`napi_get_typedarray_info`](api/v18/n-api.html#napi_get_typedarray_info) | | |
| | [`napi_get_dataview_info`](api/v18/n-api.html#napi_get_dataview_info) | | |
| | [`napi_get_date_value`](api/v18/n-api.html#napi_get_date_value) | | |
| | [`napi_get_value_bool`](api/v18/n-api.html#napi_get_value_bool) | | |
| | [`napi_get_value_double`](api/v18/n-api.html#napi_get_value_double) | | |
| | [`napi_get_value_bigint_int64`](api/v18/n-api.html#napi_get_value_bigint_int64) | | |
| | [`napi_get_value_bigint_uint64`](api/v18/n-api.html#napi_get_value_bigint_uint64) | | |
| | [`napi_get_value_bigint_words`](api/v18/n-api.html#napi_get_value_bigint_words) | | |
| | [`napi_get_value_external`](api/v18/n-api.html#napi_get_value_external) | | |
| | [`napi_get_value_int32`](api/v18/n-api.html#napi_get_value_int32) | | |
| | [`napi_get_value_int64`](api/v18/n-api.html#napi_get_value_int64) | | |
| | [`napi_get_value_string_latin1`](api/v18/n-api.html#napi_get_value_string_latin1) | | |
| | [`napi_get_value_string_utf8`](api/v18/n-api.html#napi_get_value_string_utf8) | | |
| | [`napi_get_value_string_utf16`](api/v18/n-api.html#napi_get_value_string_utf16) | | |
| | [`napi_get_value_uint32`](api/v18/n-api.html#napi_get_value_uint32) | | |
| | | | |
| 获取全局实例的函数 | [`napi_get_boolean`](api/v18/n-api.html#napi_get_boolean) | | |
| | [`napi_get_global`](api/v18/n-api.html#napi_get_global) | | |
| | [`napi_get_null`](api/v18/n-api.html#napi_get_null) | | |
| | [`napi_get_undefined`](api/v18/n-api.html#napi_get_undefined) | | |
| | | | |
| 使用JavaScript值和抽象操作 | [`napi_coerce_to_bool`](api/v18/n-api.html#napi_coerce_to_bool) | | |
| | [`napi_coerce_to_number`](api/v18/n-api.html#napi_coerce_to_number) | | |
| | [`napi_coerce_to_object`](api/v18/n-api.html#napi_coerce_to_object) | | |
| | [`napi_coerce_to_string`](api/v18/n-api.html#napi_coerce_to_string) | | |
| | [`napi_typeof`](api/v18/n-api.html#napi_typeof) | | |
| | [`napi_instanceof`](api/v18/n-api.html#napi_instanceof) | | |
| | [`napi_is_array`](api/v18/n-api.html#napi_is_array) | | |
| | [`napi_is_arraybuffer`](api/v18/n-api.html#napi_is_arraybuffer) | | |
| | [`napi_is_buffer`](api/v18/n-api.html#napi_is_buffer) | | |
| | [`napi_is_date`](api/v18/n-api.html#napi_is_date) | | |
| | [`napi_is_error`](api/v18/n-api.html#napi_is_error_1) | | |
| | [`napi_is_typedarray`](api/v18/n-api.html#napi_is_typedarray) | | |
| | [`napi_is_dataview`](api/v18/n-api.html#napi_is_dataview) | | |
| | [`napi_strict_equals`](api/v18/n-api.html#napi_strict_equals) | | |
| | [`napi_detach_arraybuffer`](api/v18/n-api.html#napi_detach_arraybuffer) | | |
| | [`napi_is_detached_arraybuffer`](api/v18/n-api.html#napi_is_detached_arraybuffer) | | |
| | | | |
| 使用JavaScript属性 | | | |
| 结构 | [`napi_property_attributes`](api/v18/n-api.html#napi_property_attributes) [`napi_property_descriptor`](api/v18/n-api.html#napi_property_descriptor) | | |
| | | | |
| 函数 | [`napi_get_property_names`](api/v18/n-api.html#napi_get_property_names) | | |
| | [`napi_get_all_property_names`](api/v18/n-api.html#napi_get_all_property_names) | | |
| | [`napi_set_property`](api/v18/n-api.html#napi_set_property) | | |
| | [`napi_get_property`](api/v18/n-api.html#napi_get_property) | | |
| | [`napi_has_property`](api/v18/n-api.html#napi_has_property) | | |
| | [`napi_delete_property`](api/v18/n-api.html#napi_delete_property) | | |
| | [`napi_has_own_property`](api/v18/n-api.html#napi_has_own_property) | | |
| | [`napi_set_named_property`](api/v18/n-api.html#napi_set_named_property) | | |
| | [`napi_get_named_property`](api/v18/n-api.html#napi_get_named_property) | | |
| | [`napi_has_named_property`](api/v18/n-api.html#napi_has_named_property) | | |
| | [`napi_set_element`](api/v18/n-api.html#napi_set_element) | | |
| | [`napi_get_element`](api/v18/n-api.html#napi_get_element) | | |
| | [`napi_has_element`](api/v18/n-api.html#napi_has_element) | | |
| | [`napi_delete_element`](api/v18/n-api.html#napi_delete_element) | | |
| | [`napi_define_properties`](api/v18/n-api.html#napi_define_properties) | | |
| | [`napi_object_freeze`](api/v18/n-api.html#napi_object_freeze) | | |
| | [`napi_object_seal`](api/v18/n-api.html#napi_object_seal) | | |
| | | | |
| 使用JavaScript函数 | [`napi_call_function`](api/v18/n-api.html#napi_call_function) | | |
| | [`napi_create_function`](api/v18/n-api.html#napi_create_function) | | |
| | [`napi_get_cb_info`](api/v18/n-api.html#napi_get_cb_info) | | |
| | [`napi_get_new_target`](api/v18/n-api.html#napi_get_new_target) | | |
| | [`napi_new_instance`](api/v18/n-api.html#napi_new_instance) | | |
| | | | |
| 对象封装 | [`napi_define_class`](api/v18/n-api.html#napi_define_class) | | |
| | [`napi_wrap`](api/v18/n-api.html#napi_wrap) | | |
| | [`napi_unwrap`](api/v18/n-api.html#napi_unwrap) | | |
| | [`napi_remove_wrap`](api/v18/n-api.html#napi_remove_wrap) | | |
| | [`napi_type_tag_object`](api/v18/n-api.html#napi_type_tag_object) | | |
| | [`napi_check_object_type_tag`](api/v18/n-api.html#napi_check_object_type_tag) | | |
| | [`napi_add_finalizer`](api/v18/n-api.html#napi_add_finalizer) | | |
| | [`node_api_post_finalizer`](api/v18/n-api.html#node_api_post_finalizer) | | |
| | | | |
| 简单的异步操作 | [`napi_create_async_work`](api/v18/n-api.html#napi_create_async_work) | | |
| | [`napi_delete_async_work`](api/v18/n-api.html#napi_delete_async_work) | | |
| | [`napi_queue_async_work`](api/v18/n-api.html#napi_queue_async_work) | | |
| | [`napi_cancel_async_work`](api/v18/n-api.html#napi_cancel_async_work) | | |
| | | | |
| 自定义异步操作 | [`napi_async_init`](api/v18/n-api.html#napi_async_init) | | |
| | [`napi_async_destroy`](api/v18/n-api.html#napi_async_destroy) | | |
| | [`napi_make_callback`](api/v18/n-api.html#napi_make_callback) | | |
| | [`napi_open_callback_scope`](api/v18/n-api.html#napi_open_callback_scope) | | |
| | [`napi_close_callback_scope`](api/v18/n-api.html#napi_close_callback_scope) | | |
| | | | |
| 版本管理 | [`napi_get_node_version`](api/v18/n-api.html#napi_get_node_version) | | |
| | [`napi_get_version`](api/v18/n-api.html#napi_get_version) | | |
| | | | |
| 内存管理 | [`napi_adjust_external_memory`](api/v18/n-api.html#napi_adjust_external_memory) | | |
| | | | |
| Promise | [`napi_create_promise`](api/v18/n-api.html#napi_create_promise) | | |
| | [`napi_resolve_deferred`](api/v18/n-api.html#napi_resolve_deferred) | | |
| | [`napi_reject_deferred`](api/v18/n-api.html#napi_reject_deferred) | | |
| | [`napi_is_promise`](api/v18/n-api.html#napi_is_promise) | | |
| | | | |
| 脚本执行 | [`napi_run_script`](api/v18/n-api.html#napi_run_script) | | |
| | | | |
| libuv事件循环 | [`napi_get_uv_event_loop`](api/v18/n-api.html#napi_get_uv_event_loop) | | |
| | | | |
| 异步线程安全函数调用 | [调用线程安全的函数](api/v18/n-api.html#调用线程安全的函数) | | |
| | [线程安全函数的引用计数](api/v18/n-api.html#线程安全函数的引用计数) | | |
| | [决定是否保持进程运行](api/v18/n-api.html#决定是否保持进程运行) | | |
| | [`napi_create_threadsafe_function`](api/v18/n-api.html#napi_create_threadsafe_function) | | |
| | [`napi_get_threadsafe_function_context`](api/v18/n-api.html#napi_get_threadsafe_function_context) | | |
| | [`napi_call_threadsafe_function`](api/v18/n-api.html#napi_call_threadsafe_function) | | |
| | [`napi_acquire_threadsafe_function`](api/v18/n-api.html#napi_acquire_threadsafe_function) | | |
| | [`napi_ref_threadsafe_function`](api/v18/n-api.html#napi_ref_threadsafe_function) | | |
| | [`napi_unref_threadsafe_function`](api/v18/n-api.html#napi_unref_threadsafe_function) | | |
| | | | |
| 使用工具 | [`node_api_get_module_file_name`](api/v18/n-api.html#node_api_get_module_file_name) | | |
| | | | |

View File

@ -0,0 +1,63 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{
"app": {
"signingConfigs": [
{
"name": "default",
"material": {
"certpath": "C:\\Users\\Administrator\\.ohos\\config\\openharmony\\auto_ohos_default_napitutorials_com.example.napitutorials.cer",
"storePassword": "00000019113BEA8A162B3F7F49C6FDC76B00433657510CE951F938C2C93DF162B26EDF103D500F7EA0",
"keyAlias": "debugKey",
"keyPassword": "00000019151AB41B42D74D7267DD11E8CAE3CCE64E310A92160984B23C669ED50912DFFD6F9E6B4EA4",
"profile": "C:\\Users\\Administrator\\.ohos\\config\\openharmony\\auto_ohos_default_napitutorials_com.example.napitutorials.p7b",
"signAlg": "SHA256withECDSA",
"storeFile": "C:\\Users\\Administrator\\.ohos\\config\\openharmony\\auto_ohos_default_napitutorials_com.example.napitutorials.p12"
}
}
],
"compileSdkVersion": 9,
"compatibleSdkVersion": 9,
"products": [
{
"name": "default",
"signingConfig": "default",
}
],
"buildModeSet": [
{
"name": "debug",
},
{
"name": "release"
}
]
},
"modules": [
{
"name": "entry",
"srcPath": "./entry",
"targets": [
{
"name": "default",
"applyToProducts": [
"default"
]
}
]
}
]
}

View File

@ -0,0 +1,34 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{
"apiType": "stageMode",
"buildOption": {
"externalNativeOptions": {
"path": "./src/main/cpp/CMakeLists.txt",
"arguments": "",
"cppFlags": "",
}
},
"targets": [
{
"name": "default",
"runtimeOS": "HarmonyOS"
},
{
"name": "ohosTest",
}
]
}

View File

@ -0,0 +1,21 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { hapTasks } from '@ohos/hvigor-ohos-plugin';
export default {
system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
plugins:[] /* Custom plugin to extend the functionality of Hvigor. */
}

View File

@ -0,0 +1,27 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{
"license": "",
"devDependencies": {},
"author": "",
"name": "entry",
"description": "Please describe the basic information.",
"main": "",
"version": "1.0.0",
"dependencies": {
"libentry.so": "file:./src/main/cpp/types/libentry"
}
}

View File

@ -0,0 +1,18 @@
# the minimum version of CMake.
cmake_minimum_required(VERSION 3.4.1)
project(NapiSample)
set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
include_directories(${NATIVERENDER_ROOT_PATH}
${NATIVERENDER_ROOT_PATH}/include)
add_library(entry SHARED
nodeapi/envlifecycleapis/napiinstancedata.cpp
init.cpp)
target_link_libraries(entry PUBLIC
libace_napi.z.so
libace_ndk.z.so
librawfile.z.so
libhilog_ndk.z.so)

View File

@ -0,0 +1,99 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#ifndef NAPITUTORIALS_COMMON_H
#define NAPITUTORIALS_COMMON_H
#include <string>
#include <stdio.h>
#include <js_native_api.h>
#include <js_native_api_types.h>
#include <vector>
#include "hilog/log.h"
#include "napi/native_api.h"
#include "rawfile/raw_file_manager.h"
#include "rawfile/raw_file.h"
#include "rawfile/raw_dir.h"
#define GLOBAL_RESMGR (0xFFEE)
constexpr int32_t RGB_565 = 2;
constexpr int32_t RGBA_8888 = 3;
constexpr int32_t STR_MAX_SIZE = 200;
constexpr int32_t LONG_STR_MAX_SIZE = 1024;
constexpr int32_t ERR_OK = 0;
constexpr int8_t NO_ERROR = 0;
constexpr int8_t ERROR = -1;
constexpr uint8_t PARAM0 = 0;
constexpr uint8_t PARAM1 = 1;
constexpr uint8_t PARAM2 = 2;
constexpr uint8_t PARAM3 = 3;
constexpr uint8_t PARAM4 = 4;
constexpr uint8_t PARAM5 = 5;
constexpr uint8_t PARAM6 = 6;
constexpr uint8_t PARAM7 = 7;
constexpr uint8_t PARAM8 = 8;
constexpr uint8_t PARAM9 = 9;
constexpr uint8_t PARAM10 = 10;
constexpr uint8_t PARAM11 = 11;
constexpr uint8_t PARAM12 = 12;
constexpr int32_t ARGS_ONE = 1;
constexpr int32_t ARGS_TWO = 2;
constexpr int32_t ONLY_CALLBACK_MAX_PARA = 1;
constexpr int32_t ONLY_CALLBACK_MIN_PARA = 0;
struct CallbackPromiseInfo {
napi_ref callback = nullptr;
napi_deferred deferred = nullptr;
bool isCallback = false;
int32_t errorCode = 0;
};
template <typename T> void FreeMemory(T *p)
{
if (p == nullptr) {
return;
}
delete p;
p = nullptr;
}
template <typename T> void FreeMemoryArray(T *p)
{
if (p == nullptr) {
return;
}
delete[] p;
p = nullptr;
}
#define NAPI_RETVAL_NOTHING
extern bool CreateArrayBuffer(napi_env env, uint8_t *src, size_t srcLen, napi_value *res);
extern napi_value NapiGetUndefined(napi_env env);
extern napi_value GetCallbackErrorValue(napi_env env, int32_t errCode);
extern napi_value NapiGetBoolean(napi_env env, const bool &isValue);
extern void SetCallback(const napi_env &env, const napi_ref &callbackIn, const int32_t &errorCode,
const napi_value &result);
extern void SetPromise(const napi_env &env, const napi_deferred &deferred, const int32_t &errorCode,
const napi_value &result);
extern void ReturnCallbackPromise(const napi_env &env, const CallbackPromiseInfo &info, const napi_value &result);
extern napi_value JSParaError(const napi_env &env, const napi_ref &callback);
extern void PaddingCallbackPromiseInfo(const napi_env &env, const napi_ref &callback, CallbackPromiseInfo &info,
napi_value &promise);
#endif //NAPITUTORIALS_COMMON_H

View File

@ -0,0 +1,23 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#ifndef NAPITUTORIALS_NODEAPI_H
#define NAPITUTORIALS_NODEAPI_H
#include "common.h"
napi_value setInstancedata(napi_env env, napi_value exports);
#endif //NAPITUTORIALS_NODEAPI_H

View File

@ -0,0 +1,71 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#include "napi/native_api.h"
#include <bits/alltypes.h>
#include "nodeapi.h"
#include <iostream>
#include <fstream>
static napi_value Add(napi_env env, napi_callback_info info)
{
size_t requireArgc = 2;
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
napi_valuetype valuetype0;
napi_typeof(env, args[0], &valuetype0);
napi_valuetype valuetype1;
napi_typeof(env, args[1], &valuetype1);
double value0;
napi_get_value_double(env, args[0], &value0);
double value1;
napi_get_value_double(env, args[1], &value1);
napi_value sum;
napi_create_double(env, value0 + value1, &sum);
return sum;
}
EXTERN_C_START
static napi_value Init(napi_env env, napi_value exports)
{
// 对应nodeapi/envlifecycleapis/napisetinstancedata
setInstancedata(env, exports);
napi_property_descriptor desc[] = {
{"add", nullptr, Add, nullptr, nullptr, nullptr, napi_default, nullptr}};
napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
return exports;
}
EXTERN_C_END
static napi_module demoModule = {
.nm_version = 1,
.nm_flags = 0,
.nm_filename = nullptr,
.nm_register_func = Init,
.nm_modname = "entry",
.nm_priv = ((void *)0),
.reserved = {0},
};
extern "C" __attribute__((constructor)) void RegisterEntryModule(void) { napi_module_register(&demoModule); }

View File

@ -0,0 +1,36 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#include "common.h"
static const char *TAG = "[nodeapi_instancedata]";
// 设置要关联的自定义数据
// warning: 'napi_set_instance_data' is deprecated [-Wdeprecated-declarations]
// ld.lld: error: undefined symbol: napi_set_instance_data
#define TEST_INT32 315
napi_value setInstancedata(napi_env env, napi_value exports)
{
// pages/nodeapi/envlifecycleapis/napisetinstancedata
napi_value instance;
napi_create_object(env, &instance);
napi_value testint32 = nullptr;
napi_create_int32(env, TEST_INT32, &testint32);
napi_set_named_property(env, instance, "testint32", testint32);
// 导出 N-API 实例对象
napi_set_named_property(env, exports, "instance", instance);
return instance;
}

View File

@ -0,0 +1,21 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export interface InstanceData {
testint32: number;
}
export const add: (a: number, b: number) => number;
export const instance;

View File

@ -0,0 +1,21 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{
"name": "libentry.so",
"types": "./index.d.ts",
"version": "",
"description": "Please describe the basic information."
}

View File

@ -0,0 +1,308 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import common from '@ohos.app.ability.common'
const TOOL_WIDTH: SizeOptions = { width: 150, height: 38 }
class ResourceObjectType {
value!: Resource;
}
/**
* Slider in item style
*
* @param changeValue slide to change
*/
@Component
export struct CommonItemSlider {
@Link changeValue: number;
private min: number = 0;
private max: number = 0;
private name: ResourceStr = '';
private step: number = 1;
private testId: string = 'test_colorSelect';
private vpTest: string = 'vp';
build() {
Row() {
Text(this.name)
Slider({
value: this.changeValue,
step: this.step,
min: this.min,
max: this.max })
.id(this.testId)
.layoutWeight(1)
.onChange((value: number) => {
this.changeValue = value
console.log('Sample_ComponentCollection' + String(value))
}).onClick((event: ClickEvent) => {
let text = ' screenX:' + event.screenX + ' screenY:' + event.screenY
console.log('Sample_ComponentCollection' + text)
})
Text(`${Math.trunc(this.changeValue)}` + this.vpTest)
}
.id(this.testId)
.width('100%')
.height(40)
.justifyContent(FlexAlign.SpaceAround)
}
}
/**
* New Slider style to two row
* Text Name at the top left of the slider
* ChangeValue at the top right of the slider
* @param changeValue slide to change
*/
@Component
export struct CommonItemTwoRowSlider {
@Link changeValue: number;
private min: number = 0;
private max: number = 0;
private name: ResourceStr = '';
private step: number = 1;
private testId: string = 'test_colorSelect';
private vpTest: string = 'vp';
build() {
Column() {
Row() {
Text(this.name)
Text(`${Math.trunc(this.changeValue)}` + this.vpTest)
}
.justifyContent(FlexAlign.SpaceBetween)
.margin({ bottom: 4 })
.width('100%')
Slider({
value: this.changeValue,
step: this.step,
min: this.min,
max: this.max })
.id(this.testId)
.width('100%')
.onChange((value: number) => {
this.changeValue = value
console.log('Sample_ComponentCollection' + String(value))
}).onClick((event: ClickEvent) => {
let text = ' screenX:' + event.screenX + ' screenY:' + event.screenY
console.log('Sample_ComponentCollection' + text)
})
}
.width('100%')
.height(60)
.justifyContent(FlexAlign.SpaceAround)
}
}
/**
* Select in item style, provide multiple choices based on menuList
*/
@Component
export struct CommonItemSelect {
private selects: ResourceStr[] = [];
private callback: (index: number, value: string) => void = (index: number, value: string) => {};
private selectOption: SelectOption[] = [];
private name: ResourceStr = '';
private testId: string = 'test_itemSelect';
private selectIndex: number = 0;
private fontSize: Font = { size: 15, weight: FontWeight.Medium };
private isItemStyle: boolean = true;
private text: string = "请选择";
aboutToAppear() {
this.selects.forEach((selects, index) => {
this.selectOption[index] = { value: selects }
})
}
build() {
Row() {
Text(this.name)
.margin({ left: this.isItemStyle ? 0 : 12, right: this.isItemStyle ? 0 : 12 })
Blank()
Select(this.selectOption)
.id(this.testId)
.value(this.text)
.backgroundColor($r('app.color.background_shallow_grey'))
.borderRadius(19)
.constraintSize({ minWidth: 150 })
.selected(this.selectIndex)
.font(this.fontSize)
.optionFont(this.fontSize)
.onSelect((index, value) => {
this.callback(index, value)
this.selectIndex = index
})
.height('100%')
}
.size({ width: '100%', height: this.isItemStyle ? 42 : 70 })
.padding({ left: this.isItemStyle ? 0 : 12, right: this.isItemStyle ? 0 : 12 })
.borderRadius(this.isItemStyle ? 0 : 24)
.backgroundColor(this.isItemStyle ? Color.Transparent : Color.White)
.margin({ bottom: 6 })
}
}
/**
* Select Color
*
* @param color change color
*/
@Component
export struct CommonItemColorSelect {
@Link selectColor: Resource;
@State selectIndex: number = 0;
private testId: string = 'test_colorSelect';
private name!: Resource;
private isItemStyle: boolean = true;
private colorNames: Array<ResourceObjectType> = [{ value: $r('app.string.divider_color_blue') }, {
value: $r('app.string.divider_color_green')
}, { value: $r('app.string.divider_color_orange') }, { value: $r('app.string.divider_color_pink') }];
changeResourceToString(resourceData: Resource) {
let context = getContext(this) as common.UIAbilityContext
return context.resourceManager.getStringSync(resourceData.id)
}
build() {
Row() {
Text(this.name)
.margin({ left: this.isItemStyle ? 0 : 12, right: this.isItemStyle ? 0 : 12 })
Blank()
Select(this.colorNames)
.value(this.changeResourceToString(this.colorNames[this.selectIndex].value))
.borderRadius(19)
.font({ size: 20 })
.optionFont({ size: 20 })
.constraintSize({ minWidth: 150 })
.selected(this.selectIndex)
.selectedOptionFont({ size: 20 })
.backgroundColor($r('app.color.background_shallow_grey'))
.padding({ left: 20, right: 20, top: 8, bottom: 8 })
.onSelect((index) => {
this.selectIndex = index
switch (index) {
case 0:
this.selectColor = $r('app.color.background_blue')
break
case 1:
this.selectColor = $r('app.color.background_green')
break
case 2:
this.selectColor = $r('app.color.background_orange')
break
case 3:
this.selectColor = $r('app.color.background_pink')
break
default:
this.selectColor = $r('app.color.background_dark')
}
})
.id(this.testId)
}
.margin({ bottom: 6 })
.borderRadius(this.isItemStyle ? 0 : 24)
.size({ width: '100%', height: this.isItemStyle ? 42 : 70 })
.padding({ left: this.isItemStyle ? 0 : 12, right: this.isItemStyle ? 0 : 12 })
.backgroundColor(this.isItemStyle ? Color.Transparent : Color.White)
}
}
/**
* TextInput of change panel
*
* @param inputValue change inputValue
*/
@Component
export struct CommonItemInput {
@Link inputValue: string;
private name!: Resource;
private placeholder?: ResourceStr = '';
build() {
Row() {
Text(this.name)
.margin({ left: 12, right: 12 })
Blank()
TextInput({ placeholder: this.placeholder })
.size(TOOL_WIDTH)
.onChange(value => {
this.inputValue = value
}).id('test_input')
.enableKeyboardOnFocus(false)
}
.size({ width: '100%', height: 70 })
.padding({ left: 12, right: 12 })
.borderRadius(24)
.backgroundColor($r('app.color.white'))
.margin({ top: 12, bottom: 12 })
}
}
@Component
export struct CommonSwitcher {
@Link bool: boolean;
private name: ResourceStr = '';
private testId: string = '';
private testID: string = '';
build() {
Row() {
Text(this.name)
Blank()
Toggle({ type: ToggleType.Switch, isOn: this.bool })
.onChange((isOn) => {
this.bool = isOn
})
.id(this.testId || this.testID)
}.width('100%')
.height(40)
}
}
@Component
export struct ImageItemSlider {
@Link changeValue: number;
private min: number = 0;
private max: number = 0;
private name: ResourceStr = '';
build() {
Row() {
Text(this.name)
Slider({
value: this.changeValue,
step: 1,
min: this.min,
max: this.max })
.layoutWeight(1)
.onChange((value: number) => {
this.changeValue = value
console.log('Sample_ComponentCollection' + String(value))
}).onClick((event: ClickEvent) => {
let text = ' screenX:' + event.screenX + ' screenY:' + event.screenY
console.log('Sample_ComponentCollection' + text)
})
Text(`${Math.trunc(this.changeValue)}`)
}
.width('100%')
.height(40)
.justifyContent(FlexAlign.SpaceAround)
}
}

View File

@ -0,0 +1,28 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Component
export struct IntroductionTitle {
private introduction!: Resource;
build() {
Text(this.introduction)
.fontSize(18)
.width('100%')
.direction(Direction.Ltr)
.margin({ left: 26, top: 8, bottom: 8 })
.fontColor($r('app.color.font_color_shallow'))
}
}

View File

@ -0,0 +1,179 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
import { SecondLevelCategory, ThirdLevelCategory, FourthLevelCategory } from '../model/CategoricalDataType';
@Extend(Column)
function ColumnStyle() {
.width('100%')
.borderRadius(24)
.backgroundColor(Color.White)
.padding({ left: 12, right: 12, bottom: 4, top: 4 })
}
@Component
export struct TabContentNavigation {
private categories: ThirdLevelCategory[] | SecondLevelCategory[] = new Array<ThirdLevelCategory>();
hasSecondLevelCategory(category: ThirdLevelCategory | SecondLevelCategory): boolean {
return category && category.image ? false : true;
}
build() {
Column() {
List() {
if (this.hasSecondLevelCategory(this.categories[0])) {
ForEach(this.categories, (secondLevelCategory: SecondLevelCategory, secondLevelCategoryIndex: number) => {
ListItem() {
Column() {
Text(secondLevelCategory.title)
.height(48)
.fontSize(14)
.width('100%')
.textAlign(TextAlign.Start)
.fontFamily('HarmonyHeiTi-Medium')
.fontColor($r('app.color.font_color_shallow'))
.padding({ bottom: 4, top: 4, left: 24 })
Column() {
ForEach(secondLevelCategory.childNodes, (thirdLevelCategory: ThirdLevelCategory,
thirdLevelCategoryIndex: number) => {
ThirdLevelNavigation({
thirdLevelCategory: thirdLevelCategory,
secondLevelCategoryIndex: secondLevelCategoryIndex,
ThirdLevelNavigationIndex: thirdLevelCategoryIndex
})
})
}
.ColumnStyle()
}
}
.id('ListItem' + secondLevelCategoryIndex)
})
} else {
ForEach(this.categories, (thirdLevelCategory: ThirdLevelCategory) => {
ListItem() {
Column() {
ThirdLevelNavigation({ thirdLevelCategory: thirdLevelCategory })
}
.ColumnStyle()
}
.margin({ top: 6, bottom: 6 })
})
}
}
.width('100%')
.layoutWeight(1)
.padding({ left: 16, right: 16, top: 4 })
.id('list_001')
Blank()
}
.height('100%')
.padding({ top: 12 })
}
}
@Component
struct ThirdLevelNavigation {
@State isUnfold: boolean = false;
private thirdLevelCategory!: ThirdLevelCategory;
private ThirdLevelNavigationIndex: number = 0;
private secondLevelCategoryIndex: number = 0;
build() {
Column() {
Row() {
Image(this.thirdLevelCategory.image)
.width(24)
.height(24)
.objectFit(ImageFit.Fill)
Text(this.thirdLevelCategory.title)
.fontSize(16)
.margin({ left: 16 })
.fontFamily('HarmonyHeiTi-Medium')
.fontColor($r('app.color.font_color_dark'))
Blank()
if (this.thirdLevelCategory.childNodes) {
Image(this.isUnfold ? $r('app.media.ic_down_arrow') : $r('app.media.ic_right_arrow'))
.width(this.isUnfold ? 24 : 12)
.height(this.isUnfold ? 12 : 24)
.margin({ right: this.isUnfold ? 0 : 6 })
}
}
.height(56)
.width('100%')
.onClick(() => {
if (this.thirdLevelCategory.childNodes === undefined) {
// Click to jump to the corresponding page
if (this.thirdLevelCategory.url) {
router.pushUrl({
url: this.thirdLevelCategory.url
})
}
} else {
this.isUnfold = !this.isUnfold
}
})
// Click to expand the fourth-level category
if (this.isUnfold) {
ForEach(this.thirdLevelCategory.childNodes, (fourthLevelCategory: FourthLevelCategory) => {
Column() {
Divider()
.height(1)
.opacity(0.2)
.margin({ left: 42, right: 8 })
.color($r('app.color.font_color_dark'))
FourthLevelNavigation({ fourthLevelCategory: fourthLevelCategory })
}
})
}
}
// 整体字符串折行会被识别出来导致功能异常只能放在单独一行1和0分别为首页标题层级index
.id(`secondLevelMenu${this.secondLevelCategoryIndex}${this.secondLevelCategoryIndex === 1 ? 0 : this.ThirdLevelNavigationIndex}`)
}
}
@Component
struct FourthLevelNavigation {
private fourthLevelCategory!: FourthLevelCategory;
build() {
Row() {
Text(this.fourthLevelCategory.title)
.fontSize(16)
.layoutWeight(1)
.margin({ left: 42 })
.align(Alignment.Start)
.fontFamily('HarmonyHeiTi-Medium')
.fontColor($r('app.color.font_color_dark'))
Blank()
}
.height(48)
.width('100%')
.onClick(() => {
// Click to jump to the corresponding page
router.pushUrl({
url: this.fourthLevelCategory.url
})
})
}
}

View File

@ -0,0 +1,47 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
// Page title bar
@Component
export struct TitleBar {
private title!: Resource;
build() {
Column() {
Row() {
Image($r('app.media.ic_back'))
.width(24)
.height(24)
.margin({ left: 24 })
.objectFit(ImageFit.Contain)
.onClick(() => {
router.back()
})
.id('backBtn')
Text(this.title)
.fontSize(20)
.layoutWeight(1)
.fontWeight(700)
.margin({ left: 16 })
.align(Alignment.Start)
Blank()
}
.height(56)
.width('100%')
}
}
}

View File

@ -0,0 +1,50 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { NODE_API_CATEGORIES } from '../pages/nodeapi/NodeApi'
import { JAVASCRIPT_API_CATEGORIES } from '../pages/javascript/JavaScriptApi'
import { OTHER_CATEGORIES } from '../pages/other/OtherMgr'
import { FirstLevelCategory } from '../model/CategoricalDataType'
import { ASYNC_CATEGORIES } from '../pages/async/AsyncMgr'
// The component collection classifies the data as a whole
export const NAPI_SAMPLE_CATEGORIES: FirstLevelCategory[] =
[
{
childNodes: NODE_API_CATEGORIES,
selectedImage: $r('app.media.ic_select_component'),
unselectedImage: $r('app.media.ic_unselect_component'),
tabBarName: $r('app.string.node_api')
},
{
childNodes: JAVASCRIPT_API_CATEGORIES,
selectedImage: $r('app.media.ic_select_global'),
unselectedImage: $r('app.media.ic_unselect_global'),
tabBarName: $r('app.string.javascript_api')
},
{
childNodes: ASYNC_CATEGORIES,
selectedImage: $r('app.media.ic_select_universal'),
unselectedImage: $r('app.media.ic_unselect_universal'),
tabBarName: $r('app.string.async_mgr')
},
{
childNodes: OTHER_CATEGORIES,
selectedImage: $r('app.media.ic_select_animation'),
unselectedImage: $r('app.media.ic_unselect_animation'),
tabBarName: $r('app.string.other_mgr')
}
]
export const fruitArray: Resource[] = []

View File

@ -0,0 +1,40 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import Logger from '../util/Logger';
let context = getContext(this);
export function getStringArrayData(resourceArrayData: Resource[]): string[] {
if (!resourceArrayData) {
return [];
}
let resourceStringArrayData: string[] = [];
resourceArrayData.forEach(item => {
try {
resourceStringArrayData.push(context.resourceManager.getStringSync(item.id));
} catch (error) {
Logger.error(`callback getStringValue failed, error code: ${error.code}, message: ${error.message}.`);
}
})
return resourceStringArrayData;
}
export function getStringData(resourceData: Resource): string {
if (!resourceData) {
return '';
}
return context.resourceManager.getStringSync(resourceData.id);
}

View File

@ -0,0 +1,58 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
}
onDestroy(): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
}
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
onWindowStageDestroy(): void {
// Main window is destroyed, release UI related resources
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
}
onForeground(): void {
// Ability has brought to foreground
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
}
onBackground(): void {
// Ability has back to background
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
}
};

View File

@ -0,0 +1,39 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export interface FirstLevelCategory {
childNodes: SecondLevelCategory[] | ThirdLevelCategory[],
selectedImage: Resource, // The icon for the first-level category is selected
unselectedImage: Resource, // The icon for the first-level category is not selected
tabBarName: Resource // First-level category title
}
export interface SecondLevelCategory {
title: Resource, // Second-level category titles
childNodes: ThirdLevelCategory[],
image?: Resource
}
export interface ThirdLevelCategory {
image: Resource, // Third-level category icon
title: Resource, // Third-level category headings
url?: string, // Third-level category detail page URL
childNodes?: FourthLevelCategory[]
}
export interface FourthLevelCategory {
title: Resource, // Fourth-level category titles
url: string // Fourth-level category detail page URL
}

View File

@ -0,0 +1,63 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import hilog from '@ohos.hilog';
import testNapi from 'libentry.so';
import { NAPI_SAMPLE_CATEGORIES } from '../data/CollectionCategory'
import { FirstLevelCategory } from '../model/CategoricalDataType'
import { TabContentNavigation } from '../common/TabContentNavigation'
@Entry
@Component
struct Index {
@State tabsIndex: number = 0
build() {
Tabs({ barPosition: BarPosition.End }) {
ForEach(NAPI_SAMPLE_CATEGORIES, (item: FirstLevelCategory, index: number) => {
TabContent() {
TabContentNavigation({ categories: item.childNodes })
}
.tabBar(this.TabBarBuilder(index, item.selectedImage, item.unselectedImage, item.tabBarName))
})
}
.barHeight(56)
.barWidth('100%')
.vertical(false)
.backgroundColor($r('app.color.background_shallow_grey'))
.onChange((index: number) => {
this.tabsIndex = index
})
}
@Builder TabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: Resource) {
Column() {
Image(this.tabsIndex === index ? selectedImage : unselectedImage)
.width(24)
.height(24)
.margin({ bottom: 4 })
Text(tabBarName)
.fontSize(10)
.fontFamily('HarmonyHeiTi-Medium')
.fontColor(this.tabsIndex === index ? $r('app.color.tab_bar_select') : $r('app.color.tab_bar_unselect'))
}
.width('100%')
.padding({ top: 6, bottom: 6 })
.alignItems(HorizontalAlign.Center)
.id(`tabBar${index}`)
}
}

View File

@ -0,0 +1,75 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ThirdLevelCategory } from '../../model/CategoricalDataType'
const SIMPLE_ASYNCRONOUS_OPERATIONS: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.simple_asyncronous_operations'),
childNodes: [
{
title: $r('app.string.napi_create_async_work'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_delete_async_work'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_queue_async_work'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_cancel_async_work'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const CUSTOM_ASYNCRONOUS_OPERATIONS: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.custom_asyncronous_operations'),
childNodes: [
{
title: $r('app.string.napi_async_init'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_async_destroy'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_make_callback'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_open_callback_scope'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_close_callback_scope'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
export const ASYNC_CATEGORIES: ThirdLevelCategory[] =
[
SIMPLE_ASYNCRONOUS_OPERATIONS,
CUSTOM_ASYNCRONOUS_OPERATIONS
]

View File

@ -0,0 +1,472 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ThirdLevelCategory } from '../../model/CategoricalDataType'
const WORK_WITH_JAVASCRIPT_VALUES: ThirdLevelCategory =
{
image: $r('app.media.ic_button_and_selection'),
title: $r('app.string.work_with_javascript_values'),
childNodes: [
{
title: $r('app.string.enum_napi_key_collection_mode'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.enum_napi_key_filter'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.enum_napi_key_conversion'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.enum_napi_valuetype'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.enum_napi_typedarray_type'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_array'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_array_with_length'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_arraybuffer'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_buffer'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_buffer_copy'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_date'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_external'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_external_arraybuffer'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_external_buffer'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_object'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_symbol'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.node_api_symbol_for'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_typedarray'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_dataview'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_int32'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_uint32'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_int64'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_double'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_bigint_int64'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_bigint_uint64'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_bigint_words'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_string_latin1'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.node_api_create_external_string_latin1'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_string_utf16'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.node_api_create_external_string_utf16'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_create_string_utf8'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_array_length'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_arraybuffer_info'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_buffer_info'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_prototype'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_typedarray_info'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_dataview_info'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_date_value'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_bool'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_double'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_bigint_int64'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_bigint_uint64'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_bigint_words'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_external'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_int32'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_int64'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_string_latin1'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_string_utf8'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_string_utf16'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_value_uint32'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_boolean'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_global'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_null'),
url: 'pages/image/basicSample/edgeDetection'
},
{
title: $r('app.string.napi_get_undefined'),
url: 'pages/image/basicSample/edgeDetection'
}
]
}
const WORK_WITH_JAVASCRIPT_VALUES_AND_ABSTRACT_OPERATIONS: ThirdLevelCategory =
{
image: $r('app.media.ic_information_presentation_and_dynamic_effects'),
title: $r('app.string.work_with_javascript_values_and_abstract_operations'),
childNodes: [
{
title: $r('app.string.napi_coerce_to_bool'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_coerce_to_number'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_coerce_to_object'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_coerce_to_string'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_typeof'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_instanceof'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_array'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_arraybuffer'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_buffer'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_date'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_typedarray'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_dataview'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_strict_equals'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_detach_arraybuffer'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_detached_arraybuffer'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const WORK_WITH_JAVASCRIPT_PROPERTIES: ThirdLevelCategory =
{
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.work_with_javascript_properties'),
childNodes: [
{
title: $r('app.string.napi_property_attributes'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_property_descriptor'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_property_names'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_all_property_names'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_set_property'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_property'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_has_property'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_delete_property'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_has_own_property'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_set_named_property'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_named_property'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_has_named_property'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_set_element'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_element'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_has_element'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_delete_element'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_define_properties'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_object_freeze'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_object_seal'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const WORK_WITH_JAVASCRIPT_FUNCTIONS: ThirdLevelCategory =
{
image: $r('app.media.ic_rows_and_columns'),
title: $r('app.string.work_with_javasript_functions'),
childNodes: [
{
title: $r('app.string.napi_call_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_create_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_cb_info'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_new_target'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_new_instance'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const OBJECT_WRAP: ThirdLevelCategory =
{
image: $r('app.media.ic_rows_and_columns'),
title: $r('app.string.object_wrap'),
childNodes: [
{
title: $r('app.string.napi_define_class'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_wrap'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_unwrap'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_remove_wrap'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_type_tag_object'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_check_object_type_tag'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_add_finalizer'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.node_api_post_finalizer'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
export const JAVASCRIPT_API_CATEGORIES: ThirdLevelCategory[] =
[
WORK_WITH_JAVASCRIPT_VALUES,
WORK_WITH_JAVASCRIPT_VALUES_AND_ABSTRACT_OPERATIONS,
WORK_WITH_JAVASCRIPT_PROPERTIES,
WORK_WITH_JAVASCRIPT_FUNCTIONS,
OBJECT_WRAP
]

View File

@ -0,0 +1,128 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
import image from '@ohos.multimedia.image';
import Logger from '../../../util/Logger';
import testNapi, { PixelInfo } from 'libentry.so';
import { TitleBar } from '../../../common/TitleBar'
import hilog from '@ohos.hilog';
const TAG: string = 'napi_padding';
@Entry
@Component
struct imagePadding {
private btnFontColor: Resource = $r('app.color.white');
private pixelMapFormat: image.PixelMapFormat = 3;
@State isPadding: Boolean = false;
@State imagePixelMap: PixelMap | undefined = undefined;
build() {
Column() {
// 标题
TitleBar({ title: $r('app.string.enum_napi_valuetype') })
Column() {
Column() {
if (this.isPadding == false) {
Image($rawfile('lena.jpg'))
.margin({ left: 24, right: 24 })
.objectFit(ImageFit.Contain)
.id('backBtn')
} else {
Image(this.imagePixelMap)
.margin({ left: 24, right: 24 })
.objectFit(ImageFit.Contain)
.id('backBtn')
}
}
.width('100%')
.height(480)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Start)
Row() {
if (this.isPadding) {
Button($r('app.string.enum_napi_valuetype'), { type: ButtonType.Capsule })
.backgroundColor(Color.Gray)
.width(120)
.height(48)
.fontSize(16)
.fontWeight(500)
.fontColor(this.btnFontColor)
.margin({ left: 24 })
.id('imageGray')
.enabled(false)
} else {
Button($r('app.string.enum_napi_valuetype'), { type: ButtonType.Capsule })
.backgroundColor(Color.Blue)
.width(120)
.height(48)
.fontSize(16)
.fontWeight(500)
.fontColor(this.btnFontColor)
.margin({ left: 24 })
.id('imageGray')
.onClick(() => {
getContext().resourceManager.getRawFileContent('lena.jpg')
.then((value: Uint8Array) => {
hilog.info(0x0000, 'testTag', `getRawFileContent ${value.length} `);
testNapi.padding(value).then((res:testNapi.PixelInfo) => {
hilog.info(0x0000, 'testTag', 'Test asyncRescont = %{public}d', res.buffSize);
let opts: image.InitializationOptions = {
editable: true,
pixelFormat: this.pixelMapFormat,
size: { height: res.rows, width: res.cols }
}
image.createPixelMap(res.byteBuffer, opts, (error, pixelmap) => {
if (error) {
Logger.error(TAG, `Failed to create pixelmap error_code ${error.code}`);
} else {
Logger.info(TAG, 'Succeeded in creating pixelmap.');
this.imagePixelMap = pixelmap;
this.isPadding = true;
}
})
})
})
})
}
Button($r('app.string.image_recover'), { type: ButtonType.Capsule })
.backgroundColor(Color.Blue)
.width(120)
.height(48)
.fontSize(16)
.fontWeight(500)
.fontColor(this.btnFontColor)
.margin({ right: 24 })
.id('imageRecover')
.onClick(() => {
this.isPadding = false;
})
}
.width('100%')
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.background_shallow_grey'))
}
}

View File

@ -0,0 +1,128 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
import image from '@ohos.multimedia.image';
import Logger from '../../../util/Logger';
import testNapi, { PixelInfo } from 'libentry.so';
import { TitleBar } from '../../../common/TitleBar'
import hilog from '@ohos.hilog';
const TAG: string = 'napi_roi';
@Entry
@Component
struct imageRoi {
private btnFontColor: Resource = $r('app.color.white');
private pixelMapFormat: image.PixelMapFormat = 3;
@State isRoi: Boolean = false;
@State imagePixelMap: PixelMap | undefined = undefined;
build() {
Column() {
// 标题
TitleBar({ title: $r('app.string.enum_napi_valuetype') })
Column() {
Column() {
if (this.isRoi == false) {
Image($rawfile('lena.jpg'))
.margin({ left: 24, right: 24 })
.objectFit(ImageFit.Contain)
.id('backBtn')
} else {
Image(this.imagePixelMap)
.margin({ left: 24, right: 24 })
.objectFit(ImageFit.Contain)
.id('backBtn')
}
}
.width('100%')
.height(480)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Start)
Row() {
if (this.isRoi) {
Button($r('app.string.enum_napi_valuetype'), { type: ButtonType.Capsule })
.backgroundColor(Color.Gray)
.width(120)
.height(48)
.fontSize(16)
.fontWeight(500)
.fontColor(this.btnFontColor)
.margin({ left: 24 })
.id('imageGray')
.enabled(false)
} else {
Button($r('app.string.enum_napi_valuetype'), { type: ButtonType.Capsule })
.backgroundColor(Color.Blue)
.width(120)
.height(48)
.fontSize(16)
.fontWeight(500)
.fontColor(this.btnFontColor)
.margin({ left: 24 })
.id('imageGray')
.onClick(() => {
getContext().resourceManager.getRawFileContent('lena.jpg')
.then((value: Uint8Array) => {
hilog.info(0x0000, 'testTag', `getRawFileContent ${value.length} `);
testNapi.roi(value).then((res:testNapi.PixelInfo) => {
hilog.info(0x0000, 'testTag', 'Test asyncRescont = %{public}d', res.buffSize);
let opts: image.InitializationOptions = {
editable: true,
pixelFormat: this.pixelMapFormat,
size: { height: res.rows, width: res.cols }
}
image.createPixelMap(res.byteBuffer, opts, (error, pixelmap) => {
if (error) {
Logger.error(TAG, `Failed to create pixelmap error_code ${error.code}`);
} else {
Logger.info(TAG, 'Succeeded in creating pixelmap.');
this.imagePixelMap = pixelmap;
this.isRoi = true;
}
})
})
})
})
}
Button($r('app.string.image_recover'), { type: ButtonType.Capsule })
.backgroundColor(Color.Blue)
.width(120)
.height(48)
.fontSize(16)
.fontWeight(500)
.fontColor(this.btnFontColor)
.margin({ right: 24 })
.id('imageRecover')
.onClick(() => {
this.isRoi = false;
})
}
.width('100%')
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.background_shallow_grey'))
}
}

View File

@ -0,0 +1,317 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ThirdLevelCategory } from '../../model/CategoricalDataType'
const ENVIRONMENT_LIFE_CYCLE_APIS: ThirdLevelCategory =
{
image: $r('app.media.ic_button_and_selection'),
title: $r('app.string.environment_life_cycle_apis'),
childNodes: [
{
title: $r('app.string.napi_set_instance_data'),
url: 'pages/nodeapi/envlifecycleapis/napisetinstancedata'
},
{
title: $r('app.string.napi_get_instance_data'),
url: 'pages/nodeapi/envlifecycleapis/napigetinstancedata'
}
]
}
const BASIC_NODE_API_DATA_TYPES: ThirdLevelCategory =
{
image: $r('app.media.ic_information_presentation_and_dynamic_effects'),
title: $r('app.string.basic_node_api_data_types'),
childNodes: [
{
title: $r('app.string.napi_status'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_extended_error_info'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_env'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_value'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_threadsafe_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_threadsafe_function_release_mode'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_threadsafe_function_call_mode'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const NODE_API_MEMORY_MANAGEMENT_TYPES: ThirdLevelCategory =
{
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.node_api_memory_management_types'),
childNodes: [
{
title: $r('app.string.napi_handle_scope'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_escapable_handle_scope'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_ref'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_type_tag'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_async_cleanup_hook_handle'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const NODE_API_CALLBACK_TYPES: ThirdLevelCategory =
{
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.node_api_callback_types'),
childNodes: [
{
title: $r('app.string.napi_callback_info'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_callback'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_finalize'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_async_execute_callback'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_async_complete_callback'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_threadsafe_function_call_js'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_cleanup_hook'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_async_cleanup_hook'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const NODE_API_ERROR_HANDLING_RETURN_VALUES: ThirdLevelCategory =
{
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.node_api_error_handling_return_values'),
childNodes: [
{
title: $r('app.string.napi_get_last_error_info'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const NODE_API_ERROR_HANDLING_EXCEPTIONS: ThirdLevelCategory =
{
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.node_api_error_handling_exception'),
childNodes: [
{
title: $r('app.string.napi_throw'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_throw_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_throw_type_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_throw_range_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.node_api_throw_syntax_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_create_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_create_type_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_create_range_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.node_api_create_syntax_error'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_and_clear_last_exception'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_exception_pending'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_fatal_exception'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const NODE_API_ERROR_HANDLING_FATAL_ERRORS: ThirdLevelCategory =
{
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.node_api_error_handling_fatal_errors'),
childNodes: [
{
title: $r('app.string.napi_fatal_error'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const NODE_API_OBJECT_LIFETIME_MANAGEMENT: ThirdLevelCategory =
{
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.node_api_object_lifetime_management'),
childNodes: [
{
title: $r('app.string.Making_handle_lifespan_shorter_than_that_of_the_native_method'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_open_handle_scope'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_close_handle_scope'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_open_escapable_handle_scope'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_close_escapable_handle_scope'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_escape_handle'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.references_to_values_with_a_lifespan_longer_than_that_of_the_native_method'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_create_reference'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_delete_reference'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_reference_ref'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_reference_unref'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_reference_value'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.cleanup_on_exit_of_the_current_nodejs_environment'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_add_env_cleanup_hook'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_remove_env_cleanup_hook'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_add_async_cleanup_hook'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_remove_async_cleanup_hook'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.finalization_on_the_exit_of_the_nodejs_environment'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const NODE_API_MODULE_REGISTRATION: ThirdLevelCategory =
{
image: $r('app.media.ic_text_and_input'),
title: $r('app.string.node_api_module_registration'),
childNodes: [
{
title: $r('app.string.node_api_module_registration'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
export const NODE_API_CATEGORIES: ThirdLevelCategory[] =
[
ENVIRONMENT_LIFE_CYCLE_APIS,
BASIC_NODE_API_DATA_TYPES,
NODE_API_MEMORY_MANAGEMENT_TYPES,
NODE_API_CALLBACK_TYPES,
NODE_API_ERROR_HANDLING_RETURN_VALUES,
NODE_API_ERROR_HANDLING_EXCEPTIONS,
NODE_API_ERROR_HANDLING_FATAL_ERRORS,
NODE_API_OBJECT_LIFETIME_MANAGEMENT,
NODE_API_MODULE_REGISTRATION
]

View File

@ -0,0 +1,116 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
import image from '@ohos.multimedia.image';
import Logger from '../../../util/Logger';
import testNapi from 'libentry.so';
import { TitleBar } from '../../../common/TitleBar'
import hilog from '@ohos.hilog';
const TAG: string = 'napi_roi';
@Entry
@Component
struct napigetinstancedata {
private btnFontColor: Resource = $r('app.color.white');
private pixelMapFormat: image.PixelMapFormat = 3;
@State isSetInstance: Boolean = false;
@State imagePixelMap: PixelMap | undefined = undefined;
@State textcont: string = '一个 Node.js 环境对应一个 ECMAScript Agent。在主进程中启动时创建一个环境'
+ '可以在单独的线程上创建额外的环境作为 工作线程。当 Node.js 嵌入到另一个应用中时,应用的主线程也可能在应用的生命周期'
+ '中多次构造和销毁 Node.js 环境,使得应用创建的每个 Node.js 环境可能,在 反过来,在其生命周期中创建和销毁额外的环境作为工作线程。'
+ '从原生插件的角度来看,这意味着它提供的绑定可以从多个上下文中多次调用,甚至可以同时从多个线程中调用。'
+ '原生插件可能需要分配它们在 Node.js 环境的生命周期中使用的全局状态,以便该状态对于插件的每个实例都是唯一的。'
+ '为此Node-API 提供了一种关联数据的方法,使其生命周期与 Node.js 环境的生命周期相关联。'
@State testcont: string = ' // 获取导出的 N-API 实例对象 \n'
+ ' const instance = addon.instance; \n'
+ ' // 使用实例对象进行操作 \n'
+ ' console.log(instance); // 输出 N-API 实例对象 \n'
+ ' // 获取与实例对象关联的自定义数据 \n'
+ ' const myData = addon.getInstanceData(instance); \n'
+ ' // 使用获取的自定义数据 \n'
+ ' console.log(myData); // 输出自定义数据 \n';
controller: TextAreaController = new TextAreaController()
build() {
Column() {
// 标题
TitleBar({ title: $r('app.string.napi_get_instance_data') })
Column() {
Column() {
TextArea({
text: this.textcont,
placeholder: '',
})
.placeholderFont({ size: 16, weight: 400 })
.width('90%')
.margin(10)
.fontSize(16)
.fontColor('#182431')
.backgroundColor('#FFFFFF')
.enabled(false)
TextArea({
text: this.testcont,
placeholder: '',
})
.placeholderFont({ size: 16, weight: 400 })
.width('90%')
.margin(10)
.fontSize(16)
.fontColor('#ff400336')
.backgroundColor('#ff985307')
.enabled(false)
}
.width('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Start)
Row() {
Button($r('app.string.enum_napi_valuetype'), { type: ButtonType.Capsule })
.backgroundColor(Color.Blue)
.width('80%')
.height(48)
.fontSize(16)
.fontWeight(500)
.fontColor(this.btnFontColor)
.margin({ left: 24 })
.id('imageGray')
.onClick(() => {
let instanceobj = testNapi.instance;
let ret1 = `instance ${instanceobj} `
let ret2 = ' ld.lld: error: undefined symbol: napi_get_instance_data '
hilog.info(0x0000, 'testTag', ret1);
hilog.info(0x0000, 'testTag', `instance ${instanceobj.testint32} `);
this.testcont = this.testcont.replace('log(instance)', 'log(## '+ret1+' ##)');
this.testcont = this.testcont.replace('log(myData)', 'log(## '+ret2+' ##)');
})
}
.width('100%')
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.background_shallow_grey'))
}
}

View File

@ -0,0 +1,116 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@ohos.router';
import image from '@ohos.multimedia.image';
import Logger from '../../../util/Logger';
import testNapi from 'libentry.so';
import { TitleBar } from '../../../common/TitleBar'
import hilog from '@ohos.hilog';
const TAG: string = 'napi_roi';
@Entry
@Component
struct napisetinstancedata {
private btnFontColor: Resource = $r('app.color.white');
private pixelMapFormat: image.PixelMapFormat = 3;
@State isSetInstance: Boolean = false;
@State imagePixelMap: PixelMap | undefined = undefined;
@State textcont: string = '一个 Node.js 环境对应一个 ECMAScript Agent。在主进程中启动时创建一个环境'
+ '可以在单独的线程上创建额外的环境作为 工作线程。当 Node.js 嵌入到另一个应用中时,应用的主线程也可能在应用的生命周期'
+ '中多次构造和销毁 Node.js 环境,使得应用创建的每个 Node.js 环境可能,在 反过来,在其生命周期中创建和销毁额外的环境作为工作线程。'
+ '从原生插件的角度来看,这意味着它提供的绑定可以从多个上下文中多次调用,甚至可以同时从多个线程中调用。'
+ '原生插件可能需要分配它们在 Node.js 环境的生命周期中使用的全局状态,以便该状态对于插件的每个实例都是唯一的。'
+ '为此Node-API 提供了一种关联数据的方法,使其生命周期与 Node.js 环境的生命周期相关联。'
@State testcont: string = ' // 获取导出的 N-API 实例对象 \n'
+ ' const instance = addon.instance; \n'
+ ' // 使用实例对象进行操作 \n'
+ ' console.log(instance); // 输出 N-API 实例对象 \n'
+ ' // 获取与实例对象关联的自定义数据 \n'
+ ' const myData = addon.getInstanceData(instance); \n'
+ ' // 使用获取的自定义数据 \n'
+ ' console.log(myData); // 输出自定义数据 \n';
controller: TextAreaController = new TextAreaController()
build() {
Column() {
// 标题
TitleBar({ title: $r('app.string.napi_set_instance_data') })
Column() {
Column() {
TextArea({
text: this.textcont,
placeholder: '',
})
.placeholderFont({ size: 16, weight: 400 })
.width('90%')
.margin(10)
.fontSize(16)
.fontColor('#182431')
.backgroundColor('#FFFFFF')
.enabled(false)
TextArea({
text: this.testcont,
placeholder: '',
})
.placeholderFont({ size: 16, weight: 400 })
.width('90%')
.margin(10)
.fontSize(16)
.fontColor('#ff400336')
.backgroundColor('#ff985307')
.enabled(false)
}
.width('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Start)
Row() {
Button($r('app.string.enum_napi_valuetype'), { type: ButtonType.Capsule })
.backgroundColor(Color.Blue)
.width('80%')
.height(48)
.fontSize(16)
.fontWeight(500)
.fontColor(this.btnFontColor)
.margin({ left: 24 })
.id('imageGray')
.onClick(() => {
let instanceobj = testNapi.instance;
let ret1 = `instance ${instanceobj} `
let ret2 = ' ld.lld: error: undefined symbol: napi_set_instance_data '
hilog.info(0x0000, 'testTag', ret1);
hilog.info(0x0000, 'testTag', `instance ${instanceobj.testint32} `);
this.testcont = this.testcont.replace('log(instance)', 'log(## '+ret1+' ##)');
this.testcont = this.testcont.replace('log(myData)', 'log(## '+ret2+' ##)');
})
}
.width('100%')
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.background_shallow_grey'))
}
}

View File

@ -0,0 +1,161 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ThirdLevelCategory } from '../../model/CategoricalDataType'
const VERSION_MANAGEMENT: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.version_management'),
childNodes: [
{
title: $r('app.string.napi_get_node_version'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_version'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const MEMORY_MANAGEMENT: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.memory_management'),
childNodes: [
{
title: $r('app.string.napi_adjust_external_memory'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const PROMISE: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.promise'),
childNodes: [
{
title: $r('app.string.napi_create_promise'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_resolve_deferred'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_reject_deferred'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_is_promise'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const SCRIPT_EXECUTION: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.script_execution'),
childNodes: [
{
title: $r('app.string.napi_run_script'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const LIBUV_EVENT_LOOP: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.libuv_event_loop'),
childNodes: [
{
title: $r('app.string.napi_get_uv_event_loop'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const ASYNCRONOUS_THREAD_SAFE_FUNCTION_CALL: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.asyncronous_thread_safe_function_call'),
childNodes: [
{
title: $r('app.string.calling_a_thread_safe_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.refrence_counting_of_thread_safe_functions'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.deciding_whether_to_keep_the_process_running'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_create_threadsafe_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_get_threadsafe_function_context'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_call_threadsafe_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_acquire_threadsafe_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_release_threadsafe_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_ref_threadsafe_function'),
url: 'pages/image/basicSample/image2Gray'
},
{
title: $r('app.string.napi_unref_threadsafe_function'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
const MISCELLANEOUS_UTILITIES: ThirdLevelCategory =
{
image: $r('app.media.ic_list_and_grid'),
title: $r('app.string.miscellaneous_utilities'),
childNodes: [
{
title: $r('app.string.node_api_get_module_file_name'),
url: 'pages/image/basicSample/image2Gray'
}
]
}
export const OTHER_CATEGORIES: ThirdLevelCategory[] =
[
VERSION_MANAGEMENT,
MEMORY_MANAGEMENT,
PROMISE,
SCRIPT_EXECUTION,
LIBUV_EVENT_LOOP,
ASYNCRONOUS_THREAD_SAFE_FUNCTION_CALL,
MISCELLANEOUS_UTILITIES
]

View File

@ -0,0 +1,45 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import hilog from '@ohos.hilog'
class Logger {
private domain: number
private prefix: string
private format: string = '%{public}s, %{public}s'
constructor(prefix: string) {
this.prefix = prefix
this.domain = 0xFF00
}
debug(...args: string[]) {
hilog.debug(this.domain, this.prefix, this.format, args)
}
info(...args: string[]) {
hilog.info(this.domain, this.prefix, this.format, args)
}
warn(...args: string[]) {
hilog.warn(this.domain, this.prefix, this.format, args)
}
error(...args: string[]) {
hilog.error(this.domain, this.prefix, this.format, args)
}
}
export default new Logger('Sample_ComponentCollection')

View File

@ -0,0 +1,35 @@
/*
* Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@ohos.promptAction'
class ShowToast {
private longToastTime: number = 3000
private shortToastTime: number = 1000
showToast(message: ResourceStr, duration: number) {
prompt.showToast({ message: message, duration: duration })
}
shortToast(message: ResourceStr) {
this.showToast(message, this.shortToastTime)
}
longToast(message: ResourceStr) {
this.showToast(message, this.longToastTime)
}
}
export default new ShowToast()

View File

@ -0,0 +1,52 @@
/*
* Copyright (c) 2023 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"phone",
"tablet"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ts",
"description": "$string:EntryAbility_desc",
"icon": "$media:icon",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
]
}
]
}
}

View File

@ -0,0 +1,237 @@
{
"color": [
{
"name": "start_window_background",
"value": "#FFFFFF"
},
{
"name": "white",
"value": "#FFFFFF"
},
{
"name": "bottom_title_divider",
"value": "#99838388"
},
{
"name": "tab_bar_divider",
"value": "#33182431"
},
{
"name": "font_color_shallow",
"value": "#182431"
},
{
"name": "font_color_dark",
"value": "#000000"
},
{
"name": "font_color_red",
"value": "#FFD22C2C"
},
{
"name": "tab_bar_select",
"value": "#007DFF"
},
{
"name": "tab_bar_unselect",
"value": "#66182431"
},
{
"name": "background_shallow_grey",
"value": "#F1F3F5"
},
{
"name": "background_dark",
"value": "#FF000000"
},
{
"name": "background_grey",
"value": "#0d000000"
},
{
"name": "background_orange",
"value": "#E6A23C"
},
{
"name": "background_pink",
"value": "#F56C6C"
},
{
"name": "background_blue",
"value": "#409EFF"
},
{
"name": "background_green",
"value": "#67C23A"
},
{
"name": "pop_up_background",
"value": "#0D182431"
},
// Button
{
"name": "button_custom_color",
"value": "#80FF7500"
},
{
"name": "button_default_bg_color",
"value": "#007DFF"
},
// Divider
{
"name": "divider_block_color",
"value": "#1A838388"
},
// Interpolation Calculation
{
"name": "curve_normal",
"value": "#3F56EA"
},
{
"name": "curve_bezier",
"value": "#00BFC9"
},
{
"name": "curve_spring",
"value": "#BCD600"
},
{
"name": "curve_init",
"value": "#E40078"
},
{
"name": "curve_steps",
"value": "#FF7500"
},
// Radio
{
"name": "radio_response_region_color",
"value": "#66ffc0cb"
},
// Select
{
"name": "select_option_bg_color",
"value": "#33007DFF"
},
{
"name": "select_option_font_color",
"value": "#FF007DFF"
},
// Toggle
{
"name": "toggle_selected_color",
"value": "#4D00BFC9"
},
//Display
{
"name": "background_light_gray",
"value": "#f1f3f5"
},
{
"name": "sub_title_color",
"value": "#182431"
},
{
"name": "title_colorone",
"value": "#0A59F7"
},
{
"name": "title_colortwo",
"value": "#000000"
},
//ScrollBarSample
{
"name": "scrollbar_background_color",
"value": "#ededed"
},
{
"name": "contentArea_background_color",
"value": "#C0C0C0"
},
// Interaction
{
"name": "normal_bg_color",
"value": "#0A59F7"
},
{
"name": "btn_border_color",
"value": "#33000000"
},
{
"name": "3D_background_color",
"value": "#F9BC64"
},
{
"name": "3D_top_left_color",
"value": "#FED599"
},
{
"name": "3D_right_buttom_color",
"value": "#D69942"
},
{
"name": "btn_one_color",
"value": "#FFC0CB"
},
{
"name": "btn_two_color",
"value": "#87CEFA"
},
{
"name": "btn_three_color",
"value": "#90EE90"
},
{
"name": "btn_onFocus_color",
"value": "#FF0000"
},
{
"name": "focus_on_background",
"value": "#007DFE"
},
{
"name": "COLOR_80000000",
"value": "#80000000"
},
{
"name": "COLOR_FFFFFF",
"value": "#FFFFFF"
},
{
"name": "COLOR_8C9BA2",
"value": "#8C9BA2"
},
{
"name": "COLOR_99FFFFFF",
"value": "#99ffffff"
},
{
"name": "canvas_background",
"value": "#ffff00"
},
{
"name": "canvas_normal_button_bg",
"value": "#317aff"
},
{
"name": "canvas_clear_button_bg",
"value": "#ffff7300"
},
{
"name": "canvas_bg_color",
"value": "#00ffff"
},
{
"name": "scroll_to_button_color",
"value": "#ff55c6f5"
},
{
"name": "scroll_item_color",
"value": "#ff2a78db"
},
{
"name": "scroll_grid_item_color",
"value": "#F9CF93"
}
]
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 611 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>button</title>
<defs>
<path d="M18.4807089,24.9335047 C18.2984642,25.1157493 18.0633778,25.2129465 17.8247686,25.2250962 L17.7736021,25.2263979 C17.5176798,25.2263979 17.2617575,25.1287668 17.0664953,24.9335047 C16.6878051,24.5548145 16.6763296,23.9479662 17.0320689,23.5554483 L17.0664953,23.5192911 L21.4859127,19.0998737 C21.7683455,18.817441 21.7784323,18.3657942 21.5161734,18.0712748 L21.4859127,18.0392136 L17.0664953,13.6197962 C16.675971,13.2292719 16.675971,12.5961069 17.0664953,12.2055826 C17.2623696,12.0097084 17.5192849,11.9120783 17.7760089,11.9126894 L17.827333,11.914125 C18.0495691,11.9260098 18.2685954,12.0116869 18.4445517,12.1711562 L18.4807089,12.2055826 L23.2536797,16.9785534 C24.1166686,17.8415423 24.1320791,19.231149 23.2999112,20.1129457 L23.2536797,20.1605339 L18.4807089,24.9335047 Z" id="path-1"></path>
</defs>
<g id="button" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="椭圆形" fill="#E5E6E7" cx="20" cy="20" r="20"></circle>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1" transform="translate(20.343146, 18.569544) scale(-1, 1) rotate(-90.000000) translate(-20.343146, -18.569544) "></use>
</mask>
<use id="路径" fill="#000000" fill-rule="nonzero" transform="translate(20.343146, 18.569544) scale(-1, 1) rotate(-90.000000) translate(-20.343146, -18.569544) " xlink:href="#path-1"></use>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>Public/ic_public_navigation_filled</title>
<defs>
<path d="M10.6663048,2.87060503 L3.13006272,19.9391736 C2.58013518,21.1846851 3.87657871,22.4418537 5.09907904,21.8485399 L12,18.4993287 L18.900921,21.8485399 C20.1234213,22.4418537 21.4198648,21.1846851 20.8699373,19.9391736 L13.3336952,2.87060503 C12.8211671,1.70979832 11.1788329,1.70979832 10.6663048,2.87060503 Z" id="_path-1"/>
</defs>
<g id="_Public/ic_public_navigation_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_路径" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 12.000000) rotate(-360.000000) translate(-12.000000, -12.000000) " xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1008 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>Public/ic_public_navigation</title>
<defs>
<path d="M10.3980312,3.04167375 L3.15007157,19.5249368 C2.94375689,19.9941363 2.95351219,20.530198 3.17676167,20.9915802 C3.59773057,21.8615826 4.64426959,22.2255962 5.51427198,21.8046273 L12,18.6663718 L18.485728,21.8046273 C18.9471103,22.0278768 19.4831719,22.0376321 19.9523714,21.8313174 C20.8371144,21.4422815 21.2389643,20.4096797 20.8499284,19.5249368 L13.6019688,3.04167375 C13.4256553,2.64070274 13.1053828,2.32043026 12.7044118,2.14411677 C11.8196689,1.75508087 10.7870671,2.15693082 10.3980312,3.04167375 Z M12.1006303,3.51723287 C12.1579118,3.54242051 12.203665,3.58817373 12.2288527,3.6454553 L19.4768123,20.1287184 C19.5323889,20.2551102 19.4749817,20.4026247 19.3485899,20.4582013 C19.2815614,20.4876748 19.2049812,20.4862812 19.1390694,20.4543884 L12.6533414,17.3161329 C12.2406663,17.1164514 11.7593337,17.1164514 11.3466586,17.3161329 L4.86093059,20.4543884 C4.73664453,20.5145268 4.58713896,20.4625249 4.52700055,20.3382388 C4.49510776,20.2723271 4.49371415,20.1957469 4.52318767,20.1287184 L11.7711473,3.6454553 C11.8267239,3.51906345 11.9742384,3.46165632 12.1006303,3.51723287 Z" id="_path-1"/>
</defs>
<g id="_Public/ic_public_navigation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_三角形" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>Public/ic_public_share</title>
<defs>
<path d="M12.25,2 C13.9068542,2 15.25,3.34314575 15.25,5 C15.25,6.65685425 13.9068542,8 12.25,8 C11.9804725,8 11.7192467,7.96445647 11.4707541,7.89780096 L5.93230241,16.2050908 C6.40150564,16.6005646 6.74773454,17.1373071 6.90542312,17.7497523 L17.0945769,17.7497523 C17.4276951,16.4559576 18.6022096,15.5 20,15.5 C21.6568542,15.5 23,16.8431458 23,18.5 C23,20.1568542 21.6568542,21.5 20,21.5 C18.6025704,21.5 17.4283015,20.5445359 17.094835,19.2512495 L6.90516499,19.2512495 C6.57169851,20.5445359 5.39742955,21.5 4,21.5 C2.34314575,21.5 1,20.1568542 1,18.5 C1,16.8431458 2.34314575,15.5 4,15.5 C4.19240202,15.5 4.38057369,15.5181123 4.56290296,15.5527249 L10.1618944,7.15402617 C9.59951533,6.60875215 9.25,5.84519291 9.25,5 C9.25,3.34314575 10.5931458,2 12.25,2 Z M4,17 C3.17157288,17 2.5,17.6715729 2.5,18.5 C2.5,19.3284271 3.17157288,20 4,20 C4.82842712,20 5.5,19.3284271 5.5,18.5 C5.5,17.6715729 4.82842712,17 4,17 Z M20,17 C19.1715729,17 18.5,17.6715729 18.5,18.5 C18.5,19.3284271 19.1715729,20 20,20 C20.8284271,20 21.5,19.3284271 21.5,18.5 C21.5,17.6715729 20.8284271,17 20,17 Z M12.25,3.5 C11.4215729,3.5 10.75,4.17157288 10.75,5 C10.75,5.82842712 11.4215729,6.5 12.25,6.5 C13.0784271,6.5 13.75,5.82842712 13.75,5 C13.75,4.17157288 13.0784271,3.5 12.25,3.5 Z" id="_path-1"/>
</defs>
<g id="_Public/ic_public_share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_合并形状" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>ic_celiakeyboard_restore</title>
<g id="_ic_celiakeyboard_restore" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M17,2.92569351 C19.5504817,2.92569351 21.6314697,4.9358348 21.7451121,7.45826551 L21.75,7.67569351 L21.75,13.6756935 C21.75,16.2261752 19.7398587,18.3071632 17.217428,18.4208057 L17,18.4256935 L16.7498114,18.4256935 L16.7498114,16.9256935 L17,16.9256935 C18.7330315,16.9256935 20.1492459,15.5692387 20.2448552,13.8601174 L20.25,13.6756935 L20.25,7.67569351 C20.25,5.94266206 18.8935452,4.52644759 17.1844239,4.4308383 L17,4.42569351 L7,4.42569351 C5.26696854,4.42569351 3.85075407,5.78214828 3.75514479,7.49126961 L3.75,7.67569351 L3.75,13.6756935 C3.75,15.408725 5.10645477,16.8249394 6.81557609,16.9205487 L7,16.9256935 L7.24981139,16.9256935 L7.24981139,18.4256935 L7,18.4256935 C4.44951834,18.4256935 2.36853034,16.4155522 2.25488786,13.8931215 L2.25,13.6756935 L2.25,7.67569351 C2.25,5.12521185 4.26014129,3.04422385 6.782572,2.93058137 L7,2.92569351 L17,2.92569351 Z" id="_形状结合" fill="#000000" fill-rule="nonzero"/>
<rect id="_矩形" fill="#000000" x="11.2498114" y="13.0699577" width="1.5" height="8" rx="0.75"/>
<path d="M9.46564687,21.4888082 L11.3354476,19.8267631 C11.7143336,19.4899756 12.2852892,19.4899756 12.6641752,19.8267631 L14.5339759,21.4888082" id="_路径备份-2" stroke="#000000" stroke-width="1.5" stroke-linecap="round" fill-rule="nonzero" transform="translate(11.999811, 20.531490) rotate(-180.000000) translate(-11.999811, -20.531490) "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 981 B

View File

@ -0,0 +1,16 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame" clip-path="url(#clip0_82_726819)">
<g id="_ic_contacts_refuse_filled">
<g id="Frame_2">
<g id="_Public/ic_public_phone_filled">
<path id="_&#232;&#183;&#175;&#229;&#190;&#132;" d="M2.80416 9.19577C2.38552 7.37422 2.93955 5.46627 4.26938 4.14724C5.0078 3.318 5.70677 2.84025 6.36629 2.714C7.35556 2.52462 8.36851 2.91501 8.99771 3.69704L11.1384 6.34325C11.2455 6.47438 11.3294 6.57644 11.3805 6.63743L11.4273 6.69227C12.2386 7.6063 12.2174 8.97965 11.3907 9.86765L11.3318 9.9288L9.88648 11.2923C9.3121 11.865 9.20952 12.7558 9.63895 13.4432C10.4718 14.7829 12.0323 16.5893 13.7364 18.2639C15.4111 19.9681 17.2175 21.5287 18.5572 22.3615C19.2446 22.7909 20.1354 22.6883 20.7081 22.1139L22.0716 20.6686L22.1328 20.6097C22.9968 19.8053 24.3202 19.7635 25.233 20.5092L25.4631 20.7029C25.9867 21.1344 27.6256 22.4574 28.3034 23.0027C29.0854 23.6319 29.4758 24.6448 29.2864 25.6341C29.1602 26.2936 28.6824 26.9926 27.8532 27.731C26.5341 29.0609 24.6262 29.6149 22.8046 29.1963C18.9256 28.2951 14.3385 25.2549 10.5227 21.4778C6.74552 17.6619 3.70534 13.0749 2.80416 9.19577Z" fill="#00CB87"/>
</g>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_82_726819">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>Public/ic_public_cancel_filled</title>
<defs>
<path d="M5.63603897,19.7781746 C5.24551468,20.1686989 4.6123497,20.1686989 4.2218254,19.7781746 C3.83130111,19.3876503 3.83130111,18.7544853 4.2218254,18.363961 L10.5857864,12 L4.2218254,5.63603897 C3.83130111,5.24551468 3.83130111,4.6123497 4.2218254,4.22182541 C4.61234969,3.83130112 5.24551467,3.83130112 5.63603896,4.22182541 L12,10.5857864 L18.363961,4.22182541 C18.7544853,3.83130112 19.3876503,3.83130112 19.7781746,4.22182541 C20.1686989,4.6123497 20.1686989,5.24551468 19.7781746,5.63603897 L5.63603897,19.7781746 Z M19.7781746,18.363961 C20.1686989,18.7544853 20.1686989,19.3876503 19.7781746,19.7781746 C19.3876503,20.1686989 18.7544853,20.1686989 18.363961,19.7781746 L12.7071068,14.1213203 L14.1213203,12.7071068 L19.7781746,18.363961 Z" id="_path-1"/>
</defs>
<g id="_Public/ic_public_cancel_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_形状" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>ic_puzzle</title>
<defs>
<path d="M18,2 C20.209139,2 22,3.790861 22,6 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L18,2 Z M8.499,10 L3.5,10 L3.5,18 C3.5,19.3254834 4.53153594,20.4100387 5.83562431,20.4946823 L6,20.5 L8.5,20.5 L8.499,10 Z M20.5,15.5 L9.999,15.5 L10,20.5 L18,20.5 C19.3254834,20.5 20.4100387,19.4684641 20.4946823,18.1643757 L20.5,18 L20.5,15.5 Z M14,9.999 L9.999,9.999 L9.999,14 L14,14 L14,9.999 Z M18,3.5 L15.5,3.5 L15.5,14 L20.5,14 L20.5,6 C20.5,4.6745166 19.4684641,3.58996133 18.1643757,3.50531768 L18,3.5 Z M14,3.5 L6,3.5 C4.6745166,3.5 3.58996133,4.53153594 3.50531768,5.83562431 L3.5,6 L3.5,8.5 L14,8.499 L14,3.5 Z" id="_path-1"/>
</defs>
<g id="_ic_puzzle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" version="1.1" viewBox="0 0 24 24">
<defs>
<path id="_uxs-a" d="M3.24249286,2.18148688 L3.27849026,2.21522818 L17.462,16.3985583 L18.2644337,17.2003471 L18.263,17.1995583 L21.7784903,20.7152282 C22.0713835,21.0081214 22.0713835,21.4829951 21.7784903,21.7758883 C21.4973128,22.0570658 21.048422,22.0683129 20.7538275,21.8096296 L20.7178301,21.7758883 L16.8737051,17.931871 C15.3336023,18.6240802 13.6706017,19 12,19 C11.4687225,19 10.9377254,18.9618913 10.4108338,18.8876016 L10.4071699,18.8898494 C6.63075612,18.3522891 3.06911087,15.9627881 1.1237988,12.4261126 C0.958720986,12.1259928 0.958734525,11.7622639 1.12383468,11.4621564 C2.22040927,9.46887987 3.82753813,7.86651424 5.69710659,6.75598715 L2.21783009,3.27588835 C1.92493687,2.98299513 1.92493687,2.50812139 2.21783009,2.21522818 C2.49900758,1.93405069 2.94789831,1.92280359 3.24249286,2.18148688 Z M3.84234714,10.2032107 L11.0951541,17.457979 C11.3554072,17.4820689 11.6164837,17.4959284 11.8778019,17.499228 L12,17.5 C12.2351188,17.5 12.4700313,17.4914286 12.704324,17.4745213 L4.63344709,9.40300717 C4.35699432,9.65558732 4.09278071,9.92259752 3.84234714,10.2032107 Z M5.81424625,8.46234537 L14.5247671,17.1744387 C14.9317354,17.0693151 15.3332915,16.9396446 15.7270919,16.7867633 L6.79724807,7.85445338 C6.45983523,8.03982375 6.13159864,8.24275999 5.81424625,8.46234537 Z M2.6270143,11.855814 L2.57475,11.94425 L2.62906687,12.0363214 C3.94599828,14.2426521 6.00493854,15.9242417 8.3229968,16.8075992 L2.91598789,11.3989012 C2.81605077,11.5484274 2.71967156,11.700761 2.6270143,11.855814 Z M11.9855652,5 C16.3241739,5 20.6294483,7.43580293 22.8461207,11.4681793 C23.0110287,11.7681655 23.0110272,12.1316601 22.8461169,12.4316451 C21.917141,14.1215252 20.6234926,15.5490856 19.114298,16.6371994 L18.0376599,15.5608299 C19.3561719,14.6517556 20.4982416,13.4555522 21.3406926,12.0424401 L21.395,11.95 L21.3427165,11.8611806 C19.3982331,8.6048523 15.8133859,6.54561308 12.1090841,6.50074831 L11.9855652,6.5 C11.0846232,6.5 10.1899416,6.61920416 9.32324782,6.84595047 L8.11885045,5.64269109 C9.36675913,5.22189271 10.6745007,5 11.9855652,5 Z M12,7.25 C14.8994949,7.25 17.25,9.60050506 17.25,12.5 C17.25,12.6529428 17.2448512,12.7869684 17.2346713,12.9036469 C17.1945058,13.4324713 17.0759423,13.9394551 16.890587,14.4129665 L10.0870929,7.60938964 C10.1571766,7.58195639 10.2279939,7.55598612 10.2995072,7.53151637 L10.4168532,7.49287563 L10.4906788,7.47016124 L10.6442158,7.42671771 L10.7507223,7.39952944 L10.8578986,7.3745 L10.914966,7.36224469 L11.0474359,7.33619513 L11.1545735,7.31770999 L11.2892219,7.29770486 L11.4170686,7.28199589 L11.5336456,7.27042987 L11.62893,7.2629106 L11.7270616,7.25697246 L11.8624436,7.25176704 C11.908162,7.2505913 11.954012,7.25 12,7.25 Z"/>
</defs>
<g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
<mask id="_uxs-b" fill="#fff">
<use xlink:href="#_uxs-a"/>
</mask>
<g fill="#000" fill-opacity=".9" mask="url(#_uxs-b)">
<rect width="24" height="24" x="0" y="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>Public/ic_public_highlight</title>
<defs>
<path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M10.5428039,6.04038218 C10.9399901,5.23559498 11.9143821,4.90516911 12.7191693,5.30235534 C13.0396398,5.46051698 13.2990345,5.7199117 13.4571961,6.04038218 L13.4571961,6.04038218 L14.692,8.543 L17.4553991,8.9452467 C18.2941937,9.06713068 18.8896769,9.80942006 18.8445354,10.6397045 L18.8445354,10.6397045 L18.8298383,10.7870304 C18.7784484,11.1406905 18.6119068,11.467547 18.3559959,11.7169984 L18.3559959,11.7169984 L16.356,13.665 L16.8288182,16.417168 C16.9721014,17.2525732 16.4501567,18.0482915 15.6465598,18.2619313 L15.6465598,18.2619313 L15.5019029,18.2934797 C15.1496718,18.3538921 14.7873486,18.2965057 14.4710253,18.1302047 L14.4710253,18.1302047 L12,16.831 L9.52897465,18.1302047 C8.778734,18.5246296 7.86067116,18.2741211 7.40916251,17.5758734 L7.40916251,17.5758734 L7.33445676,17.4480455 C7.16815577,17.1317222 7.11076942,16.7693991 7.17118179,16.417168 L7.17118179,16.417168 L7.643,13.665 L5.64400414,11.7169984 C5.03914691,11.1274083 4.99191863,10.181394 5.51072194,9.53634779 L5.51072194,9.53634779 L5.6146328,9.4190891 C5.86408428,9.16317819 6.1909407,8.99663653 6.54460088,8.9452467 L6.54460088,8.9452467 L9.307,8.543 Z M12.1659621,6.42327543 C11.980242,6.33161707 11.7553823,6.4078692 11.663724,6.59358932 L11.663724,6.59358932 L10.3991275,9.15594169 C10.2352577,9.4879781 9.91849643,9.71811864 9.5520725,9.77136316 L9.5520725,9.77136316 L6.72434877,10.1822555 C6.64273489,10.1941147 6.56730648,10.2325473 6.50974075,10.2916037 C6.3651778,10.4399101 6.36821241,10.6773275 6.51651876,10.8218905 L6.51651876,10.8218905 L8.56267887,12.8164036 C8.82782571,13.0748579 8.94881776,13.4472332 8.88622508,13.8121765 L8.88622508,13.8121765 L8.4031922,16.6284743 C8.38925088,16.7097584 8.40249389,16.7933714 8.44087104,16.8663691 C8.53724634,17.0496858 8.76398152,17.1201658 8.94729824,17.0237905 L8.94729824,17.0237905 L11.4764912,15.694115 C11.8042308,15.5218121 12.1957692,15.5218121 12.5235088,15.694115 L12.5235088,15.694115 L15.0527018,17.0237905 C15.1256994,17.0621676 15.2093125,17.0754106 15.2905966,17.0614693 C15.4947227,17.0264589 15.6318182,16.8326004 15.5968078,16.6284743 L15.5968078,16.6284743 L15.1137749,13.8121765 C15.0511822,13.4472332 15.1721743,13.0748579 15.4373211,12.8164036 L15.4373211,12.8164036 L17.4834812,10.8218905 C17.5425376,10.7643248 17.5809703,10.6888964 17.5928295,10.6072825 C17.6226111,10.4023281 17.4806056,10.2120371 17.2756512,10.1822555 L17.2756512,10.1822555 L14.4479275,9.77136316 C14.0815036,9.71811864 13.7647423,9.4879781 13.6008725,9.15594169 L13.6008725,9.15594169 L12.336276,6.59358932 C12.2997772,6.51963459 12.2399169,6.45977427 12.1659621,6.42327543 Z" id="_path-1"/>
</defs>
<g id="_Public/ic_public_highlight" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" version="1.1" viewBox="0 0 24 24">
<path fill="#000" fill-rule="nonzero" stroke="none" stroke-width="1" d="M19.3254181,12.4782635 L19.4949317,12.4050414 C21.8333766,11.364541 23.1751443,9.81491266 22.4412169,7.53813638 C22.0732446,6.39871281 20.1533977,5.49943816 19.063787,5.91862694 L18.7108833,6.06439307 L18.091516,6.33581185 L17.9381825,6.39997232 C17.8403751,6.43996038 17.7513684,6.47439285 17.6709882,6.50336317 L17.482,6.565 L17.4761414,6.47493008 C17.2285574,3.3006589 15.1408576,1.18343564 12.6959892,2.77124869 C12.3457402,2.99870725 12.1183043,3.22438917 11.7389356,3.68607007 L11.3748128,4.13228426 C11.1528865,4.39618144 11.0179126,4.52649007 10.8548086,4.63656562 C10.4465786,4.91218364 9.90705109,5.00979953 9.02969773,5.00639697 L8.78927496,5.00015361 C8.70363797,4.99621562 8.61058095,4.99036508 8.50433207,4.982435 L8.16963036,4.95496509 C5.92213526,4.7618774 4.88400062,5.10913394 4.46112877,7.04443243 C4.28987593,7.82865215 4.45657963,8.36726985 4.98070638,9.24912962 L5.19747371,9.60426148 C5.56100627,10.1985327 5.64448952,10.4667016 5.55035454,10.7603979 C5.51195878,10.880176 5.37258249,11.0380969 5.09544402,11.2582663 L4.87596587,11.4277037 C3.7805258,12.2639527 3.14758042,12.8836371 2.50414182,13.8263035 C1.21053359,15.7200681 0.977054632,16.8264598 1.53374581,18.2953635 C2.18754767,20.0193655 4.41153929,21.2388856 6.17488283,20.536041 C6.95955844,20.2233343 7.39512785,19.8517181 7.96788514,19.1221713 L8.23502027,18.7728264 C8.71643009,18.1420405 9.04889804,17.850327 9.68125118,17.6000731 C10.3709923,17.3271524 10.6181577,17.4890011 11.1925042,18.570529 L11.4873075,19.1323148 C12.8781818,21.7090755 15.7556506,21.7570284 17.6513606,19.4534264 C18.5303951,18.3847599 19.1840793,17.0589953 18.9873029,16.043054 C18.8791769,15.4883431 18.5907441,15.1269212 18.0288263,14.6705795 L17.5167738,14.2701002 L17.4752744,14.2360998 C17.4012014,14.1746609 17.345439,14.1235665 17.3046698,14.0800575 C16.9906964,13.7448349 16.9830384,13.6791587 17.0765045,13.569487 C17.2370247,13.3811349 17.5932302,13.178333 18.2009491,12.9257892 L19.3254181,12.4782635 Z M15.998188,6.92632904 C16.0195856,7.71558794 16.5805517,8.1600935 17.3147919,8.11712342 C17.6494383,8.09753884 17.9981046,7.99515236 18.4705033,7.80303717 L19.5308381,7.34581651 C19.5492789,7.33877086 19.5697547,7.33115084 19.6024117,7.31858532 C19.8933957,7.20663964 20.9119596,7.68374471 21.0136829,7.99873006 C21.4198188,9.25863782 20.6726464,10.1907172 19.0874618,10.9417163 L18.8381496,11.0552725 L17.8348503,11.4553558 C16.883007,11.835245 16.3253206,12.1383679 15.9348555,12.596534 C15.3034056,13.3374682 15.409973,14.2514095 16.209993,15.1055733 C16.2694582,15.1690347 16.3336629,15.2308561 16.4050002,15.2941668 L16.6508114,15.4980906 L16.9335648,15.7165273 C17.332237,16.0252458 17.4899084,16.2012481 17.5148419,16.3291625 C17.5973577,16.7551877 17.1017428,17.7603654 16.4930182,18.5004086 C15.2792714,19.9753122 13.7649636,19.999914 12.8948502,18.5724569 L12.7729798,18.3558536 L12.6128931,18.049347 C11.6583136,16.2080124 10.8300878,15.5323377 9.12931763,16.2053081 C8.27854426,16.5420018 7.76524294,16.9582327 7.19872884,17.6632093 L6.91824533,18.0268045 C6.4201281,18.6848179 6.15721628,18.9283567 5.61953696,19.1426312 C4.69443815,19.5113629 3.31156571,18.7530684 2.93633546,17.7636284 C2.57388456,16.8072534 2.70327402,16.1941128 3.74289884,14.6721646 C4.23439638,13.9520987 4.71219577,13.4625948 5.53022341,12.818287 L6.02849808,12.4327492 C6.52053611,12.0418554 6.82553617,11.6962737 6.97876759,11.2182583 C7.22662165,10.4449665 7.07627405,9.84990829 6.59416087,9.01790686 L6.3843406,8.67097004 C5.95744583,7.97954953 5.85349584,7.69918972 5.92657383,7.36454296 C6.11505074,6.50196709 6.40678173,6.33775541 7.67152656,6.4209694 L8.57376341,6.49070068 C8.7377602,6.5007699 8.8801216,6.50586019 9.02404744,6.50638632 C10.1783077,6.5108628 10.9721021,6.36724277 11.694032,5.87982908 C11.9873059,5.68190457 12.1920821,5.48825099 12.4832222,5.14504677 L12.9815677,4.5378075 C13.2083073,4.26880206 13.3461977,4.13754532 13.5129706,4.02923973 C14.7641668,3.21665381 15.9324355,4.49900653 15.998188,6.92632904 Z"/>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 853 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 812 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 663 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>Public/ic_public_sift</title>
<defs>
<path d="M4.91676415,2.25 L4.75808035,2.25485026 C2.77345665,2.37699507 1.76507474,4.77836295 3.11720971,6.30280272 L9.451,13.448 L9.45165191,19.3317225 C9.45165191,19.5528715 9.5492531,19.7627476 9.71836704,19.9052517 L12.1359634,21.9424413 L12.2359982,22.0194003 C13.0842855,22.6123412 14.2786193,22.0055246 14.2786193,20.9382593 L14.278,13.729 L20.8805098,6.30549709 C22.2713775,4.74140593 21.1737033,2.25 19.0832687,2.25 L4.91676415,2.25 Z M4.91676415,3.75 L19.0832687,3.75 C19.87284,3.75 20.2945459,4.70715168 19.7596123,5.3087078 L12.9681784,12.9454877 L12.9015756,13.0324072 C12.8217893,13.1539895 12.7786193,13.2968945 12.7786193,13.4438912 L12.778,20.522 L10.951,18.983 L10.9516519,13.1635183 C10.9516519,12.9801751 10.8844936,12.8031824 10.7628688,12.6659887 L4.23951739,5.30760152 C3.70586995,4.70595046 4.1279648,3.75 4.91676415,3.75 Z" id="_path-1"/>
</defs>
<g id="_Public/ic_public_sift" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_Stroke-1" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>ic_gallery_blur</title>
<g id="_ic_gallery_blur" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12,0.75 L11.7334486,0.751140931 C6.70791088,0.83109938 2.75,4.85298088 2.75,9.83935235 C2.75,13.3093683 4.54095381,16.4835288 7.86894106,20.2268459 L8.10085655,20.485626 L8.32434386,20.721199 L8.59168343,20.9877802 L8.90326504,21.2858246 L9.25947845,21.6157876 L9.66071345,21.9781243 L10.1073598,22.3732899 L10.509368,22.7211442 C11.420977,23.4437182 12.7041229,23.4204767 13.576813,22.6722914 C14.6507653,21.7515573 15.5007016,20.9384839 16.1287501,20.2290058 C19.5470643,16.3674899 21.25,13.376196 21.25,9.83935235 C21.25,4.81620272 17.1054507,0.75 12,0.75 Z M11.8859001,2.2499763 L12,2.2499763 C16.2833634,2.2499763 19.75,5.65110493 19.75,9.83935235 C19.75,12.9021711 18.197831,15.6286355 15.0055957,19.2347602 C14.4286634,19.8864947 13.6262559,20.6541008 12.6005016,21.5335131 C12.2735456,21.813823 11.7903355,21.8225753 11.4539143,21.5560034 L10.8755765,21.051076 L10.2853201,20.5212694 L9.94841019,20.2097067 L9.52863979,19.8056388 L9.30626605,19.578919 C9.27305484,19.5439989 9.24177307,19.5105165 9.21242661,19.4784787 L8.98797346,19.2279678 C5.88770541,15.74078 4.25,12.8382262 4.25,9.83935235 C4.25,5.75540729 7.42012378,2.45236677 11.5004142,2.25895838 L11.8859001,2.2499763 Z" id="_路径" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 11.999292) scale(1, -1) translate(-12.000000, -11.999292) "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.3 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.0 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" version="1.1" viewBox="0 0 24 24">
<path fill="#000" fill-rule="evenodd" stroke="none" stroke-width="1" d="M2,15.5 L9.25,15.5 L9.25,22 L4,22 C2.8954305,22 2,21.1045695 2,20 L2,15.5 Z M22,15.5 L22,20 C22,21.1045695 21.1045695,22 20,22 L10.25,22 L10.25,15.5 L22,15.5 Z M22,14.5 L10.25,14.5 L10.25,9 L22,9 L22,14.5 Z M2,9 L9.25,9 L9.25,14.5 L2,14.5 L2,9 Z M20,2 C21.1045695,2 22,2.8954305 22,4 L22,8 L10.25,8 L10.25,2 L20,2 Z M9.25,8 L2,8 L2,4 C2,2.8954305 2.8954305,2 4,2 L9.25,2 L9.25,8 Z"/>
</svg>

After

Width:  |  Height:  |  Size: 601 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 406 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 32 32" version="1.1">
<title>ic_desktop_squeeze</title>
<defs>
<rect id="_path-1" x="0" y="0" width="32" height="32"/>
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="_linearGradient-3">
<stop stop-color="#000000" offset="0%"/>
<stop stop-color="#000000" stop-opacity="0.1" offset="100%"/>
</linearGradient>
</defs>
<g id="_ic_desktop_squeeze" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<g id="_蒙版"/>
<g id="_推压" mask="url(#_mask-2)">
<g transform="translate(3.000000, 3.000000)">
<path d="M21.0039179,0 L26,0 L26,26 L21.0039179,26 C18.7947789,26 17.0039179,24.209139 17.0039179,22 L17.0039179,4 C17.0039179,1.790861 18.7947789,0 21.0039179,0 Z" id="_Mask" fill="url(#_linearGradient-3)"/>
<path d="M4,0 L11,0 C13.209139,0 15,1.790861 15,4 L15,22 C15,24.209139 13.209139,26 11,26 L4,26 C1.790861,26 0,24.209139 0,22 L0,4 C0,1.790861 1.790861,0 4,0 Z" id="_Rectangle" fill="#000000"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 595 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 307 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>Public/ic_public_unlock_filled</title>
<defs>
<path d="M5.75,1 C8.20766714,1 10.2051704,2.97019583 10.2492559,5.41733369 L10.25,5.5 L10.25,9 L16.5,9 C18.1568542,9 19.5,10.3431458 19.5,12 L19.5,18.5 C19.5,20.1568542 18.1568542,21.5 16.5,21.5 L7.5,21.5 C5.84314575,21.5 4.5,20.1568542 4.5,18.5 L4.5,12 C4.5,10.3431458 5.84314575,9 7.5,9 L8.25,9 L8.25,5.5 C8.25,4.11928813 7.13071187,3 5.75,3 C4.39269002,3 3.28801707,4.0816677 3.25096045,5.43002379 L3.25,7.5140186 C3.25,8.06630335 2.80228475,8.5140186 2.25,8.5140186 C1.71445115,8.5140186 1.27723028,8.09302648 1.25122383,7.56392868 L1.25,7.5140186 L1.25,5.5 C1.25,3.01471863 3.26471863,1 5.75,1 Z M12,13.25 C10.8954305,13.25 10,14.1454305 10,15.25 C10,16.3545695 10.8954305,17.25 12,17.25 C13.1045695,17.25 14,16.3545695 14,15.25 C14,14.1454305 13.1045695,13.25 12,13.25 Z" id="_path-1"/>
</defs>
<g id="_Public/ic_public_unlock_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>Linear/ic_device_soundx</title>
<desc>Created with Sketch.</desc>
<g id="_Linear/ic_device_soundx" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M13.75,1 C17.5773333,1 20.6872467,4.07164002 20.7490622,7.8842422 L20.75,16 C20.75,19.8273333 17.67836,22.9372467 13.8657578,22.9990622 L10.25,23 C6.42266668,23 3.31275333,19.92836 3.2509378,16.1157578 L3.25,8 C3.25,4.17266668 6.32164002,1.06275333 10.1342422,1.0009378 L13.75,1 Z M19.2365663,16.3874237 C16.9618581,17.1477138 14.5486306,17.5277778 12,17.5277778 C9.53624727,17.5277778 7.19902907,17.1726071 4.99126698,16.4619537 L4.76333971,16.3871698 L4.76787183,16.446622 C4.99279861,19.2455535 7.31321224,21.4531223 10.1590474,21.4992632 L13.75,21.5 C16.6573179,21.5 19.0377684,19.2442128 19.2365663,16.3874237 Z M15.6116987,2.82307323 L15.6023268,2.82996212 C14.9950938,3.16494949 13.5735209,3.4 11.9166667,3.4 C10.3104099,3.4 8.92528381,3.17908638 8.28889993,2.86036851 C6.24711804,3.63878557 4.78815612,5.60113509 4.75073684,7.90904744 L4.74997341,14.7939348 C7.01131059,15.6163527 9.42663651,16.0277778 12,16.0277778 C14.5733635,16.0277778 16.9886894,15.6163527 19.2500266,14.7939348 L19.2500266,8 C19.2500266,5.61587725 17.7330632,3.58605638 15.6116987,2.82307323 Z M12,7.125 C13.1522668,7.125 14.0903304,8.04211324 14.1240609,9.18620993 L14.125,12.75 C14.125,13.9236051 13.1736051,14.875 12,14.875 C10.8477332,14.875 9.90966964,13.9578868 9.87593915,12.8137901 L9.875,9.25 C9.875,8.07639491 10.8263949,7.125 12,7.125 Z M12,8.375 C11.5328591,8.375 11.1512184,8.7410694 11.1262947,9.2019912 L11.125,9.25 L11.125,12.75 C11.125,13.2332492 11.5167508,13.625 12,13.625 C12.4671409,13.625 12.8487816,13.2589306 12.8737053,12.7980088 L12.875,9.25 C12.875,8.76675084 12.4832492,8.375 12,8.375 Z" id="_形状" fill="#000000" fill-rule="nonzero"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 712 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" version="1.1">
<title>Public/ic_public_ok_filled</title>
<defs>
<path d="M12.0857864,21.2352814 C11.6952621,21.6258057 11.0620972,21.6258057 10.6715729,21.2352814 C10.2928827,20.8565912 10.2814072,20.2497429 10.6371465,19.8572249 L10.6715729,19.8210678 L15.7716797,14.7194661 L15.8293222,14.6502093 C15.9534917,14.4658252 15.9414454,14.2170042 15.7931833,14.0451228 L15.767767,14.017767 L14.3536797,12.6034661 L11.1715729,9.42157288 L5.42157288,3.67157288 C5.03104858,3.28104858 5.03104858,2.6478836 5.42157288,2.25735931 C5.8002631,1.87866909 6.40711132,1.86719363 6.7996293,2.22293293 L6.83578644,2.25735931 L12.5786797,8.00046609 L12.5857864,8.00735931 L17.5355339,12.9571068 C18.3018457,13.7234186 18.3163044,14.956872 17.57891,15.7408118 L17.5355339,15.7855339 L12.0857864,21.2352814 Z" id="_path-1"/>
</defs>
<g id="_Public/ic_public_ok_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="_mask-2" fill="white">
<use xlink:href="#_path-1"/>
</mask>
<use id="_形状结合" fill="#000000" fill-rule="nonzero" transform="translate(11.625000, 11.746320) rotate(-270.000000) translate(-11.625000, -11.746320) " xlink:href="#_path-1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 862 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 B

Some files were not shown because too many files have changed in this diff Show More