写点什么

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

作者:高心星
  • 2024-10-31
    江苏
  • 本文字数:1807 字

    阅读完需:约 6 分钟

HarmonyOS 5.0应用开发——图像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)
复制代码

完整代码

import { image } from '@kit.ImageKit';
@Entry@Componentstruct 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%') }}
复制代码


用户头像

高心星

关注

天将降大任于斯人也,必先苦其心志。 2024-10-17 加入

华为开发者专家(HDE)。 10年教学经验,兼任多家科技公司技术顾问。先后从事JavaEE项目开发、Python爬虫、HarmonyOS移动应用开发等课程的教学工作。参与开发《鸿蒙应用开发基础》和《鸿蒙项目实战》等课程。

评论

发布
暂无评论
HarmonyOS 5.0应用开发——图像PixelMap变换_鸿蒙_高心星_InfoQ写作社区