floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

修改ImageKnifeComponent组件pixel Map初始值以及修复多张错误图不显示 

Signed-off-by: zgf <zenggaofeng2@h-partners.com>
This commit is contained in:
zgf 2024-11-28 19:54:00 +08:00
parent e98984c56a
commit e475dcd30a
9 changed files with 311 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,6 +1,7 @@
## 3.2.0-rc.5
- Enhance: ImageFit.Auto support adaptive height after component width change
- Fix bug: call onLoadStart 2 times(import from 3.2.0-rc.0)
- Change the initial value of the PixelMap component of ImageKnife to ImageContent EMPTY
## 3.2.0-rc.4
- Support ICO format images

10
entry/src/main/ets/pages/Index.ets
View File

@ -50,6 +50,16 @@ struct Index {
uri: 'pages/SetMaxRequestPage',
});
})
Button($r('app.string.Single_CallBack')).margin({top:10}).onClick(()=>{
router.push({
uri: 'pages/SingleImageCallBack',
});
})
Button($r('app.string.Multiple_CallBack')).margin({top:10}).onClick(()=>{
router.push({
uri: 'pages/MultipleImageCallBack',
});
})
Button($r('app.string.Test_multiple_images')).margin({top:10}).onClick(()=>{
router.push({
uri: 'pages/TestCommonImage',

151
entry/src/main/ets/pages/MultipleImageCallBack.ets Normal file
View File

@ -0,0 +1,151 @@
/*
* Copyright (C) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife';
import { CommonDataSource } from './model/CommonDataSource'
@Entry
@Component
struct MultipleImageCallBack {
@State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
@State componentIndex: number = 0
@State startIndex: number = 0
@State successIndex: number = 0
@State failIndex: number = 0
@State cancelJobIndex: number = 0
@State cancelLoadIndex: number = 0
@State memoryIndex: number = 0
@State fileCacheIndex: number = 0
@State netIndex: number = 0
@State checkText: string = ''
private data: Array<string> = []
aboutToAppear(): void {
for (let index = 0; index < 100; index++) {
this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
}
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
}
build() {
Column() {
Row() {
Column() {
Text('图片总数：' + this.componentIndex)
Text('开始回调：' + this.startIndex)
Text('成功回调：' + this.successIndex)
Text('失败回调：' + this.failIndex)
Text('队列取消回调：' + this.cancelJobIndex)
Text('加载取消回调：' + this.cancelLoadIndex)
Text('内存数量：' + this.memoryIndex)
Text('文件数量：' + this.fileCacheIndex)
Text('网络数量：' + this.netIndex)
}.width('50%')
Column() {
Button('check')
.onClick(()=>{
this.checkText = ''
if (this.componentIndex !== this.startIndex + this.cancelJobIndex) {
this.checkText = this.checkText + '图片总数！=开始+队列取消，'
}
if(this.startIndex !== this.successIndex + this.failIndex + this.cancelLoadIndex) {
this.checkText = this.checkText + '开始回调！=成功+失败+加载取消，'
}
if(this.successIndex !== this.memoryIndex + this.fileCacheIndex + this.netIndex) {
this.checkText = this.checkText + '成功回调！=内存+文件+网络，'
}
if(this.componentIndex !== this.successIndex + this.failIndex + this.cancelJobIndex + this.cancelLoadIndex) {
this.checkText = this.checkText + '图片总数！=成功+失败+加载取消+队列取消，'
}
if(this.checkText == '') {
this.checkText = 'check正确'
}
})
Text(this.checkText)
}.width('50%')
}.width('100%')
Column() {
WaterFlow() {
LazyForEach(this.hotCommendList, (item: string,index: number) => {
FlowItem() {
Column() {
Text(index + '')
ImageComponent({
imageKnifeOption: {
loadSrc: item,
placeholderSrc: $r('app.media.loading'),
errorholderSrc: $r('app.media.failed'),
onLoadListener: {
onLoadStart:()=>{
this.startIndex++
console.log('image load multiple loadStart:' + this.startIndex)
},
onLoadSuccess:(pixelmap,imageData,request)=>{
this.successIndex++
let memory = request?.imageKnifeData?.timeInfo?.memoryCheckEndTime ? 1 : 0
let fileCache = request?.imageKnifeData?.timeInfo?.diskCheckEndTime ? 1 : 0
let net = request?.imageKnifeData?.timeInfo?.netRequestEndTime ? 1 : 0
memory = memory - fileCache
fileCache = fileCache - net
this.memoryIndex = this.memoryIndex + memory
this.fileCacheIndex = this.fileCacheIndex + fileCache
this.netIndex = this.netIndex + net
console.log('image load multiple loadSuccess:' + this.successIndex)
},
onLoadFailed:()=>{
this.failIndex++
console.log('image load multiple loadFail:' + this.failIndex)
},
onLoadCancel:(message,request)=>{
let flag = request?.imageKnifeData?.type ? true : false
if (flag) {
this.cancelLoadIndex++
} else {
this.cancelJobIndex++
}
console.log('image load multiple cancelJobIndex:' + this.cancelJobIndex,'cancelLoadIndex' + this.cancelLoadIndex)
}
}
},index:this.componentIndex
}).width('50%').height(160)
}
}.height(200)
.backgroundColor('#95efd2')
}, (item: string) => item)
}
.cachedCount(0)
.columnsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(5)
.backgroundColor(0xFAEEE0)
.width('100%')
}
.height('80%')
}.width('100%')
.height('100%')
}
}
@Component
struct ImageComponent {
@State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
@Link index: number
aboutToAppear(): void {
this.index++
}
build() {
ImageKnifeComponent({
imageKnifeOption: this.imageKnifeOption
})
}
}

126
entry/src/main/ets/pages/SingleImageCallBack.ets Normal file
View File

@ -0,0 +1,126 @@
/*
* Copyright (C) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife';
import { CommonDataSource } from './model/CommonDataSource'
@Entry
@Component
struct SingleImageCallBack {
@State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
@State componentIndex: number = 0
@State startIndex: number = 0
@State successIndex: number = 0
@State failIndex: number = 0
@State cancelJobIndex: number = 0
@State cancelLoadIndex: number = 0
@State memoryIndex: number = 0
@State fileCacheIndex: number = 0
@State netIndex: number = 0
@State checkText: string = ''
build() {
Column() {
Row() {
Column() {
Text('图片总数：' + this.componentIndex)
Text('开始回调：' + this.startIndex)
Text('成功回调：' + this.successIndex)
Text('失败回调：' + this.failIndex)
Text('队列取消回调：' + this.cancelJobIndex)
Text('加载取消回调：' + this.cancelLoadIndex)
Text('内存数量：' + this.memoryIndex)
Text('文件数量：' + this.fileCacheIndex)
Text('网络数量：' + this.netIndex)
}.width('50%')
Column() {
Button('check')
.onClick(()=>{
this.checkText = ''
if (this.componentIndex !== this.startIndex + this.cancelJobIndex) {
this.checkText = this.checkText + '图片总数！=开始+队列取消，'
}
if(this.startIndex !== this.successIndex + this.failIndex + this.cancelLoadIndex) {
this.checkText = this.checkText + '开始回调！=成功+失败+加载取消，'
}
if(this.successIndex !== this.memoryIndex + this.fileCacheIndex + this.netIndex) {
this.checkText = this.checkText + '成功回调！=内存+文件+网络，'
}
if(this.componentIndex !== this.successIndex + this.failIndex + this.cancelJobIndex + this.cancelLoadIndex) {
this.checkText = this.checkText + '图片总数！=成功+失败+加载取消+队列取消，'
}
if(this.checkText == '') {
this.checkText = 'check正确'
}
})
Text(this.checkText)
}.width('50%')
}.width('100%')
Column() {
ImageComponent({
imageKnifeOption: {
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
placeholderSrc: $r('app.media.loading'),
errorholderSrc: $r('app.media.failed'),
onLoadListener: {
onLoadStart: () => {
this.startIndex++
console.log('image load multiple loadStart:' + this.startIndex)
},
onLoadSuccess: (pixelmap, imageData, request) => {
this.successIndex++
let memory = request?.imageKnifeData?.timeInfo?.memoryCheckEndTime ? 1 : 0
let fileCache = request?.imageKnifeData?.timeInfo?.diskCheckEndTime ? 1 : 0
let net = request?.imageKnifeData?.timeInfo?.netRequestEndTime ? 1 : 0
memory = memory - fileCache
fileCache = fileCache - net
this.memoryIndex = this.memoryIndex + memory
this.fileCacheIndex = this.fileCacheIndex + fileCache
this.netIndex = this.netIndex + net
console.log('image load multiple loadSuccess:' + this.successIndex)
},
onLoadFailed: () => {
this.failIndex++
console.log('image load multiple loadFail:' + this.failIndex)
},
onLoadCancel: (message,request) => {
let flag = request?.imageKnifeData?.type ? true : false
if (flag) {
this.cancelLoadIndex++
} else {
this.cancelJobIndex++
}
console.log('image load multiple cancelJobIndex:' + this.cancelJobIndex,'cancelLoadIndex' + this.cancelLoadIndex)
}
}
},index:this.componentIndex
}).width(300).height(300)
}
.height('80%')
}.width('100%')
.height('100%')
}
}
@Component
struct ImageComponent {
@State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
@Link index: number
aboutToAppear(): void {
this.index++
}
build() {
ImageKnifeComponent({
imageKnifeOption: this.imageKnifeOption
})
}
}

8
entry/src/main/resources/base/element/string.json
View File

@ -655,6 +655,14 @@
{
"name": "Auto_ImageFit",
"value": "ImageFit.Auto:Auto ImageFit Height"
},
{
"name": "Single_CallBack",
"value": "Single image callback"
},
{
"name": "Multiple_CallBack",
"value": "Multiple image callback"
}
]
}

4
entry/src/main/resources/base/profile/main_pages.json
View File

@ -38,6 +38,8 @@
"pages/TestImageKnifeCallbackPage",
"pages/TestListImageKnifeCallbackPage",
"pages/DownSamplePage",
"pages/AutoImageFit"
"pages/AutoImageFit",
"pages/SingleImageCallBack",
"pages/MultipleImageCallBack"
]
}

8
entry/src/main/resources/zh_CN/element/string.json
View File

@ -651,6 +651,14 @@
{
"name": "Auto_ImageFit",
"value": "ImageFit.Auto:自适用图片高度"
},
{
"name": "Single_CallBack",
"value": "单个图片回调"
},
{
"name": "Multiple_CallBack",
"value": "多张图片回调"
}
]
}

2
library/src/main/ets/ImageKnifeDispatcher.ets
View File

@ -373,7 +373,7 @@ export class ImageKnifeDispatcher {
}
if (requestWithSource.source === ImageKnifeRequestSource.SRC &&
requestWithSource.request.imageKnifeOption.errorholderSrc !== undefined) {
requestWithSource.request.requestState = ImageKnifeRequestState.PROGRESS
if (this.showFromMemomry(requestWithSource.request, requestWithSource.request.imageKnifeOption.errorholderSrc,
ImageKnifeRequestSource.ERROR_HOLDER) === false) {
this.getAndShowImage(requestWithSource.request, requestWithSource.request.imageKnifeOption.errorholderSrc,

4
library/src/main/ets/components/ImageKnifeComponent.ets
View File

@ -24,7 +24,7 @@ import { DefaultEngineKey } from '../key/DefaultEngineKey';
@Component
export struct ImageKnifeComponent {
@Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
@State pixelMap: PixelMap | string | ImageContent | undefined = undefined
@State pixelMap: PixelMap | string | ImageContent | undefined = ImageContent.EMPTY
@State syncLoad: boolean = false
@State adaptiveWidth: Length = '100%'
@State adaptiveHeight: Length = '100%'
@ -150,6 +150,8 @@ export struct ImageKnifeComponent {
return //针对reuse场景，不显示历史图片
}
this.pixelMap = pixelMap
LogUtil.debug('image load showPixelMap:' + this.request?.imageKnifeOption.loadSrc + ', componentId = ' +
this.getUniqueId() + ',size:' + JSON.stringify(size))
if (typeof this.pixelMap !== 'string') {
if (this.imageKnifeOption.objectFit === ImageFit.Auto && this.isImageFitAutoResize == false) {
this.adaptiveHeight = this.currentWidth * size.height / size.width