ImageKnifeComponent绘制图片从onAreaChange改为AboutToAppear中绘制

Signed-off-by: zenggaofeng <zenggaofeng2@h-partners.com>
This commit is contained in:
zenggaofeng 2024-03-01 15:47:19 +08:00
parent ef24c5e987
commit d7284eddfc
1 changed files with 25 additions and 21 deletions

View File

@ -24,6 +24,8 @@ import { LogUtil } from '../imageknife/utils/LogUtil'
import { BusinessError } from '@ohos.base'
import common from '@ohos.app.ability.common'
import { ObjectKey } from './ObjectKey'
import componentUtils from '@ohos.arkui.componentUtils'
import inspector from '@ohos.arkui.inspector'
@Component
export struct ImageKnifeComponent {
@ -92,33 +94,15 @@ export struct ImageKnifeComponent {
private detachFromLayoutGIF :DetachFromLayout|undefined = undefined;
private detachFromLayoutPixelMap :DetachFromLayout|undefined = undefined;
listener: inspector.ComponentObserver = inspector.createComponentObserver("ImageKnifeCanvas")
private value: componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas")
build() {
Canvas(this.context)
.key("ImageKnifeCanvas")
.width('100%')
.height('100%')
.renderFit(RenderFit.RESIZE_FILL)
.onAreaChange((oldValue: Area, newValue: Area) => {
if(newValue != undefined && newValue.width != undefined && newValue.height != undefined) {
this.currentWidth = newValue.width as number
this.currentHeight = newValue.height as number
this.lastWidth = oldValue.width as number
this.lastHeight = oldValue.height as number
if (this.currentWidth <= 0 || this.currentHeight <= 0) {
// 存在宽或者高为0,此次重回无意义,无需进行request请求
} else {
// 前提:宽高值均有效,值>0. 条件1当前宽高与上一次宽高不同 条件2:当前是第一次绘制
if ((this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag) {
this.firstDrawFlag = false;
LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight)
this.imageKnifeExecute()
}
}
}else{
LogUtil.log('ImageKnifeComponent onAreaChange Error newValue is undefined')
}
})
.onReady(() => {
let ctx = this.context;
ctx.imageSmoothingEnabled = this.imageSmoothingEnabled;
@ -141,6 +125,23 @@ export struct ImageKnifeComponent {
}
})
}
onLayoutComplete:()=>void = ():void=>{
this.value = componentUtils.getRectangleById("ImageKnifeCanvas");
this.currentWidth = px2vp(this.value.size.width)
this.currentHeight = px2vp(this.value.size.height)
if (this.currentWidth <= 0 || this.currentHeight <= 0) {
// 存在宽或者高为0,此次重回无意义,无需进行request请求
} else {
// 前提:宽高值均有效,值>0. 条件1当前宽高与上一次宽高不同 条件2:当前是第一次绘制
if ((this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag) {
this.firstDrawFlag = false;
LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight)
this.lastWidth = this.currentWidth
this.lastHeight = this.currentHeight
this.imageKnifeExecute()
}
}
}
watchImageKnifeOption() {
LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!')
@ -625,6 +626,8 @@ export struct ImageKnifeComponent {
LogUtil.log('ImageKnifeComponent aboutToAppear happened!')
this.canvasHasReady = false;
this.whetherWaitSize(true);
this.listener.on("layout",this.onLayoutComplete)
}
aboutToDisappear() {
@ -639,6 +642,7 @@ export struct ImageKnifeComponent {
this.detachFromLayoutPixelMap.detach();
}
this.resetGifData();
this.listener.off("layout",this.onLayoutComplete)
}
onPageShow() {