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

测试加载多张网络图片和加载多张gif图片的位置是否稳定-样例 

Signed-off-by: zenggaofeng <zenggaofeng2@h-partners.com>
This commit is contained in:
zenggaofeng 2023-11-15 17:16:23 +08:00
parent d4e7e2396f
commit 9ec574174a
4 changed files with 230 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
View File

@ -248,6 +248,17 @@ struct IndexFunctionDemo {
router.pushUrl({ url: "pages/testGifLoadWithWorkerPage" });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
Text("测试图片加载稳定").fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("测试多张网络图片加载速度")
.onClick(() => {
router.pushUrl({ url: "pages/testManyNetImageLoadWithPage" });
}).margin({ top: 5, left: 3 })
Button("测试多张gif加载位置")
.onClick(() => {
router.pushUrl({ url: "pages/testManyGifLoadWithPage" });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
}
}
.width('100%')

108
entry/src/main/ets/pages/testManyGifLoadWithPage.ets Normal file
View File

@ -0,0 +1,108 @@
/*
* Copyright (C) 2023 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 { ImageKnife, ImageKnifeComponent, ImageKnifeGlobal, ImageKnifeOption } from "@ohos/imageknife"
import worker from '@ohos.worker';
let gifUrl = "https://gw.alicdn.com/tfs/TB1E3H5t8Bh1e4jSZFhXXcC9VXa-198-198.gif"
let data: string[] = [
'https://media.giphy.com/media/hVgagDPf1IRFK/giphy.gif',
'https://placehold.co/600x400/000000/FFFFFF/png',
'https://s1.aigei.com/src/img/gif/92/922f58ca46c34b3e9947ddd4dc17ec32.gif?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:YRYJJynbOC0Z_Nl7HunjuRr4-Vk=',
'https://placehold.co/600x400/000000/orange/png',
'https://s1.aigei.com/src/img/gif/6c/6c907924ef1546d3a593fae3e78b97f6.gif?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:PozGIimx0mj5m69DQ0Z6qWn7mA0=',
'https://placehold.co/600x400/000000/orange/png?text=Hello+World'
]
@Entry
@Component
struct TestManyGifLoadWithPage {
private globalGifWorker?: worker.ThreadWorker = undefined
@State p1: PixelMap | undefined = undefined
@State p2: PixelMap | undefined = undefined
@State workerOption: ImageKnifeOption = {
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
};
build() {
Column() {
Text('gif Demo').align(Alignment.Center).fontSize(25).margin(10).fontWeight(FontWeight.Bolder)
Row() {
Column() {
Button('use Origin Image').align(Alignment.Center).fontSize(10).margin(2)
Image(gifUrl).width('100%').height(100).backgroundColor(Color.Blue).objectFit(ImageFit.Contain)
}.width('50%').backgroundColor(Color.Orange)
Column() {
Button('use ImageKnifeComponent').align(Alignment.Center).fontSize(10).margin(2)
ImageKnifeComponent({ imageKnifeOption: { loadSrc: gifUrl } })
.width('100%')
.height(100)
.backgroundColor(Color.Orange)
}.width('50%').backgroundColor(Color.Blue)
}
Row() {
Column() {
Button('use Worker').align(Alignment.Center).fontSize(10).margin(2)
.onClick(() => {
this.workerOption = {
loadSrc: gifUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
})
ImageKnifeComponent({ imageKnifeOption: this.workerOption })
.width('100%')
.height(100)
.backgroundColor(Color.Blue)
}.width('50%').backgroundColor(Color.Orange)
Column() {
Button('logs').align(Alignment.Center).fontSize(10).margin(2)
Text('logs').width('100%').height(100).backgroundColor(Color.Orange)
}.width('50%').backgroundColor(Color.Blue)
}
Grid() {
ForEach(data, (url: string) => {
GridItem(){
ImageKnifeComponent({imageKnifeOption:{
loadSrc:url
}}).backgroundColor(0x38393D).width(150).height(100)
}
})
}.rowsGap(2)
.columnsGap(2)
}.width('100%').height('100%').backgroundColor(0xF1F3F5)
}
aboutToAppear(){
this.globalGifWorker = new worker.ThreadWorker('entry/ets/workers/GifLoadWorker.ts',{
type:'classic',
name:'ImageKnifeParseGIF'
})
let imageKnife:ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
if(imageKnife != undefined){
imageKnife?.setGifWorker(this.globalGifWorker)
}
}
aboutToDisappear(){
if(this.globalGifWorker){
this.globalGifWorker.terminate()
}
}
}

108
entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets Normal file
View File

@ -0,0 +1,108 @@
/*
* Copyright (C) 2023 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 { ScaleType, ImageKnifeComponent } from "@ohos/imageknife"
class CommonDataSource <T> implements IDataSource {
private dataArray: T[] = []
private listeners: DataChangeListener[] = []
constructor(element: []) {
this.dataArray = element
}
public getData(index: number) {
return this.dataArray[index]
}
public totalCount(): number {
return this.dataArray.length
}
public addData(index: number, data: T[]): void {
this.dataArray = this.dataArray.concat(data)
this.notifyDataAdd(index)
}
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener);
if (pos >= 0) {
this.listeners.splice(pos, 1);
}
}
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener)
}
}
notifyDataAdd(index: number): void {
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataAdd(index)
})
}
}
@Entry
@Component
struct TestManyNetImageLoadWithPage {
@State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
private data:Array<string> = [
'http://s.yingshidq.com.cn/cover/longbms/2023/08/11/2159934215_1248_702.jpeg',
'http://s.yingshidq.com.cn/imags/poster/2022/08/02/165937334218556809.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/4350315060_640_360.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/3835072893_1248_702.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/2821936016_1248_702.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/11/1311714870_1248_702.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/4421772097_1248_702.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/09/05/5898334347_400_225.png',
'http://s.yingshidq.com.cn/imags/poster/2022/12/06/167031399911862707.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/11/1405851829_1248_702.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/3796501624_1248_702.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/4202181519_1248_702.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/11/1449894622_1248_702.jpeg',
'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/3756558151_1248_702.jpeg'
]
aboutToAppear() {
this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
}
build() {
Scroll() {
Column() {
Grid() {
LazyForEach(this.hotCommendList, (item: string) => {
GridItem() {
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: item,
placeholderSrc: $r('app.media.icon_loading'),
mainScaleType: ScaleType.CENTER_CROP,
placeholderScaleType: ScaleType.CENTER_CROP
}
}).width('100%').height('100%')
}.width('45%').height(200)
}, (item: string) => JSON.stringify(item))
}
.columnsTemplate('1fr 1fr')
.columnsGap(8)
.rowsGap(10)
.width('100%')
.hitTestBehavior(HitTestMode.None)
.maxCount(10)
}.margin({ top: 5 })
}
}
}

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

@ -31,6 +31,8 @@
"pages/testSingleFrameGifPage",
"pages/testGifLoadWithWorkerPage",
"pages/OptionTestPage",
"pages/SignatureTestPage"
"pages/SignatureTestPage",
"pages/testManyNetImageLoadWithPage",
"pages/testManyGifLoadWithPage"
]
}