#鸿蒙通关秘籍#如何使用Surface进行同层渲染绘制？

当要在鸿蒙系统中使用Surface进行同层渲染时，需要将UIComponent和视频画面绘制到ArkWeb内核提供的Surface。以下是实现的步骤：

1. 保存UIContext：

typescript // xxxAbility.ets

import { UIAbility } from '@kit.AbilityKit'; import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility { onWindowStageCreate(windowStage: window.WindowStage): void { windowStage.loadContent('pages/Index', (err, data) => { if (err.code) { return; } // 保存 UIContext， 在后续的同层渲染绘制中会用到。 AppStorage.setOrCreate<UIContext>("UIContext", windowStage.getMainWindowSync().getUIContext()); }); } }

2. 使用提供的Surface进行同层渲染：

typescript // 使用 Surface 和 NodeController class MyNodeController extends NodeController { private rootNode: BuilderNode<[Params]> | undefined;

constructor(surfaceId: string, renderType: NodeRenderType) { super(); let uiContext = AppStorage.get<UIContext>("UIContext"); this.rootNode = new BuilderNode(uiContext as UIContext, { surfaceId: surfaceId, type: renderType }); }

makeNode(uiContext: UIContext): FrameNode | null { if (this.rootNode) { return this.rootNode.getFrameNode() as FrameNode; } return null; }

build() { // 构造本地播放器组件 } }

通过以上步骤，可以在鸿蒙系统中实现同层渲染和媒体播放的接管。