图片放大 HarmonyOS 鸿蒙场景化代码 Next

发布于 1周前 作者 sinazl 来自 鸿蒙OS

图片放大 HarmonyOS 鸿蒙场景化代码 Next
<markdown _ngcontent-ixg-c147="" class="markdownPreContainer">

介绍

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

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

图片放大案例源码链接

效果图

图片名称

使用说明

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

实现思路

  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();
  })

工程目录

深色代码主题
复制
entry/src/main/ets/
|---constants
|   |---Constants.ets               // 常量
|---entryability
|   |---EntryAbility.ets
|---entrybackupability
|   |---EntryBackupAbility.ets
|---pages
|   |---ScaleImage.ets              // 图片放大页面
</markdown>

更多关于图片放大 HarmonyOS 鸿蒙场景化代码 Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于图片放大 HarmonyOS 鸿蒙场景化代码 Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，针对图片放大的场景化代码实现，通常可以通过动画框架或者布局调整来实现。以下是一个简化的示例，展示如何通过调整布局参数来放大图片：

// 注意：这里使用的是鸿蒙特定的API，非Java或C语言示例

// 假设你有一个Image组件
Image image = (Image) findComponentById(ResourceTable.Id_image);

// 获取图片的原始宽高
int originalWidth = image.getWidth();
int originalHeight = image.getHeight();

// 放大比例，例如放大1.5倍
float scaleFactor = 1.5f;

// 设置新的宽高
int newWidth = (int) (originalWidth * scaleFactor);
int newHeight = (int) (originalHeight * scaleFactor);

// 创建新的布局参数并应用
LayoutConfig layoutConfig = new LayoutConfig(
    LayoutConfig.MATCH_PARENT,
    LayoutConfig.MATCH_PARENT,
    (int) (LayoutConfig.LAYOUT_MARGIN_LEFT + (originalWidth - newWidth) / 2),
    (int) (LayoutConfig.LAYOUT_MARGIN_TOP + (originalHeight - newHeight) / 2),
    newWidth,
    newHeight
);
image.setLayoutConfig(layoutConfig);

// 如果需要动画效果，可以使用Animator组件
// Animator animator = new Animator(image);
// animator.scaleTo(scaleFactor, scaleFactor, 300); // 300ms内完成放大
// animator.start();

上述代码通过调整Image组件的布局参数实现了图片的放大。如果需要动画效果，可以使用Animator组件进行平滑过渡。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部