1 Star 1 Fork 0

ScenarioSamples/ScaleImage

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
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开发者,您好!
为了协助您高效开发,提高鸿蒙场景化示例的质量,希望您在浏览或使用后抽空填写一份简单的问卷,我们将会收集您的宝贵意见进行优化

点击此处填写问卷

空文件

简介

【鸿蒙 Harmony Next 示例 代码】实现相机图片放大功能 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/scenario-samples/scale-image.git
git@gitee.com:scenario-samples/scale-image.git
scenario-samples
scale-image
ScaleImage
master

搜索帮助