实现图片放大功能鸿蒙示例代码

async readImage(imgUri: string, context: Context, decodingOptions?: image.DecodingOptions): Promise<PixelMap | null> {
  const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
  const fileData = resourceMgr.getRawFileContentSync(imgUri)
  const buffer = fileData.buffer.slice(0)
  const imageSourceApi: image.ImageSource = image.createImageSource(buffer)
  let pixmap: image.PixelMap;
  if (decodingOptions) {
    pixmap = await imageSourceApi.createPixelMap(decodingOptions);
  } else {
    pixmap = await imageSourceApi.createPixelMap();
  }
  return pixmap;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

resetImg(): void {
  this.imgScale = 1;
  this.isScaling = true;
  this.imgOffSetX = 0;
  this.imgOffSetY = 0;
}
1.
2.
3.
4.
5.
6.

TapGesture()
  .onAction((event: GestureEvent) => {
    if (event && this.isScaling == true) {
      this.imgScale = this.imgScale * Constants.IMAGE_SCALE_3;
      this.imgOffSetX = Constants.IMAGE_WIDTH / 2 - event.fingerList[0].globalX;
      this.imgOffSetY = Constants.IMAGE_HEIGHT / 2 - event.fingerList[0].globalY;
      this.isScaling = false;
    }
  })
1.
2.
3.
4.
5.
6.
7.
8.
9.

PanGesture()
  .onActionStart(() => {
    this.preOffsetX = this.imgOffSetX;
    this.preOffsetY = this.imgOffSetY;
  })
1.
2.
3.
4.
5.

Button('放大镜')
  .onClick(() => {
    this.isScaling = true;
  })
Button('重置图片')
  .onClick(()=>{
    this.resetImg();
  })





1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.