对于基于[XComponent]进行Native开发的业务，可以请求独立的绘制帧率进行内容开发，如游戏、自绘制UI框架对接等场景。

接口说明

开发步骤

说明

本范例是通过Drawing在Native侧实现图形的绘制，并将其呈现在NativeWindow上

1. 定义ArkTS接口文件XComponentContext.ts，用来对接Native层。

export default interface XComponentContext {
register(): void;
unregister(): void;
};

1. 定义演示页面，包含两个XComponent组件。

import XComponentContext from "../interface/XComponentContext";

@Entry
@Component
struct Index {
  private xComponentContext1: XComponentContext | undefined = undefined;
  private xComponentContext2: XComponentContext | undefined = undefined;
  
 build() {
   Column() {
     Row() {
       XComponent({ id: 'xcomponentId_30', type: 'surface', libraryname: 'entry' })
         .onLoad((xComponentContext) => {
           this.xComponentContext1 = xComponentContext as XComponentContext;
         }).width('832px')
     }.height('40%')

     Row() {
       XComponent({ id: 'xcomponentId_120', type: 'surface', libraryname: 'entry' })
         .onLoad((xComponentContext) => {
           this.xComponentContext2 = xComponentContext as XComponentContext;
         }).width('832px') // Multiples of 64
     }.height('40%')
   }
 }
}

1. Native层配置帧率和注册回调函数。

static void TestCallback(OH_NativeXComponent *component, uint64_t timestamp, uint64_t targetTimestamp) // 定义每帧的回调函数
{
    // ...
    // 获取XComponent的surface大小
    int32_t xSize = OH_NativeXComponent_GetXComponentSize(component, nativeWindow, &width, &height);
    if ((xSize == OH_NATIVEXCOMPONENT_RESULT_SUCCESS) && (render != nullptr)) {
        render->Prepare();
        render->Create();
        if (id == "xcomponentId_30") {
            // 30Hz绘制时,每帧移动的距离为16像素
            render->ConstructPath(16, 16, render->defaultOffsetY);
        }
        if (id == "xcomponentId_120") {
            // 120Hz绘制时，每帧移动的距离为4像素
            render->ConstructPath(4, 4, render->defaultOffsetY);
        }
       // ...
    }
}

说明

• Callback回调函数运行于UI主线程，故涉及UI线程的耗时操作不应运行于回调函数中，以免影响性能。
• 实例在调用NapiRegister后，在不需要进行帧率控制时，应进行NapiUnregister操作，避免内存泄漏问题。

void SampleXComponent::RegisterOnFrameCallback(OH_NativeXComponent *nativeXComponent) 
{
    OH_NativeXComponent_RegisterOnFrameCallback(nativeXComponent, TestCallback); // 注册回调函数，并使能每帧回调
}

napi_value SampleXComponent::NapiRegister(napi_env env, napi_callback_info info)
{
    // ...
    render->RegisterOnFrameCallback(nativeXComponent); // 在TS层使能注册与使能每帧回调
    // ...
}

napi_value SampleXComponent::NapiUnregister(napi_env env, napi_callback_info info)
{
    // ...
    OH_NativeXComponent_UnregisterOnFrameCallback(nativeXComponent); // 在TS层取消注册每帧回调
    // ...
}

1. TS层注册和取消注册每帧回调。

Row() {
    Button('Start')
      .id('Start')
      .fontSize(14)
      .fontWeight(500)
      .margin({ bottom: 20, right: 6, left: 6 })
      .onClick(() => {
        if (this.xComponentContext1) {
          this.xComponentContext1.register();
        }
        if (this.xComponentContext2) {
          this.xComponentContext2.register();
        }
      })
      .width('30%')
      .height(40)
      .shadow(ShadowStyle.OUTER_DEFAULT_LG)
    
    Button('Stop')
      .id('Stop')
      .fontSize(14)
      .fontWeight(500)
      .margin({ bottom: 20, left: 6 })
      .onClick(() => {
        if (this.xComponentContext1) {
          this.xComponentContext1.unregister();
        }
        if (this.xComponentContext2) {
          this.xComponentContext2.unregister();
        }
      })
      .width('30%')
      .height(40)
      .shadow(ShadowStyle.OUTER_DEFAULT_LG)
}

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
• 《鸿蒙生态应用开发V2.0白皮书》
• 《鸿蒙 (OpenHarmony)开发基础到实战手册》
• OpenHarmony北向、南向开发环境搭建
• 《鸿蒙开发基础》
• 《鸿蒙开发进阶》
• 《鸿蒙开发实战》

更多鸿蒙开发应用知识已更新qr23.cn/FBD4cY参考前往。-

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿