Add the PAGImageView for the OHOS platform.(#2467)

Co-authored-by: kevingpqi <[email protected]>

ohos/entry/src/main/ets/pages/Index.ets

@@ -21,67 +21,80 @@ import * as pag from 'libpag';
 @Entry
 @Component
 struct Index {
-  @State message: string = "";
-  @State @Watch("updateMessage") stateString: string = "";
-  @State @Watch("updateMessage") progress: number = 0;
+  @State imageViewControllers: Array<pag.PAGImageViewController> = new Array<pag.PAGImageViewController>();
   @State viewController: pag.PAGViewController = new pag.PAGViewController();
+  @State pageIndex: number = 0;
 
   aboutToAppear(): void {
     let manager = getContext(this).resourceManager;
     let file = pag.PAGFile.LoadFromAssets(manager, "PAG_LOGO.pag");
     this.viewController.setComposition(file);
-    this.viewController.setRepeatCount(1);
-    this.viewController.addListener(new WeakRef(this));
+    this.viewController.setRepeatCount(-1);
     this.viewController.play();
-  }
-
-  onAnimationStart = (viewController: pag.PAGViewController) => {
-    this.stateString = viewController.uniqueID() + ` PAG start`;
-  }
-  onAnimationEnd = (viewController: pag.PAGViewController) => {
-    this.stateString = viewController.uniqueID() + ` PAG end`;
-  }
-  onAnimationRepeat = (viewController: pag.PAGViewController) => {
-    this.stateString = viewController.uniqueID() + ` PAG repeat`;
-  }
-  onAnimationCancel = (viewController: pag.PAGViewController) => {
-    this.stateString = viewController.uniqueID() + ` PAG cancel`;
-  }
-  onAnimationUpdate = (viewController: pag.PAGViewController) => {
-    this.progress = viewController.getProgress();
-  }
 
-  updateMessage() {
-    this.message = this.stateString + ` progress ${this.progress.toFixed(2)}`;
+    for (let index = 0; index < 20; index++) {
+      let imageViewController = new pag.PAGImageViewController();
+      let file = pag.PAGFile.LoadFromAssets(manager, "list/" + index + ".pag");
+      imageViewController.setComposition(file);
+      imageViewController.setRepeatCount(-1);
+      this.imageViewControllers.push(imageViewController);
+    }
   }
 
   build() {
-    Row() {
-      Column() {
-        pag.PAGView({
-          controller: this.viewController
-        })
-          .height('50%')
-          .onClick(() => {
+    Column() {
+      Row() {
+        if (this.pageIndex == 1) {
+          Grid() {
+            ForEach(this.imageViewControllers, (item: pag.PAGImageViewController) => {
+              GridItem() {
+                pag.PAGImageView({
+                  controller: item
+                })
+                  .onClick(() => {
+                    if (item.isPlaying()) {
+                      item.pause();
+                    } else {
+                      item.play();
+                    }
+                  })
+              }.width("25%").height(100)
+            })
+          }.width("100%")
+        } else {
+          pag.PAGView({
+            controller: this.viewController
+          }).onClick(() => {
             if (this.viewController.isPlaying()) {
               this.viewController.pause();
             } else {
               this.viewController.play();
             }
           })
+        }
+      }.height("70%")
+
+
+      Row() {
+        Button("PAGView").width("40%").margin(10)
+          .onClick(() => {
+            this.pageIndex = 0;
+            this.viewController.play();
+            this.imageViewControllers.forEach((item: pag.PAGImageViewController) => {
+              item.pause();
+            })
+          })
 
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
+        Button("PAGImageView").width("40%")
           .onClick(() => {
-            this.viewController.setProgress(0.5);
-            this.viewController.setRepeatCount(0);
+            this.pageIndex = 1;
+            this.imageViewControllers.forEach((item: pag.PAGImageViewController) => {
+              item.play();
+            })
+            this.viewController.pause();
           })
-          .height('50%')
       }
-      .width('100%')
 
     }
-    .height('100%')
   }
 }

ohos/libpag/Index.ets

@@ -45,3 +45,7 @@ export { PAGTextLayer } from './src/main/ets/PAGTextLayer'
 export { PAGVideoRange } from './src/main/ets/PAGVideoRange'
 
 export { PAG } from './src/main/ets/PAG'
+
+export { PAGDiskCache } from './src/main/ets/PAGDiskCache'
+
+export { PAGImageView, PAGImageViewController, PAGImageViewListener } from './src/main/ets/PAGImageView'

ohos/libpag/src/main/cpp/types/libpag/Index.d.ts

@@ -299,6 +299,8 @@ export declare class JPAGSurface {
   updateSize(): void;
 
   makeSnapshot(): image.PixelMap | null;
+
+  updateSize(): void;
 }
 
 export declare class JPAGView {
@@ -451,4 +453,54 @@ export declare class JPAGDiskCache {
   static ReadFile(key: string): ArrayBuffer;
 
   static WriteFile(key: string, data: ArrayBuffer): boolean;
+}
+
+export declare class JPAGImageView {
+  flush(): boolean;
+
+  setComposition(composition: JPAGComposition | null, maxFrameRate: number): void;
+
+  scaleMode(): number;
+
+  setScaleMode(scaleMode: number);
+
+  matrix(): Array<number>;
+
+  setMatrix(matrix: Array<number>);
+
+  cacheAllFramesInMemory(): boolean;
+
+  setCacheAllFramesInMemory(enable: boolean);
+
+  repeatCount(): number;
+
+  setRepeatCount(repeatCount: number): void;
+
+  play(): void;
+
+  isPlaying(): boolean;
+
+  pause(): void;
+
+  setStateChangeCallback(callback: (number) => void): void;
+
+  setProgressUpdateCallback(callback: () => void): void;
+
+  uniqueID(): string;
+
+  setRenderScale(renderScale: number): void;
+
+  renderScale(): number;
+
+  currentFrame(): number;
+
+  setCurrentFrame(progress: number): void;
+
+  numFrames(): number;
+
+  currentImage(): image.PixelMap | null;
+
+  update(): void;
+
+  release();
 }