forked from floraachy/ImageKnife
84 lines
2.6 KiB
Plaintext
84 lines
2.6 KiB
Plaintext
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'
|
||
|
||
// const logger = new imUtils.logger.IMLogger('Avatar')
|
||
|
||
class MyImageOption extends ImageKnifeOption {
|
||
account?: string
|
||
}
|
||
|
||
@Component
|
||
export struct UserAvatar {
|
||
@Prop @Watch('userInfoUpdate') userInfo: string = ""
|
||
// @Prop userInfo: string = ""
|
||
imgSize: number = 100
|
||
radius: number = 12
|
||
borderSize: number = 0
|
||
imgSizes: number = 1
|
||
@State ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
|
||
@StorageProp('WeLink_Mob_fontSize_multiple') @Watch('updateImgSize') WeLink_Mob_fontSize_multiple: number = 0
|
||
scalable: boolean = true;
|
||
@State calcImgSize: number = 100
|
||
|
||
aboutToAppear(): void {
|
||
this.userInfoUpdate()
|
||
this.setImageSize()
|
||
}
|
||
|
||
setImageSize() {
|
||
if (!this.scalable) {
|
||
this.calcImgSize = this.imgSize
|
||
} else if (this.WeLink_Mob_fontSize_multiple < 0.9) {
|
||
this.calcImgSize = this.imgSize * 0.9
|
||
} else if (this.WeLink_Mob_fontSize_multiple > 1.6) {
|
||
this.calcImgSize = this.imgSize * 1.6
|
||
} else {
|
||
this.calcImgSize = this.imgSize * this.WeLink_Mob_fontSize_multiple
|
||
}
|
||
}
|
||
|
||
updateImgSize() {
|
||
this.setImageSize()
|
||
}
|
||
|
||
aboutToReuse(param: ESObject) {
|
||
this.userInfoUpdate()
|
||
}
|
||
|
||
userInfoUpdate() {
|
||
// if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return;
|
||
// // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`)
|
||
// if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime()
|
||
// .toString() === this.imageKnifeOption?.signature?.getKey()) return;
|
||
this.ImageKnifeOption = {
|
||
//TODO:写死loadSRC，场景：变更组件大小，所有图片不显示
|
||
loadSrc: this.userInfo,
|
||
placeholderSrc: $r('app.media.loading'),
|
||
errorholderSrc: $r('app.media.failed'),
|
||
border: { radius:20,width:5,color:$r('app.color.start_window_background') },
|
||
objectFit:ImageFit.Contain
|
||
// signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString())
|
||
}
|
||
}
|
||
|
||
build() {
|
||
Row() {
|
||
// Image(this.imageKnifeOption.loadSrc)
|
||
|
||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption })
|
||
.borderRadius(this.radius)
|
||
.clip(true)
|
||
.width(this.calcImgSize)
|
||
.height(this.calcImgSize)
|
||
.backgroundColor(Color.Pink)
|
||
|
||
|
||
|
||
// Image(this.userInfo)
|
||
// Text((this.imageKnifeOption.loadSrc as string).split('/')[8])
|
||
// .position({ x: 0, y: 0 })
|
||
// .zIndex(9)
|
||
// .fontSize(12)
|
||
// .fontColor('#ff0000')
|
||
}
|
||
}
|
||
} |