【高心星出品】
图像变换
图片处理指对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
@Component
struct PmChange {@State message: string = 'Hello World';@State pm: PixelMap | undefined = undefined@State crop: PixelMap | undefined = undefinedprivate imagewidth: number = 0private imageheight: number = 0genpm(index: number) {// 获取资源图片的字节let buffer = getContext(this).resourceManager.getMediaContentSync($r('app.media.jingse')).buffer.slice(0)// 生成imagesourcelet source = image.createImageSource(buffer)// 转化为pixelmaplet 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 tempcase 1:// 缩放图片temp.scaleSync(0.5, 0.5)return tempcase 2:// 偏移图片temp.translateSync(30, 20)return tempcase 3:// 旋转角度temp.rotateSync(90)return tempcase 4:// 水平反转图片temp.flipSync(true, false)return tempcase 5:// 图片半透明temp.opacitySync(0.5)return tempdefault :return temp}}aboutToAppear(): void {this.pm=this.genpm(-1)let imginfo = this.pm.getImageInfoSync()// 获取图片的宽和高this.imagewidth = imginfo.size.widththis.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%')}
}