频繁使用CanvasRenderingContext2D或OffscreenCanvasRenderingContext2D中的drawImage方法,会出现卡顿掉帧

频繁使用CanvasRenderingContext2D或OffscreenCanvasRenderingContext2D中的drawImage方法,会出现卡顿掉帧

HarmonyOS
2024-06-06 23:18:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
rhyine

使用指定版本未复现该问题,请检查是否代码问题或者提供复现demo

示例代码

import image from '@ohos.multimedia.image' 
import display from '@ohos.display' 
 
 
@Entry 
@Component 
struct Index { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  private settings2: RenderingContextSettings = new RenderingContextSettings(true) 
  private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings2) 
  @State imageScale: number = 1 
 
  typedArrayToBuffer(array: Uint8Array): ArrayBuffer { 
    return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset) 
  } 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Text("放大镜区域") 
      Canvas(this.context2).width(100).height(100).backgroundColor(Color.Black) 
      Text("显示区域") 
      Canvas(this.context) 
        .width('100%') 
        .aspectRatio(1) 
        .backgroundColor('#ffff00') 
        .onTouch((e: TouchEvent) => { 
          let pixelMap = this.context.getPixelMap(e.touches[0].x - 10, e.touches[0].y - 10, 20, 20) 
          if (pixelMap) { 
            this.context2.drawImage(pixelMap, 0, 0, 100, 100) 
          } 
        }) 
        .onReady(() => { 
            .onReady(() => { 
              getContext(this).resourceManager.getMediaContent($r("app.media.icon")).then((data) => { 
                let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset) 
                let imageSource: image.ImageSource = image.createImageSource(arrayBuffer); 
                imageSource.getImageInfo((err, value) => { 
                  if (err) { 
                    // onErrorFunction(err); 
                    return; 
                  } 
                  let opts: image.DecodingOptions = { 
                    editable: true, 
                    desiredSize: { 
                      height: value.size.height, 
                      width: value.size.width 
                    } 
                  }; 
                  imageSource.createPixelMap(opts, (err, pixelMap) => { 
                    if (err) { 
                      // onErrorFunction(err); 
                    } else { 
                      this.imageScale = display.getDefaultDisplaySync().width / value.size.width 
                      this.context.transform(this.imageScale, 0, 0, this.imageScale, 0, 0) 
                      this.context.drawImage(pixelMap, 0, 0) 
                    } 
                  }) 
                }) 
              }) 
            }) 
        } 
          .width('100%') 
          .height('100%') 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-06-07 21:34:37
相关问题
使用Drawing进行2d图像绘制
446浏览 • 1回复 待解决
XComponent、NativeDrawing实现2D图形绘制
455浏览 • 1回复 待解决
怎么让项目全局使用d.ts
2000浏览 • 1回复 待解决
响应时延/性能问题分析
209浏览 • 1回复 待解决
更新完鸿蒙之后玩王者荣耀
7153浏览 • 1回复 待解决
XComponent、openGL实现3D图形绘制
507浏览 • 1回复 待解决