HarmonyOS鸿蒙Next中Native创建Bitmap并绘制一些图形，如何返回给ArkTs，上层做渲染

HarmonyOS鸿蒙Next中Native创建Bitmap并绘制一些图形，如何返回给ArkTs，上层做渲染 我想使用native生成一个Bitmap或者PixelMap然后传给ArkTS进行显示，应该如何去操作呢，如下我使用官方的API先生成一个Bitmap，然后在bitmap上绘制一个五角星，但是最后return的时候不知道该给ts如何返回数据，TS又该如何接收数据？

export const renderPage: () => ArrayBuffer;

static napi_value renderPage(napi_env env, napi_callback_info info) {
    // 创建一个bitmap对象
    OH_Drawing_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, 500, 500, &cFormat);

    // 创建一个canvas对象
    OH_Drawing_Canvas *cCanvas = OH_Drawing_CanvasCreate();
    // 将画布与bitmap绑定，画布画的内容会输出到绑定的bitmap内存中
    OH_Drawing_CanvasBind(cCanvas, cBitmap);
    // 使用白色清除画布内容
    OH_Drawing_CanvasClear(cCanvas, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0xFF, 0xFF));

    int len = 500 / 4;
    float aX = 500 / 2;
    float aY = 500 / 4;
    float dX = aX - len * std::sin(18.0f);
    float dY = aY + len * std::cos(18.0f);
    float cX = aX + len * std::sin(18.0f);
    float cY = dY;
    float bX = aX + (len / 2.0);
    float bY = aY + std::sqrt((cX - dX) * (cX - dX) + (len / 2.0) * (len / 2.0));
    float eX = aX - (len / 2.0);
    float eY = bY;

    // 创建一个path对象，然后使用接口连接成一个五角星形状
    OH_Drawing_Path *cPath = OH_Drawing_PathCreate();
    // 指定path的起始位置
    OH_Drawing_PathMoveTo(cPath, aX, aY);
    // 用直线连接到目标点
    OH_Drawing_PathLineTo(cPath, bX, bY);
    OH_Drawing_PathLineTo(cPath, cX, cY);
    OH_Drawing_PathLineTo(cPath, dX, dY);
    OH_Drawing_PathLineTo(cPath, eX, eY);
    // 闭合形状，path绘制完毕
    OH_Drawing_PathClose(cPath);

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

    // 创建一个画刷Brush对象，Brush对象用于形状的填充
    OH_Drawing_Brush *cBrush = OH_Drawing_BrushCreate();
    OH_Drawing_BrushSetColor(cBrush, OH_Drawing_ColorSetArgb(0xFF, 0x00, 0xFF, 0x00));

    // 将Brush画刷设置到canvas中
    OH_Drawing_CanvasAttachBrush(cCanvas, cBrush);
    // 在画布上画path的形状，五角星的边框样式为pen设置，颜色填充为Brush设置
    OH_Drawing_CanvasDrawPath(cCanvas, cPath);
    return mBitmap;
}

更多关于HarmonyOS鸿蒙Next中Native创建Bitmap并绘制一些图形，如何返回给ArkTs，上层做渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

您好，请您通过在线提单进一步解决：https://developer.huawei.com/consumer/cn/support/feedback/#/

感谢您的反馈与支持。

更多关于HarmonyOS鸿蒙Next中Native创建Bitmap并绘制一些图形，如何返回给ArkTs，上层做渲染的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


提单了，华为工程师看不懂我的问题，答非所问，

我也在关注该问题，没有找到方案

这个问题目前有没有解决方案?

void *pixels = OH_Drawing_BitmapGetPixels(cBitmap);
napi_value result;
napi_create_arraybuffer(env, 500 * 500 * 4, &pixels, &result);
return result;

后面改成这样也不行，拿不到图片

let arrayBuffer: ArrayBuffer = document.renderPage();
const imageSource = image.createImageSource(arrayBuffer)
imageSource.createPixelMap().then(pixelMap=>{
    this.pxImage=pixelMap;
    this.ondraw();
})

OH吗？OH要去看一下其他模块的注册机制，利用JSI把它返回去

在HarmonyOS鸿蒙Next中，Native层创建Bitmap并绘制图形后，可以通过NativeAPI将其返回给ArkTS层进行渲染。具体步骤如下：

  1. Native层创建Bitmap：使用OH_NativeBuffer或OH_NativeImage等API在Native层创建Bitmap对象，并进行图形绘制。

  2. 将Bitmap传递给ArkTS层：通过NativeAPI将Bitmap对象转换为PixelMap或Image对象，并返回给ArkTS层。可以使用OH_NativeBuffer_GetNativeBuffer或OH_NativeImage_GetNativeImage等函数获取Native层的Bitmap数据，然后通过PixelMap或Image的构造函数将其封装为ArkTS可识别的对象。

  3. ArkTS层渲染：在ArkTS层接收到PixelMap或Image对象后，可以直接使用Image组件进行渲染。例如，将Image对象赋值给Image组件的src属性，ArkTS会自动处理渲染逻辑。

示例代码片段：

// Native层
OH_NativeBuffer* nativeBuffer = OH_NativeBuffer_Create(width, height, format);
// 绘制图形到nativeBuffer
OH_NativeBuffer* pixelMap = OH_NativeBuffer_GetNativeBuffer(nativeBuffer);

// ArkTS层
let image = new Image();
image.src = pixelMap; // pixelMap为Native层返回的PixelMap对象

在HarmonyOS鸿蒙Next中，Native层创建Bitmap并绘制图形后，可以通过OH_NativeBuffer和OH_NativeImage接口将Bitmap数据传递给ArkTS层。具体步骤如下：

  1. 创建Bitmap：在Native层使用OH_NativeBuffer_Create创建Buffer，并通过OH_NativeImage_Create创建Image对象。
  2. 绘制图形：使用OpenGL或Vulkan等图形API在Image上绘制图形。
  3. 传递数据：将Image对象通过OH_NativeImage_GetNativeBuffer获取Buffer，并通过OH_NativeBuffer_Map映射到内存，将数据传递给ArkTS层。
  4. 渲染：在ArkTS层使用Image组件接收并渲染Bitmap数据。

通过这种方式，可以实现Native层与ArkTS层的高效数据交互和渲染。

回到顶部