!66 测试样例-加载多张网络图片和多张gif图片

Merge pull request !66 from zgf/master
2023-11-16 02:38:51 +00:00 · 2023-11-16 02:38:51 +00:00 · ee686dc4b7
parent d4e7e2396f 9ec574174a
commit ee686dc4b7
4 changed files with 230 additions and 1 deletions
--- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
+++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
@ -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%')
--- a/entry/src/main/ets/pages/testManyGifLoadWithPage.ets
+++ b/entry/src/main/ets/pages/testManyGifLoadWithPage.ets
@ -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()
+    }
+  }
+}
--- a/entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets
+++ b/entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets
@ -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 })
+    }
+  }
+}
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ b/entry/src/main/resources/base/profile/main_pages.json
@ -31,6 +31,8 @@
    "pages/testSingleFrameGifPage",
    "pages/testGifLoadWithWorkerPage",
    "pages/OptionTestPage",
-    "pages/SignatureTestPage"
+    "pages/SignatureTestPage",
+    "pages/testManyNetImageLoadWithPage",
+    "pages/testManyGifLoadWithPage"
  ]
 }