!39 1.修复ImageKnife绘制部分复杂gif图片，gif图片闪屏显示的问题

Merge pull request !39 from 明月清风/master

AppScope/app.json5

@@ -3,7 +3,7 @@
     "bundleName": "com.openharmony.imageknife",
     "vendor": "example",
     "versionCode": 1000000,
-    "versionName": "1.0.0",
+    "versionName": "2.0.2",
     "icon": "$media:app_icon",
     "label": "$string:app_name",
     "distributedNotificationEnabled": true

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2.0.2
+
+- 修复若干问题：
+
+​      修复ImageKnife绘制部分复杂gif图片，gif图片闪屏显示的问题
+
+​      适配DevEco Studio 版本：4.0 Canary2(4.0.3.312), SDK: API10 (4.0.9.3)
+
+
+
 ## 2.0.1
 
 - 修复若干问题：

README.md

@@ -452,7 +452,7 @@ request.skipMemoryCache(true)
 
 在下述版本验证通过：
 
-DevEco Studio版本: 4.0Canary1(4.0.3.212), SDK: API10(4.0.8.3)
+DevEco Studio 版本：4.0 Canary2(4.0.3.312), SDK: API10 (4.0.9.3)
 
 ## 目录结构
 

entry/oh-package.json5

@@ -1,10 +1,10 @@
 {
-  "license": "ISC",
+  "license": "Apache License 2.0",
   "devDependencies": {},
   "name": "entry",
   "description": "example description",
   "repository": {},
-  "version": "1.0.0",
+  "version": "2.0.2",
   "dependencies": {
     "@ohos/imageknife": "file:../imageknife",
     "@ohos/disklrucache": "^2.0.0"

imageknife/oh-package.json5

@@ -14,7 +14,7 @@
   "main": "index.ets",
   "repository": "https://gitee.com/openharmony-tpc/ImageKnife",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "dependencies": {
     "@ohos/disklrucache": "^2.0.0",
     "@ohos/svg": "^2.0.0",

imageknife/src/main/ets/components/imageknife/ImageKnife.ets

@@ -18,7 +18,7 @@ import { LruCache } from "../cache/LruCache"
 import {EngineKeyFactories} from "../cache/key/EngineKeyFactories"
 import {EngineKeyInterface} from "../cache/key/EngineKeyInterface"
 import {RequestOption} from "../imageknife/RequestOption"
-import {AsyncCallback} from "../imageknife/interface/asynccallback"
+import {AsyncCallback} from "../imageknife/interface/AsyncCallback"
 import {PlaceHolderManager} from "../imageknife/holder/PlaceHolderManager"
 import {RetryHolderManager} from "../imageknife/holder/RetryHolderManager"
 import {ErrorHolderManager} from "../imageknife/holder/ErrorHolderManager"

imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets

@@ -25,17 +25,12 @@ import { LogUtil } from '../imageknife/utils/LogUtil'
 @Component
 export struct ImageKnifeComponent {
   @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
-
+  autoPlay: boolean = true
-  autoPlay:boolean = true
-
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private hasDisplayRetryholder = false;
-
+  private lastWidth: number = 0
-
+  private lastHeight: number = 0
-  private lastWidth:number = 0
-  private lastHeight:number = 0
-
   private currentWidth: number = 0
   private currentHeight: number = 0
 
@@ -82,9 +77,10 @@ export struct ImageKnifeComponent {
     }
 
   }
-  private canvasHasReady:boolean = false;
+  private canvasHasReady: boolean = false;
-  private firstDrawFlag:boolean = false;
+  private firstDrawFlag: boolean = false;
-  private onReadyNext:()=>void = undefined
+  private onReadyNext: () => void = undefined
+
   build() {
     Canvas(this.context)
       .width('100%')
@@ -92,11 +88,11 @@ export struct ImageKnifeComponent {
       .onAreaChange((oldValue: Area, newValue: Area) => {
         this.currentWidth = newValue.width as number
         this.currentHeight = newValue.height as number
-        if(this.currentWidth <=0 || this.currentHeight <=0 ){
+        if (this.currentWidth <= 0 || this.currentHeight <= 0) {
           // 存在宽或者高为0,此次重回无意义,无需进行request请求
-        }else{
+        } else {
           // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同  条件2:当前是第一次绘制
-          if( (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth)  || this.firstDrawFlag){
+          if ((this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag) {
             this.firstDrawFlag = false;
             LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + '  currentHeight=' + this.currentHeight)
             this.lastWidth = this.currentWidth
@@ -107,15 +103,15 @@ export struct ImageKnifeComponent {
       })
       .onReady(() => {
         this.canvasHasReady = true;
-        if(this.onReadyNext){
+        if (this.onReadyNext) {
           LogUtil.log('ImageKnifeComponent onReadyNext is running!')
           this.onReadyNext()
           this.onReadyNext = undefined;
         }
       })
-      .onClick((event:ClickEvent) => {
+      .onClick((event: ClickEvent) => {
         // 需要将点击事件回传
-        if(this.imageKnifeOption.onClick){
+        if (this.imageKnifeOption.onClick) {
           this.imageKnifeOption.onClick(event)
         }
         if (this.imageKnifeOption.canRetryClick && this.hasDisplayRetryholder) {
@@ -134,13 +130,13 @@ export struct ImageKnifeComponent {
    * 给firstDrawFlag置为true,保证size即使没有变化也要进入 请求绘制流程
    * @param drawFirst 是否是aboutToAppear第一次绘制
    */
-  whetherWaitSize(drawFirst?:boolean) {
+  whetherWaitSize(drawFirst?: boolean) {
-    if(this.currentHeight <= 0 || this.currentWidth <= 0){
+    if (this.currentHeight <= 0 || this.currentWidth <= 0) {
       // 宽或者高没有高度,需要等待canvas组件初始化完成
-      if(drawFirst){
+      if (drawFirst) {
         this.firstDrawFlag = true;
       }
-    }else{
+    } else {
       LogUtil.log('ImageKnifeComponent whetherWaitSize 宽高有效 直接发送请求')
       this.imageKnifeExecute()
     }
@@ -157,11 +153,11 @@ export struct ImageKnifeComponent {
    * 待onReady执行的时候执行
    * @param nextFunction 下一个方法
    */
-  runNextFunction(nextFunction:()=>void){
+  runNextFunction(nextFunction: () => void) {
-    if(!this.canvasHasReady){
+    if (!this.canvasHasReady) {
       // canvas未初始化完成
       this.onReadyNext = nextFunction;
-    }else{
+    } else {
       nextFunction();
     }
   }
@@ -170,7 +166,7 @@ export struct ImageKnifeComponent {
     request.load(this.imageKnifeOption.loadSrc)
       .addListener((err, data) => {
         LogUtil.log('ImageKnifeComponent request.load callback')
-        this.runNextFunction(this.displayMainSource.bind(this,data));
+        this.runNextFunction(this.displayMainSource.bind(this, data));
         return false;
       })
 
@@ -202,14 +198,14 @@ export struct ImageKnifeComponent {
     if (this.imageKnifeOption.placeholderSrc) {
       request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
         LogUtil.log('ImageKnifeComponent request.placeholder callback')
-        this.runNextFunction(this.displayPlaceholder.bind(this,data))
+        this.runNextFunction(this.displayPlaceholder.bind(this, data))
 
       })
     }
     if (this.imageKnifeOption.thumbSizeMultiplier) {
       request.thumbnail(this.imageKnifeOption.thumbSizeMultiplier, (data) => {
         LogUtil.log('ImageKnifeComponent request.thumbnail callback')
-        this.runNextFunction(this.displayThumbSizeMultiplier.bind(this,data))
+        this.runNextFunction(this.displayThumbSizeMultiplier.bind(this, data))
       }, this.imageKnifeOption.thumbSizeDelay)
     }
     if (this.imageKnifeOption.errorholderSrc) {
@@ -237,7 +233,7 @@ export struct ImageKnifeComponent {
       request.addProgressListener((percentValue: number) => {
         // 如果进度条百分比 未展示大小,展示其动画
         LogUtil.log('ImageKnifeComponent request.addProgressListener callback')
-        this.runNextFunction(this.displayProgress.bind(this,percentValue))
+        this.runNextFunction(this.displayProgress.bind(this, percentValue))
       })
     }
 
@@ -245,17 +241,15 @@ export struct ImageKnifeComponent {
       request.retryholder(this.imageKnifeOption.retryholderSrc, (data) => {
         LogUtil.log('ImageKnifeComponent request.retryholder callback')
         this.hasDisplayRetryholder = true
-        this.runNextFunction(this.displayRetryholder.bind(this,data))
+        this.runNextFunction(this.displayRetryholder.bind(this, data))
       })
     }
   }
 
-
+  configRenderGpu(request: RequestOption) {
-
+    if (this.imageKnifeOption.enableGpu) {
-  configRenderGpu(request: RequestOption){
-    if(this.imageKnifeOption.enableGpu){
       request.enableGPU()
-    }else{
+    } else {
       // 如果enableGpu未设置则不启动GPU渲染
     }
   }
@@ -676,10 +670,17 @@ export struct ImageKnifeComponent {
     if (index >= 1) {
       let preFrame = frames[index-1]
       disposal = preFrame.disposalType
+
+      if (disposal === FrameDisposalType.DISPOSE_RestoreBackground) {
+        const { width, height, left, top } = preFrame.dims;
+        context.clearRect(left, top, width, height);
       }
+    } else {
       if (disposal === FrameDisposalType.DISPOSE_RestoreBackground) {
         context.clearRect(0, 0, compWidth, compHeight)
       }
+    }
+
     let scaleType = (typeof this.imageKnifeOption.mainScaleType == 'number') ? this.imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
     context.save();
     let frameW = frames[0].dims.left + frames[0].dims.width
@@ -725,7 +726,6 @@ export enum ScaleType {
 }
 
 
-
 export class ScaleTypeHelper {
   static drawImageWithScaleType(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX: number, imageOffsetY: number) {
     let scaleW = compWidth / imageWidth

imageknife/src/main/ets/components/imageknife/RequestOption.ets

@@ -14,7 +14,7 @@
  */
 
 import { DiskStrategy } from "../cache/diskstrategy/DiskStrategy"
-import type { AsyncCallback } from "../imageknife/interface/asynccallback"
+import type { AsyncCallback } from "../imageknife/interface/AsyncCallback"
 import type { AsyncSuccess } from "../imageknife/interface/AsyncSuccess"
 import type { IAllCacheInfoCallback } from "../imageknife/interface/IAllCacheInfoCallback"
 import { AUTOMATIC } from "../cache/diskstrategy/enum/AUTOMATIC"

oh-package.json5

@@ -6,6 +6,6 @@
   "name": "imageknife",
   "description": "example description",
   "repository": {},
-  "version": "1.0.0",
+  "version": "2.0.2",
   "dependencies": {}
 }