HarmonyOS Next应用开发——图像PixelMap变换

【高心星出品】

图像变换

图片处理指对PixelMap进行相关的操作,如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。图片处理主要包括图像变换、位图操作,本文介绍图像变换。

图形裁剪
复制代码
// 裁剪图片 x,y为裁剪的起始坐标,size为裁剪的图片宽和高
temp.cropSync({ x: 20, y: 20, size: { width: this.imagewidth - 20, height: this.imageheight - 20 } })
图形缩放
复制代码
// 缩放图片
temp.scaleSync(0.5, 0.5)
图形偏移
复制代码
// 偏移图片
temp.translateSync(30, 20)
图形旋转
复制代码
// 旋转角度
temp.rotateSync(90)
图形反转
复制代码
// 水平反转图片
temp.flipSync(true, false)
图形透明度
复制代码
// 图片半透明
temp.opacitySync(0.5)
完整代码
typescript 复制代码
import { image } from '@kit.ImageKit';

@Entry
@Component
struct PmChange {
  @State message: string = 'Hello World';
  @State pm: PixelMap | undefined = undefined
  @State crop: PixelMap | undefined = undefined
  private imagewidth: number = 0
  private imageheight: number = 0

  genpm(index: number) {
    // 获取资源图片的字节
    let buffer = getContext(this).resourceManager.getMediaContentSync($r('app.media.jingse')).buffer.slice(0)
    // 生成imagesource
    let source = image.createImageSource(buffer)
    // 转化为pixelmap
    let temp = source.createPixelMapSync({ editable: true })
    switch (index) {
      case 0:
        // 裁剪图片 x,y为裁剪的起始坐标,size为裁剪的图片宽和高
        temp.cropSync({ x: 20, y: 20, size: { width: this.imagewidth - 20, height: this.imageheight - 20 } })
        return temp
      case 1:
        // 缩放图片
        temp.scaleSync(0.5, 0.5)
        return temp
      case 2:
        // 偏移图片
        temp.translateSync(30, 20)
        return temp
      case 3:
        // 旋转角度
        temp.rotateSync(90)
        return temp
      case 4:
        // 水平反转图片
        temp.flipSync(true, false)
        return temp
      case 5:
        // 图片半透明
        temp.opacitySync(0.5)
        return temp
      default :
        return temp


    }
  }

  aboutToAppear(): void {
    this.pm=this.genpm(-1)
    let imginfo = this.pm.getImageInfoSync()
    // 获取图片的宽和高
    this.imagewidth = imginfo.size.width
    this.imageheight = imginfo.size.height
    
  }

  build() {
    Column() {
      Image(this.pm).width(300).height(300).margin({ top: 20 })
      Flex({
        direction: FlexDirection.Row,
        wrap: FlexWrap.Wrap,
        justifyContent: FlexAlign.SpaceAround,

      }) {
        Stack() {
          Image(this.genpm(0)).width(100).height(100).border({width:2,color:Color.Red})
          Text('裁剪掉20vp')
        }.margin({top:20})

        Stack() {
          Image(this.genpm(1)).width(100).height(100).objectFit(ImageFit.ScaleDown).border({width:2,color:Color.Red})
          Text('缩小一半')
        }.margin({top:20})

        Stack() {
          Image(this.genpm(2)).width(100).height(100).objectFit(ImageFit.Fill).border({width:2,color:Color.Red})
          Text('偏移图片')
        }.margin({top:20})

        Stack() {
          Image(this.genpm(3)).width(100).height(100).border({width:2,color:Color.Red})
          Text('旋转90°')
        }.margin({top:20})

        Stack() {
          Image(this.genpm(4)).width(100).height(100).border({width:2,color:Color.Red})
          Text('水平反转')
        }.margin({top:20})

        Stack() {
          Image(this.genpm(5)).width(100).height(100).border({width:2,color:Color.Red})
          Text('图片半透明')
        }.margin({top:20})
      }.width('100%')
      .padding(20)
    }.width('100%')
    .height('100%')
  }
}
Color.Red})
          Text('图片半透明')
        }.margin({top:20})
      }.width('100%')
      .padding(20)
    }.width('100%')
    .height('100%')
  }
}
相关推荐
幽蓝计划7 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少13 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划13 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core15 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡15 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说15 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
funnycoffee12317 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院17 小时前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_17 小时前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈1 天前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos