Flutter OHOS 外接纹理适配简介-图片显示

Flutter 在 OHOS 平台使用外接纹理，图片场景，以 PixelMap 的形式注册到 flutter engine，与视频播放和相机预览有所区别。

注：1. 一般而言，为了方便复用，会将 ohos 对接 flutter 外接纹理的功能代码作为一个 module 模块组件单独写一个插件注册到 Flutter engine。

2. 外接纹理背景色为白色，暂不支持修改

图片显示

使用说明

图片外接纹理，不需要使用 surfaceId, 而是以 PixelMap 的形式注册到 flutter engine。

1. 同样实现插件，在 onAttachedToEngine 中，从入参 FlutterPluginBinding 中获取 TextureRegistry。

export class PicturePlugin implements FlutterPlugin, MethodCallHandler {
  private binding: FlutterPluginBinding | null = null;
  private mMethodChannel: MethodChannel | null = null;
  private textureRegistry: TextureRegistry | null = null;
  private pixelMapCache: HashMap<number, image.PixelMap= new HashMap<number, image.PixelMap>();

  getUniqueClassName(): string {
return TAG;
  }

  onAttachedToEngine(binding: FlutterPluginBinding): void {
Log.e(TAG, "PicturePlugin onAttachedToEngine");
this.binding = binding;binding.getApplicationContext().resourceManager
this.mMethodChannel = new MethodChannel(binding.getBinaryMessenger(), "PictureChannel");
this.mMethodChannel.setMethodCallHandler(this);
this.textureRegistry = binding.getTextureRegistry();

  }

2. 在 onMethodCall 中实现注册纹理的响应方法

  onMethodCall(call: MethodCall, result: MethodResult): void {
let method: string = call.method;
Log.e(TAG, "Received '" + method + "' message.");
switch (method) {
  case "registerTexture":
this.registerPicturePixMap(call.argument("pic")).then((textureId: number) ={
  result.success(textureId);
}).catch((err: Error) ={
  Log.e(TAG, "method tag1, error: " + JSON.stringify(err));
})
break;
  case "unregisterTexture":
this.unregisterPicturePixelMap(call.argument("textureId"));
result.success(null);
break;
}
  }

3. 注册纹理实现方法中，把图片数据读进来，创建 ImageSource，再创建 PixelMap 对象，使用 registerPixelMap 接口注册纹理到 flutter engine，得到 textureId 返回给 dart 层。

  async registerPicturePixMap(pictureName: string) {
let fileData = await this.binding!.getApplicationContext().resourceManager
.getRawFileContent(`flutter_assets/${pictureName}`);
let buffer : ArrayBuffer = fileData?.buffer as ArrayBuffer ?? new ArrayBuffer(0);
let imageSource : image.ImageSource = image.createImageSource(buffer);
let imageInfo = await imageSource.getImageInfo();
Log.d(TAG, "ImageHeight " + imageInfo.size.height);
let pixelMap = await imageSource.createPixelMap();
Log.d(TAG, "getPixelBytesNumber " + pixelMap.getPixelBytesNumber());

let textureId = this.textureRegistry!.registerPixelMap(pixelMap);
Log.d(TAG, "register textureId= " + textureId);

this.pixelMapCache.set(textureId, pixelMap);
return textureId;
  }

4. dart 层得到该值，可以在 texture Widget 中使用该外接纹理完成渲染。

  Widget getTextureBody(BuildContext context, PicBean picBean) {
return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
SizedBox(
  width: 300,
  height: 300,
  child: Texture(textureId: picBean.id),
),
Container(
  height: 10,
),
  ],
);
  }