HarmonyOS Next开发----使用XComponent自定义绘制

news2025/4/17 17:51:23
XComponent组件作为一种绘制组件，通常用于满足用户复杂的自定义绘制需求，其主要有两种类型"surface和component。对于surface类型可以将相关数据传入XComponent单独拥有的NativeWindow来渲染画面。

由于上层UI是采用arkTS开发，那么想要使用XComponent的话，就需要一个桥接和native层交互，类似Android的JNI,鸿蒙应用可以使用napi接口来处理js和native层的交互。

1. 编写CMAKELists.txt文件
# the minimum version of CMake.
cmake_minimum_required(VERSION 3.4.1)
project(XComponent) #项目名称

set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
#头文件查找路径
include_directories(
    ${NATIVERENDER_ROOT_PATH}
    ${NATIVERENDER_ROOT_PATH}/include
)
# 编译目标so动态库
add_library(nativerender SHARED
    samples/minute_view.cpp
    plugin/plugin_manager.cpp
    common/HuMarketMinuteData.cpp
    common/MinuteItem.cpp
    napi_init.cpp
)
# 查找需要的公共库
find_library(
    # Sets the name of the path variable.
    hilog-lib
    # Specifies the name of the NDK library that
    # you want CMake to locate.
    hilog_ndk.z
)
#编译so所需要的依赖
target_link_libraries(nativerender PUBLIC
    libc++.a
    ${hilog-lib}
    libace_napi.z.so
    libace_ndk.z.so
    libnative_window.so
    libnative_drawing.so
)
2. Napi模块注册
#include <hilog/log.h>
#include "plugin/plugin_manager.h"
#include "common/log_common.h"

EXTERN_C_START
static napi_value Init(napi_env env, napi_value exports)
{
    OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Init", "Init begins");
    if ((nullptr == env) || (nullptr == exports)) {
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Init", "env or exports is null");
        return nullptr;
    }

    PluginManager::GetInstance()->Export(env, exports);
    return exports;
}
EXTERN_C_END

static napi_module nativerenderModule = {
    .nm_version = 1,
    .nm_flags = 0,
    .nm_filename = nullptr,
    .nm_register_func = Init,
    .nm_modname = "nativerender",
    .nm_priv = ((void *)0),
    .reserved = { 0 }
};

extern "C" __attribute__((constructor)) void RegisterModule(void)
{
    napi_module_register(&nativerenderModule);
}

定义napi_module信息，里面包含模块名称(和arkts侧使用时的libraryname要保持一致)，加载模块时的回调函数即Init()。然后注册so模块napi_module_register(&nativerenderModule), 接口Init()函数会收到回调，在Init()有两个参数：

  • env: napi上下文环境；
  • exports: 用于挂载native函数将其导出，会通过js引擎绑定到js层的一个js对象；
3.解析XComponent组件的NativeXComponent实例
 if ((env == nullptr) || (exports == nullptr)) {
        DRAWING_LOGE("Export: env or exports is null");
        return;
    }

    napi_value exportInstance = nullptr;
     // 用来解析出被wrap了NativeXComponent指针的属性
    if (napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance) != napi_ok) {
        DRAWING_LOGE("Export: napi_get_named_property fail");
        return;
    }

    OH_NativeXComponent *nativeXComponent = nullptr;
    // 通过napi_unwrap接口，解析出NativeXComponent的实例指针
    if (napi_unwrap(env, exportInstance, reinterpret_cast<void **>(&nativeXComponent)) != napi_ok) {
        DRAWING_LOGE("Export: napi_unwrap fail");
        return;
    }

    char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {'\0'};
    uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    if (OH_NativeXComponent_GetXComponentId(nativeXComponent, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
        DRAWING_LOGE("Export: OH_NativeXComponent_GetXComponentId fail");
        return;
    }
4.注册XComponent事件回调
void MinuteView::RegisterCallback(OH_NativeXComponent *nativeXComponent) {
    DRAWING_LOGI("register callback");
    renderCallback_.OnSurfaceCreated = OnSurfaceCreatedCB;
    renderCallback_.OnSurfaceDestroyed = OnSurfaceDestroyedCB;
    renderCallback_.DispatchTouchEvent = nullptr;
    renderCallback_.OnSurfaceChanged = OnSurfaceChanged;
    // 注册XComponent事件回调
    OH_NativeXComponent_RegisterCallback(nativeXComponent, &renderCallback_);
}

在事件回调中可以获取组件的宽高信息：

tatic void OnSurfaceCreatedCB(OH_NativeXComponent *component, void *window) {
    DRAWING_LOGI("OnSurfaceCreatedCB");
    if ((component == nullptr) || (window == nullptr)) {
        DRAWING_LOGE("OnSurfaceCreatedCB: component or window is null");
        return;
    }
    char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {'\0'};
    uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
    if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
        DRAWING_LOGE("OnSurfaceCreatedCB: Unable to get XComponent id");
        return;
    }
    std::string id(idStr);
    auto render = MinuteView::GetInstance(id);
    OHNativeWindow *nativeWindow = static_cast<OHNativeWindow *>(window);
    render->SetNativeWindow(nativeWindow);

    uint64_t width;
    uint64_t height;
    int32_t xSize = OH_NativeXComponent_GetXComponentSize(component, window, &width, &height);
    if ((xSize == OH_NATIVEXCOMPONENT_RESULT_SUCCESS) && (render != nullptr)) {
        render->SetHeight(height);
        render->SetWidth(width);
    }
}
5.导出Native函数
void MinuteView::Export(napi_env env, napi_value exports) {
    if ((env == nullptr) || (exports == nullptr)) {
        DRAWING_LOGE("Export: env or exports is null");
        return;
    }
    napi_property_descriptor desc[] = {
        {"draw", nullptr, MinuteView::NapiDraw, nullptr, nullptr, nullptr, napi_default, nullptr}};
    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
    if (napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc) != napi_ok) {
        DRAWING_LOGE("Export: napi_define_properties failed");
    }
}
6.在NapiDraw中绘制分时图
  • 1.读取arkts侧透传过来的数据
vector<HuMarketMinuteData *> myVector;

    size_t argc = 3;
    napi_value args[3] = {nullptr};
    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

    napi_value vec = args[0];    // vector
    napi_value vecNum = args[1]; // length

    uint32_t vecCNum = 0;
    napi_get_value_uint32(env, vecNum, &vecCNum);

    for (uint32_t i = 0; i < vecCNum; i++) {
        napi_value vecData;
        napi_get_element(env, vec, i, &vecData);
        HuMarketMinuteData *minuteData = new HuMarketMinuteData(&env, vecData);

        myVector.push_back(minuteData);
    }

#include "HuMarketMinuteData.h"
#include "common/MinuteItem.h"
#include "napi/native_api.h"
HuMarketMinuteData::HuMarketMinuteData(napi_env *env, napi_value value) {
    napi_value api_date, api_isDateChanged, api_yclosePrice, api_minuteItems;
    napi_get_named_property(*env, value, "date", &api_date);
    napi_get_named_property(*env, value, "isDateChanged", &api_isDateChanged);
    napi_get_named_property(*env, value, "yClosePrice", &api_yclosePrice);
    napi_get_named_property(*env, value, "minuteList", &api_minuteItems);

    uint32_t *uint32_date;
    napi_get_value_uint32(*env, api_date, uint32_date);
    date = int(*uint32_date);

    napi_get_value_double(*env, api_yclosePrice, &yClosePrice);

    uint32_t length;
    napi_get_array_length(*env, api_minuteItems, &length);
    for (uint32_t i = 0; i < length; i++) {
        napi_value api_minuteItem;
        napi_get_element(*env, api_minuteItems, i, &api_minuteItem);
        MinuteItem *minuteItem = new MinuteItem(env, api_minuteItem);
        minuteList.push_back(minuteItem);
    }
}
HuMarketMinuteData::~HuMarketMinuteData() {
    for (MinuteItem *item : minuteList) {
        delete item;
        item = nullptr;
    }
}
  • 2.绘制分时图
void MinuteView::Drawing2(vector<HuMarketMinuteData *>& minuteDatas) {
    if (nativeWindow_ == nullptr) {
        DRAWING_LOGE("nativeWindow_ is nullptr");
        return;
    }

    int ret = OH_NativeWindow_NativeWindowRequestBuffer(nativeWindow_, &buffer_, &fenceFd_);
    DRAWING_LOGI("request buffer ret = %{public}d", ret);
    bufferHandle_ = OH_NativeWindow_GetBufferHandleFromNative(buffer_);
    mappedAddr_ = static_cast<uint32_t *>(
        mmap(bufferHandle_->virAddr, bufferHandle_->size, PROT_READ | PROT_WRITE, MAP_SHARED, bufferHandle_->fd, 0));
    if (mappedAddr_ == MAP_FAILED) {
        DRAWING_LOGE("mmap failed");
    }
    
    // 创建一个bitmap对象
    cBitmap_ = OH_Drawing_BitmapCreate();
    // 定义bitmap的像素格式
    OH_Drawing_BitmapFormat cFormat{COLOR_FORMAT_RGBA_8888, ALPHA_FORMAT_OPAQUE};
    // 构造对应格式的bitmap，width的值必须为 bufferHandle->stride / 4
    OH_Drawing_BitmapBuild(cBitmap_, width_, height_, &cFormat);

    // 创建一个canvas对象
    cCanvas_ = OH_Drawing_CanvasCreate();
    // 将画布与bitmap绑定，画布画的内容会输出到绑定的bitmap内存中
    OH_Drawing_CanvasBind(cCanvas_, cBitmap_);
    // 清除画布内容
    OH_Drawing_CanvasClear(cCanvas_, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF));
    
    float padding = 30, with = width_, height = height_ / 2;
    float ltX = padding, ltY = 1, rtX = with - padding,rtY = 1,lbX = padding,lbY = height - 1,rbX = with - padding,rbY = height - 1;
    
    // 创建一个path对象
    cPath_ = OH_Drawing_PathCreate();
    // 指定path的起始位置
    OH_Drawing_PathMoveTo(cPath_, ltX, ltY);
    // 用直线连接到目标点
    OH_Drawing_PathLineTo(cPath_, rtX, rtY);
    OH_Drawing_PathLineTo(cPath_, rbX, rbY);
    OH_Drawing_PathLineTo(cPath_, lbX, lbY);
    // 闭合形状，path绘制完毕
    OH_Drawing_PathClose(cPath_);

    OH_Drawing_PathMoveTo(cPath_, padding, height / 2);
    OH_Drawing_PathLineTo(cPath_, with - padding, height / 2);

    OH_Drawing_PathMoveTo(cPath_, with / 2, 1);
    OH_Drawing_PathLineTo(cPath_, with / 2, height - 1);

    // 创建一个画笔Pen对象，Pen对象用于形状的边框线绘制
    cPen_ = OH_Drawing_PenCreate();
    OH_Drawing_PenSetAntiAlias(cPen_, true);
    OH_Drawing_PenSetColor(cPen_, OH_Drawing_ColorSetArgb(0xFF, 0xE6, 0xE6, 0xE6));
    OH_Drawing_PenSetWidth(cPen_, 2.0);
    OH_Drawing_PenSetJoin(cPen_, LINE_ROUND_JOIN);
    // 将Pen画笔设置到canvas中
    OH_Drawing_CanvasAttachPen(cCanvas_, cPen_);

    OH_Drawing_CanvasDrawPath(cCanvas_, cPath_);


    double minPrice, maxPrice;
    computeMaxMin(minuteDatas, &minPrice, &maxPrice);
    OH_Drawing_Path *pricePath_ = OH_Drawing_PathCreate();
    OH_Drawing_Path *avgPath_ = OH_Drawing_PathCreate();
    // 指定path的起始位置
    HuMarketMinuteData *minuteData = minuteDatas[0];
    // 单位长度
    float unitHeight = height / (maxPrice - minPrice);
    float itemWidth = (with - 2 * padding) / (240 * minuteDatas.size());
    float pointX = padding;
    float pointY = 0;
    float avg_pointX = padding;
    float avg_pointY = 0;
    bool isFirst = true;
    float yClosePrice = 0;

    for (int i = 0; i < minuteDatas.size(); i++) {
        HuMarketMinuteData *minuteData = minuteDatas[i];
        if (i == 0) {
            yClosePrice = minuteData->yClosePrice;
        }
        if (minuteData != nullptr) {
            for (int j = 0; j < minuteData->minuteList.size(); j++) {
                MinuteItem *minuteItem = minuteData->minuteList[j];
                if (minuteItem != nullptr) {
                    pointY = (maxPrice - minuteItem->nowPrice) * unitHeight;
                    avg_pointY = (maxPrice - minuteItem->avgPrice) * unitHeight;
                    if (isFirst) {
                        isFirst = false;
                        OH_Drawing_PathMoveTo(pricePath_, pointX, pointY);
                        OH_Drawing_PathMoveTo(avgPath_, avg_pointX, avg_pointY);
                    } else {
                        OH_Drawing_PathLineTo(pricePath_, pointX, pointY);
                        OH_Drawing_PathLineTo(avgPath_, avg_pointX, avg_pointY);
                    }
                    pointX += itemWidth;
                    avg_pointX += itemWidth;
                }
            }
        }
    }

    // 创建一个画笔Pen对象，Pen对象用于形状的边框线绘制
    cPen_ = OH_Drawing_PenCreate();
    OH_Drawing_PenSetAntiAlias(cPen_, true);
    OH_Drawing_PenSetColor(cPen_, OH_Drawing_ColorSetArgb(0xFF, 0x22, 0x77, 0xcc));
    OH_Drawing_PenSetWidth(cPen_, 5.0);
    OH_Drawing_PenSetJoin(cPen_, LINE_ROUND_JOIN);
    // 将Pen画笔设置到canvas中
    OH_Drawing_CanvasAttachPen(cCanvas_, cPen_);
    // 在画布上画Price
    OH_Drawing_CanvasDrawPath(cCanvas_, pricePath_);
    OH_Drawing_PenSetColor(cPen_, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x9D, 0x03));
    OH_Drawing_CanvasAttachPen(cCanvas_, cPen_);
    OH_Drawing_CanvasDrawPath(cCanvas_, avgPath_);
    OH_Drawing_PathLineTo(pricePath_, pointX, height);
    OH_Drawing_PathLineTo(pricePath_, padding, height);
    OH_Drawing_PathClose(pricePath_);
    OH_Drawing_CanvasDrawShadow(cCanvas_, pricePath_, {5, 5, 5}, {15, 15, 15}, 30,
                                OH_Drawing_ColorSetArgb(0x00, 0xFF, 0xff, 0xff),
                                OH_Drawing_ColorSetArgb(0x33, 0x22, 0x77, 0xcc), SHADOW_FLAGS_TRANSPARENT_OCCLUDER);
    // 选择从左到右/左对齐等排版属性
    OH_Drawing_TypographyStyle *typoStyle = OH_Drawing_CreateTypographyStyle();
    OH_Drawing_SetTypographyTextDirection(typoStyle, TEXT_DIRECTION_LTR);
    OH_Drawing_SetTypographyTextAlign(typoStyle, TEXT_ALIGN_LEFT);
    // 设置文字颜色，例如黑色
    OH_Drawing_TextStyle *txtStyle = OH_Drawing_CreateTextStyle();
    OH_Drawing_SetTextStyleColor(txtStyle, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x9D, 0x03));
    // 设置文字大小、字重等属性
    double fontSize = width_ / 15;
    OH_Drawing_SetTextStyleFontSize(txtStyle, fontSize);
    OH_Drawing_SetTextStyleFontWeight(txtStyle, FONT_WEIGHT_400);
    OH_Drawing_SetTextStyleBaseLine(txtStyle, TEXT_BASELINE_ALPHABETIC);
    OH_Drawing_SetTextStyleFontHeight(txtStyle, 1);
    // 如果需要多次测量，建议fontCollection作为全局变量使用，可以显著减少内存占用

    OH_Drawing_FontCollection *fontCollection = OH_Drawing_CreateSharedFontCollection();
    // 注册自定义字体
    const char *fontFamily = "myFamilyName"; // myFamilyName为自定义字体的family name
    const char *fontPath = "/data/storage/el2/base/haps/entry/files/myFontFile.ttf"; // 设置自定义字体所在的沙箱路径
    OH_Drawing_RegisterFont(fontCollection, fontFamily, fontPath);
    // 设置系统字体类型
    const char *systemFontFamilies[] = {"Roboto"};
    OH_Drawing_SetTextStyleFontFamilies(txtStyle, 1, systemFontFamilies);
    OH_Drawing_SetTextStyleFontStyle(txtStyle, FONT_STYLE_NORMAL);
    OH_Drawing_SetTextStyleLocale(txtStyle, "en");
    // 设置自定义字体类型
    auto txtStyle2 = OH_Drawing_CreateTextStyle();
    OH_Drawing_SetTextStyleFontSize(txtStyle2, fontSize);
    const char *myFontFamilies[] = {"myFamilyName"}; // 如果已经注册自定义字体，填入自定义字体的family
                                                     // name使用自定义字体
    OH_Drawing_SetTextStyleFontFamilies(txtStyle2, 1, myFontFamilies);
    OH_Drawing_TypographyCreate *handler = OH_Drawing_CreateTypographyHandler(typoStyle, fontCollection);
    OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle);
    OH_Drawing_TypographyHandlerPushTextStyle(handler, txtStyle2);
    // 设置文字内容
    const char *text = doubleToStringWithPrecision(yClosePrice, 2).c_str();
    OH_Drawing_TypographyHandlerAddText(handler, text);
    OH_Drawing_TypographyHandlerPopTextStyle(handler);
    OH_Drawing_Typography *typography = OH_Drawing_CreateTypography(handler);
    // 设置页面最大宽度
    double maxWidth = width_;
    OH_Drawing_TypographyLayout(typography, maxWidth);
    // 设置文本在画布上绘制的起始位置
    double position[2] = {100, height / 2.0};
    // 将文本绘制到画布上
    OH_Drawing_TypographyPaint(typography, cCanvas_, position[0], position[1]);
    
    void *bitmapAddr = OH_Drawing_BitmapGetPixels(cBitmap_);
    uint32_t *value = static_cast<uint32_t *>(bitmapAddr);

    uint32_t *pixel = static_cast<uint32_t *>(mappedAddr_);
    if (pixel == nullptr) {
        DRAWING_LOGE("pixel is null");
        return;
    }
    if (value == nullptr) {
        DRAWING_LOGE("value is null");
        return;
    }
    for (uint32_t x = 0; x < width_; x++) {
        for (uint32_t y = 0; y < height_; y++) {
            *pixel++ = *value++;
        }
    }

    Region region{nullptr, 0};
    OH_NativeWindow_NativeWindowFlushBuffer(nativeWindow_, buffer_, fenceFd_, region);
    int result = munmap(mappedAddr_, bufferHandle_->size);
    if (result == -1) {
        DRAWING_LOGE("munmap failed!");
    }
}

绘制流程：

  • 向OHNativeWindow申请一块buffer, 并获取这块buffer的handle，然后映射内存；
  • 创建画布Canvas, 将bitmap和画布绑定；
  • 使用Canvas相关api绘制内容；
  • 将bitmap转换成像素数据，并通过之前映射的buffer句柄，将bitmap数据写到buffer中；
  • 将内容放回到Buffer队列，在下次Vsync信号就会将buffer中的内容绘制到屏幕上；
  • 取消映射内存；
7.ArkTS侧使用XComponent
  • 添加so依赖
  "devDependencies": {
   "@types/libnativerender.so": "file:./src/main/cpp/types/libnativerender"
 }
  • 定义native接口
export default interface XComponentContext {
 draw(minuteData: UPMarketMinuteData[], length: number): void;
};
  • 使用XComponent并获取XComponentContext, 通过它可以调用native层函数
      XComponent({
         id: 'xcomponentId',
         type: 'surface',
         libraryname: 'nativerender'
       })
         .onLoad((xComponentContext) => {
           if (xComponentContext) {
             this.xComponentContext = xComponentContext as XComponentContext;
           }
         })
         .width('100%')
         .height(600)
         .backgroundColor(Color.Gray)
  • 调用native函数绘制分时图
    this.monitor.subscribeRTMinuteData(this.TAG_REQUEST_MINUTE, param, (rsp) => {
     if (rsp.isSuccessful() && rsp.result != null && rsp.result.length > 0 && this.xComponentContext) {
       this.xComponentContext.draw(rsp.result!, rsp.result.length)
     }
   })

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2148557.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Nexpose 6.6.269 发布下载，新增功能概览

Nexpose 6.6.269 发布下载，新增功能概览

Nexpose 6.6.269 for Linux & Windows - 漏洞扫描 Rapid7 Vulnerability Management, release Sep 11, 2024 请访问原文链接&#xff1a;https://sysin.org/blog/nexpose-6/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.or…
阅读更多...
【Python爬虫系列】_024.MySQL数据库

【Python爬虫系列】_024.MySQL数据库

课 程 推 荐我 的 个 人 主 页：👉👉 失心疯的个人主页 👈👈入 门 教 程 推 荐 ：👉👉 Python零基础入门教程合集 👈👈虚 拟 环 境 搭 建 ：👉👉 Python项目虚拟环境(超详细讲解) 👈👈PyQt5 系 列 教 程：👉👉 Python GUI(PyQt5)教程合集 👈👈
阅读更多...
六、JSON

六、JSON

文章目录 1. 什么是JSON1.1 JSON 在 JavaScript 中的使用1.1.1 json 的定义1.1.2 json 的访问1.1.3 json 的两个常用方法 1.2、JSON 在 java 中的使用1.2.1、javaBean 和 json 的互转1.2.2、List 和 json 的互转1.2.3、map 和 json 的互转 1. 什么是JSON 1.1 JSON 在 JavaScrip…
阅读更多...
8.1差分边缘检测

8.1差分边缘检测

基本概念 差分边缘检测是一种图像处理技术&#xff0c;用于检测图像中的边缘。边缘是指图像中灰度值发生显著变化的区域。差分边缘检测通常通过计算图像的梯度来实现&#xff0c;梯度反映了灰度值的变化率。在OpenCV中&#xff0c;可以使用不同的算子来检测不同方向的边缘&…
阅读更多...
PDP 和 ICE 图的终极指南

PDP 和 ICE 图的终极指南

部分依赖图和单独条件期望图背后的直觉、数学和代码（R 和 Python） PDP 和 ICE 图都可以帮助我们了解我们的模型如何做出预测。 使用个人显示面板我们可以将模型特征和目标变量之间的关系可视化。它们可以告诉我们某种关系是线性的、非线性的还是没有关系。 同样，当特征之间…
阅读更多...
006.MySQL_查询数据

006.MySQL_查询数据

课 程 推 荐我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448;入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448;虚 拟 环 境 搭 建 &#xff1a;&#x1…
阅读更多...
FPGA随记-二进制转格雷码

FPGA随记-二进制转格雷码

反射二进制码&#xff08;RBC&#xff09;&#xff0c;也称为反射二进制&#xff08;RB&#xff09;或格雷码&#xff08;Gray code&#xff09;&#xff0c;得名于Frank Gray&#xff0c;是二进制数制的一种排列方式&#xff0c;使得连续两个值之间仅有一个比特&#xff08;二…
阅读更多...
EmguCV学习笔记 VB.Net 12.1 二维码解析

EmguCV学习笔记 VB.Net 12.1 二维码解析

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…
阅读更多...
算法.图论-建图/拓扑排序及其拓展

算法.图论-建图/拓扑排序及其拓展

文章目录 建图的三种方式邻接矩阵邻接表链式前向星 拓扑排序拓扑排序基础原理介绍拓扑排序步骤解析拓扑排序模板leetcode-课程表 拓扑排序拓展食物链计数喧闹与富有并行课程 建图的三种方式 我们建图的三种方式分别是邻接矩阵, 邻接矩阵, 链式前向星 邻接矩阵 假设我们的点的…
阅读更多...
自定义复杂AntV/G6案例

自定义复杂AntV/G6案例

一、效果图 二、源码 /** * * Author: me * CreatDate: 2024-08-22 * * Description: 复杂G6案例 * */ <template><div class"moreG6-wapper"><div id"graphContainer" ref"graphRef" class"graph-content"></d…
阅读更多...
计算机毕业设计污染物文献共享数据库管理系统网站开发与实现

计算机毕业设计污染物文献共享数据库管理系统网站开发与实现

计算机毕业设计&#xff1a;污染物文献共享数据库管理系统网站开发与实现 1. 项目背景 随着环境问题日益严峻&#xff0c;对污染物的研究变得尤为重要。然而&#xff0c;在学术界和工业界之间存在着信息孤岛现象&#xff0c;即大量的研究成果被分散在不同的数据…
阅读更多...
[Redis][String][上]详细讲解

[Redis][String][上]详细讲解

目录 0.前言1.常见命令1.SET2.GET3.MSET && MGET4.SETNX && SETXX 2.计数命令1.INCR2.INCRBY3.DECR4.DECYBY5.INCRBYFLOAT6.注意 0.前言 字符串类型是Redis最基础的数据类型&#xff0c;关于字符串需要特别注意&#xff1a; Redis中所有的键的类型都是字符串类…
阅读更多...
【Elasticsearch系列十四】Elasticsearch

【Elasticsearch系列十四】Elasticsearch

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
大数据概念与价值

大数据概念与价值

文章目录 引言大数据的概念高德纳咨询公司的定义麦肯锡全球研究所的定义什么是大数据&#xff1f; 大数据的特征Volume&#xff08;体积&#xff09;Variety&#xff08;种类&#xff09;Velocity&#xff08;速度&#xff09;Value&#xff08;价值&#xff09;Veracity&#…
阅读更多...
Apache Hudi现代数据湖核心技术概论

Apache Hudi现代数据湖核心技术概论

1. 什么是 Apache Hudi 1.1 简介 Apache Hudi (Hadoop Upserts Deletes and Incrementals) 是一个开源的数据湖框架&#xff0c;旨在提供高效的数据管理和数据更新功能。它允许在大数据平台上执行诸如数据插入、更新和删除操作&#xff0c;同时支持增量式数据处理。Hudi 最初…
阅读更多...
React18入门教程

React18入门教程

React介绍 React由Meta公司开发&#xff0c;是一个用于 构建Web和原生交互界面的库 React的优势 相较于传统基于DOM开发的优势 组件化的开发方式 不错的性能 相较于其它前端框架的优势 丰富的生态 跨平台支持 React的市场情况 全球最流行&#xff0c;大厂必备 开发环境…
阅读更多...
EmguCV学习笔记 C# 12.2 WeChatQRCode

EmguCV学习笔记 C# 12.2 WeChatQRCode

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…
阅读更多...
Vue.js的前端框架有哪些？

Vue.js的前端框架有哪些？

Vue.js 是一款流行的前端 JavaScript 框架&#xff0c;用于构建单页面应用&#xff08;SPA&#xff09;。除了 Vue.js 本身&#xff0c;还有许多基于 Vue.js 的前端框架和 UI 库&#xff0c;它们提供了更多的功能和组件&#xff0c;以便开发者能够快速构建应用程序。以下是一些…
阅读更多...
【图像压缩与重构】基于BP神经网络

【图像压缩与重构】基于BP神经网络

课题名称&#xff1a;基于BP神经网络的图像压缩与重构&#xff08;带GUI) 相关资料&#xff1a; 1. 代码注释 2.BP神经网络原理文档资料 3.图像压缩原理文档资料 程序实例截图&#xff1a;
阅读更多...
eclipse git 不小心点了igore，文件如何加到git中去。

eclipse git 不小心点了igore，文件如何加到git中去。

1、创建了文件&#xff0c;或者利用三方工具&#xff0c;或者用mybatis plus生成了文件以后&#xff0c;我们需要右键文件&#xff0c;然后加入到git中。 右键有问号的java文件 -- Team -- Add to Index &#xff0c;然后变成个号就可以了。 2、不小心&#xff0c;点了一下Ign…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023