鸿蒙开发中，图片旋转、缩放、透明度等处理

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、图片基础操作

1. 设置图片透明度

场景：实现图片淡入淡出效果

API：opacity 属性（取值范围：0~1）

@Entry
@Component
struct OpacityExample {
  @State opacityValue: number = 1.0;

  build() {
    Column() {
      Image($r('app.media.img'))
        .width(200)
        .height(200)
        .opacity(this.opacityValue) // 设置透明度

      Slider({
        value: this.opacityValue,
        min: 0,
        max: 1,
        step: 0.1
      }).onChange((value: number) => {
        this.opacityValue = value; // 动态调整透明度
      })
    }
  }
}

2. 图片缩放

场景：实现图片放大/缩小

API：scale 属性

@Entry
@Component
struct ScaleExample {
  @State scaleValue: number = 1.0;

  build() {
    Column() {
      Image($r('app.media.img'))
        .width(200)
        .height(200)
        .scale({ x: this.scaleValue, y: this.scaleValue }) // 等比例缩放

      Slider({
        value: this.scaleValue,
        min: 0.5,
        max: 2,
        step: 0.1
      }).onChange((value: number) => {
        this.scaleValue = value;
      })
    }
  }
}

3. 图片旋转

场景：实现图片旋转动画

API：rotate 属性（单位：度）

@Entry
@Component
struct RotateExample {
  @State angle: number = 0;

  build() {
    Column() {
      Image($r('app.media.img'))
        .width(200)
        .height(200)
        .rotate({ angle: this.angle }) // 设置旋转角度

      Button('Rotate 90°')
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.angle += 90; // 带动画旋转
          })
        })
    }
  }
}

二、高级图片处理

1. 组合变换（旋转+缩放+平移）

场景：实现复杂图片变换

API：transform 矩阵

@Entry
@Component
struct TransformExample {
  @State matrix: Matrix4T = new Matrix4.identity();

  build() {
    Column() {
      Image($r('app.media.img'))
        .width(200)
        .height(200)
        .transform(this.matrix) // 应用变换矩阵

      Button('Apply Transform')
        .onClick(() => {
          // 创建变换矩阵：旋转30度 + 缩放1.5倍 + 平移(50,0)
          this.matrix = new Matrix4.identity()
            .rotate(30 * Math.PI / 180) // 弧度制
            .scale(1.5, 1.5, 1)
            .translate(50, 0, 0);
        })
    }
  }
}

2. 图片裁剪

场景：实现圆形头像

API：clip + borderRadius

Image($r('app.media.avatar'))
  .width(100)
  .height(100)
  .borderRadius(50) // 圆形裁剪
  .clip(true) // 启用裁剪

3. 动态修改图片源

场景：实现图片切换

API：动态绑定src

@Entry
@Component
struct ChangeImageExample {
  @State currentImage: Resource = $r('app.media.img1');

  build() {
    Column() {
      Image(this.currentImage)
        .width(200)
        .height(200)

      Button('Switch Image')
        .onClick(() => {
          this.currentImage = $r('app.media.img2');
        })
    }
  }
}

三、获取图片信息

1. 获取图片尺寸

场景：动态适配图片宽高

API：onComplete 回调

@Entry
@Component
struct ImageInfoExample {
  @State imgWidth: number = 0;
  @State imgHeight: number = 0;

  build() {
    Column() {
      Image($r('app.media.img'))
        .onComplete((msg: { width: number, height: number }) => {
          this.imgWidth = msg.width;
          this.imgHeight = msg.height;
        })
      
      Text(`Width: ${this.imgWidth}, Height: ${this.imgHeight}`)
    }
  }
}

2. 获取图片像素数据

场景：实现图片滤镜

API：PixelMap（需配合Image组件）

import image from '@ohos.multimedia.image';

@Entry
@Component
struct PixelMapExample {
  private pixelMap: image.PixelMap | undefined;

  async aboutToAppear() {
    // 1. 获取PixelMap
    let imageSource = image.createImageSource($r('app.media.img'));
    this.pixelMap = await imageSource.createPixelMap();

    // 2. 读取像素数据
    let pixels = await this.pixelMap.readPixels();
    console.info('Pixel data:', pixels);
  }

  build() {
    Column() {
      // 显示处理后的图片
      Image(this.pixelMap)
        .width(200)
        .height(200)
    }
  }
}

四、案例：图片编辑器

功能实现

• 旋转、缩放、透明度调节
• 实时显示图片信息

@Entry
@Component
struct ImageEditor {
  @State rotateAngle: number = 0;
  @State scaleValue: number = 1;
  @State opacityValue: number = 1;
  @State imgInfo: string = '';

  build() {
    Column() {
      // 图片显示区域
      Image($r('app.media.demo'))
        .width(300)
        .height(300)
        .rotate({ angle: this.rotateAngle })
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .opacity(this.opacityValue)
        .onComplete((msg: { width: number, height: number }) => {
          this.imgInfo = `Size: ${msg.width}x${msg.height}`;
        })

      // 控制面板
      Text(this.imgInfo).margin(10)
      
      Slider({ value: this.rotateAngle, min: 0, max: 360 })
        .onChange((value: number) => {
          this.rotateAngle = value;
        })
      
      Slider({ value: this.scaleValue, min: 0.1, max: 3 })
        .onChange((value: number) => {
          this.scaleValue = value;
        })
      
      Slider({ value: this.opacityValue, min: 0, max: 1 })
        .onChange((value: number) => {
          this.opacityValue = value;
        })
    }
  }
}

五、优化建议

1. 大图处理：

   Image($r('app.media.large_img'))
     .width(200)
     .height(200)
     .interpolation(ImageInterpolation.High) // 高质量缩放
     .syncLoad(true) // 同步加载避免闪烁

    2. 内存管理：

   aboutToDisappear() {
     this.pixelMap?.release(); // 释放PixelMap内存
   }

 3. 列表图片优化

   LazyForEach(this.data, item => {
     ListItem() {
       Image(item.img)
         .width(100)
         .height(100)
         .cachedCount(10) // 启用缓存
     }
   })

六、完整API参考

功能	API	文档链接
图片基础属性	Image组件	官方文档
矩阵变换	Matrix4	图形变换文档
像素级操作	@ohos.multimedia.image	Image模块