caishi
/
ImageKnife
forked from floraachy/ImageKnife
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

!148 获取组件宽高改为使用CanvasRenderingContext2D对象获取宽高，并修复改变字体大小导致部分图片消失 

Merge pull request !148 from zgf/size
This commit is contained in:
openharmony_ci 2024-03-27 11:26:59 +00:00 committed by Gitee
parent 2cfbabb3ec 21d9ccad6d
commit 070ffa0af8
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -40,8 +40,6 @@ export struct ImageKnifeComponent {
private hasDisplayRetryholder = false; private hasDisplayRetryholder = false;
private lastWidth: number = 0 private lastWidth: number = 0
private lastHeight: number = 0 private lastHeight: number = 0
private currentWidth: number = 0
private currentHeight: number = 0
// 定时器id // 定时器id
private gifTimerId: number = -1 private gifTimerId: number = -1
// 完整gif播放时间 // 完整gif播放时间
@ -104,7 +102,6 @@ export struct ImageKnifeComponent {
private detachFromLayoutPixelMap :DetachFromLayout|undefined = undefined; private detachFromLayoutPixelMap :DetachFromLayout|undefined = undefined;
listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId) listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId)
private value: componentUtils.ComponentInfo = componentUtils.getRectangleById(this.keyCanvas.keyId)
@State currentSize : Size = { @State currentSize : Size = {
width: 0.01, width: 0.01,
@ -140,18 +137,15 @@ export struct ImageKnifeComponent {
}) })
} }
onLayoutComplete:()=>void = ():void=>{ onLayoutComplete:()=>void = ():void=>{
this.value = componentUtils.getRectangleById(this.keyCanvas.keyId); if (this.context.width <= 0 || this.context.height <= 0) {
this.currentWidth = px2vp(this.value.size.width)
this.currentHeight = px2vp(this.value.size.height)
if (this.currentWidth <= 0 || this.currentHeight <= 0) {
// 存在宽或者高为0,此次重回无意义,无需进行request请求 // 存在宽或者高为0,此次重回无意义,无需进行request请求
} else { } else {
// 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制 // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制
if ((this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag) { if ((this.context.height != this.lastHeight || this.context.width != this.lastWidth) || this.firstDrawFlag) {
this.firstDrawFlag = false; this.firstDrawFlag = false;
LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight) LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.context.width + ' currentHeight=' + this.context.height)
this.lastWidth = this.currentWidth this.lastWidth = this.context.width
this.lastHeight = this.currentHeight this.lastHeight = this.context.height
this.imageKnifeExecute() this.imageKnifeExecute()
} }
} }
@ -168,7 +162,7 @@ export struct ImageKnifeComponent {
* @param drawFirst 是否是aboutToAppear第一次绘制 * @param drawFirst 是否是aboutToAppear第一次绘制
*/ */
whetherWaitSize(drawFirst?: boolean) { whetherWaitSize(drawFirst?: boolean) {
if (this.currentHeight <= 0 || this.currentWidth <= 0) { if (this.context.height <= 0 || this.context.width <= 0) {
// 宽或者高没有高度,需要等待canvas组件初始化完成 // 宽或者高没有高度,需要等待canvas组件初始化完成
if (drawFirst) { if (drawFirst) {
this.firstDrawFlag = true; this.firstDrawFlag = true;
@ -325,7 +319,7 @@ export struct ImageKnifeComponent {
this.resetGifData() this.resetGifData()
if (this.canvasHasReady) { if (this.canvasHasReady) {
// 如果canvas已经初始化好了，清空原有的canvas内容 // 如果canvas已经初始化好了，清空原有的canvas内容
this.context.clearRect(0, 0, this.currentWidth, this.currentHeight) this.context.clearRect(0, 0, this.context.width, this.context.height)
} }
return return
} }
@ -347,15 +341,15 @@ export struct ImageKnifeComponent {
return return
} }
if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},this.imageKnifeOption.drawLifeCycle)) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
if(this.defaultLifeCycle.displayPlaceholder != undefined) { if(this.defaultLifeCycle.displayPlaceholder != undefined) {
this.defaultLifeCycle.displayPlaceholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.defaultLifeCycle.displayPlaceholder(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
}) })
} }
@ -370,15 +364,15 @@ export struct ImageKnifeComponent {
return return
} }
if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},this.imageKnifeOption.drawLifeCycle)) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
if(this.defaultLifeCycle.displayProgress != undefined) { if(this.defaultLifeCycle.displayProgress != undefined) {
this.defaultLifeCycle.displayProgress(this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.defaultLifeCycle.displayProgress(this.context, percent, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
}) })
} }
@ -393,15 +387,15 @@ export struct ImageKnifeComponent {
return return
} }
if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},this.imageKnifeOption.drawLifeCycle)) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
if(this.defaultLifeCycle.displayThumbSizeMultiplier != undefined) { if(this.defaultLifeCycle.displayThumbSizeMultiplier != undefined) {
this.defaultLifeCycle.displayThumbSizeMultiplier(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.defaultLifeCycle.displayThumbSizeMultiplier(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
}) })
} }
@ -414,15 +408,15 @@ export struct ImageKnifeComponent {
return return
} }
if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},this.imageKnifeOption.drawLifeCycle)) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
if(this.defaultLifeCycle.displayMainSource != undefined) { if(this.defaultLifeCycle.displayMainSource != undefined) {
this.defaultLifeCycle.displayMainSource(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.defaultLifeCycle.displayMainSource(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
}) })
} }
@ -437,15 +431,15 @@ export struct ImageKnifeComponent {
return return
} }
if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},this.imageKnifeOption.drawLifeCycle)) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
if( this.defaultLifeCycle.displayRetryholder != undefined) { if( this.defaultLifeCycle.displayRetryholder != undefined) {
this.defaultLifeCycle.displayRetryholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.defaultLifeCycle.displayRetryholder(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
}) })
} }
@ -459,15 +453,15 @@ export struct ImageKnifeComponent {
return return
} }
if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},this.imageKnifeOption.drawLifeCycle)) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
},(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
if(this.defaultLifeCycle.displayErrorholder != undefined) { if(this.defaultLifeCycle.displayErrorholder != undefined) {
this.defaultLifeCycle.displayErrorholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.defaultLifeCycle.displayErrorholder(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
}) })
} }