1 Star 1 Fork 0

ScenarioSamples/ScaleImage

Create your Gitee Account
Explore and code with more than 13.5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README

水印相机图片放大

介绍

本示例构建了一个图片放大案例,主要实现两个功能。

  • 点击放大镜,实现图片放大功能
  • 点击重置图片,将放大后的图片回归原位

效果预览

图片名称

使用说明

  • 打开应用,展示图片、两个按钮。
  • 点击放大镜按钮后,激活放大能力,再次点击图片即可实现图片放大功能。
  • 鼠标按住以及鼠标滚轮操作都可以移动图片的位置,以此来观察图片放大后的局部地方。
  • 点击重置图片按钮,即可将放大的图片恢复为原大小并将图片位置也恢复到原来。

实现思路

  1. 构造readImage()函数,读取图片转化为pixelMap格式。调用getRawFileContentSync函数获取imgUri。
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. 构造resetImg()函数,重置图片状态。
resetImg(): void {
  this.imgScale = 1;
  this.isScaling = true;
  this.imgOffSetX = 0;
  this.imgOffSetY = 0;
}
  1. 构造TapGesture()函数,实现图片根据手势位置计算放大的功能。
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. 构造PanGesture()函数,实现图片移动的功能。
PanGesture()
  .onActionStart(() => {
    this.preOffsetX = this.imgOffSetX;
    this.preOffsetY = this.imgOffSetY;
  })
  1. 设置两个按钮,点击放大镜按钮可以获得放大能力,再次点击图片就可以实现放大功能;点击重置图片按钮,将放大后的图片重置为原大小
Button('放大镜')
  .onClick(() => {
    this.isScaling = true;
  })
Button('重置图片')
  .onClick(()=>{
    this.resetImg();
  })

一份简单的问卷反馈

亲爱的Harmony Next开发者,您好!
为了协助您高效开发,提高鸿蒙场景化示例的质量,希望您在浏览或使用后抽空填写一份简单的问卷,我们将会收集您的宝贵意见进行优化

点击此处填写问卷

Empty file

About

【鸿蒙 Harmony Next 示例 代码】实现相机图片放大功能 expand collapse
Cancel

Releases

No release

Contributors

All

Language(Optional)

Activities

can not load any more
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/scenario-samples/scale-image.git
git@gitee.com:scenario-samples/scale-image.git
scenario-samples
scale-image
ScaleImage
master

Search