ImageKnifeAnimatorComponent补充圆角功能

Signed-off-by: zgf <zenggaofeng2@h-partners.com>

CHANGELOG.md

@@ -3,6 +3,8 @@
 - Dealing with exception scenarios where imageSource.getImageInfo return undefined
 - Fix inability to parse Resource format images of other modules
 - Improve the error logs
+- Fix callback onLoadFailed when taskpool exception occurs
+- ImageKnife AnimatorComponent component adds rounded corner function
 
 ## 3.2.0-rc.2
 - Added callback information for image loading

README_zh.md

@@ -272,16 +272,16 @@ ImageKnifeComponent({ ImageKnifeOption: = {
                 objectFit: ImageFit.Contain,
                 onLoadListener: {
                   onLoadStart: (req) => {
-                    let startCallBackData = JSON.stringify(req?.getImageKnifeData());
+                    let startCallBackData = JSON.stringify(req?.imageKnifeData);
                   },
                   onLoadFailed: (res, req) => {
-                    let failedBackData = res + ";" + JSON.stringify(req?.getImageKnifeData());
+                    let failedBackData = res + ";" + JSON.stringify(req?.imageKnifeData);
                   },
                   onLoadSuccess: (data, imageData, req) => {
-                    let successBackData = JSON.stringify(req?.getImageKnifeData());
+                    let successBackData = JSON.stringify(req?.imageKnifeData);
                   },
                   onLoadCancel: (res, req) => {
-                    let cancelBackData = res + ";" + JSON.stringify(req?.getImageKnifeData());
+                    let cancelBackData = res + ";" + JSON.stringify(req?.imageKnifeData);
                   }
                 },
                 border: { radius: 50 },
@@ -467,5 +467,4 @@ DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)
 
 ## 遗留问题
 
-- ImageKnifeAnimator组件无法设置ImageFit属性
-- ImageKnifeAnimator组件设置border属性无法将图片变为圆角
+- ImageKnifeAnimator组件无法设置ImageFit属性

entry/src/main/ets/pages/ImageAnimatorPage.ets

@@ -69,7 +69,8 @@ struct ImageAnimatorPage {
         imageKnifeOption:{
           loadSrc:'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
           placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
+          errorholderSrc:$r('app.media.failed'),
+          border: { radius: 150 }
         },animatorOption:this.animatorOption
       }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
       Text($r('app.string.Display_the_first_frame')).fontSize(20)

entry/src/main/ets/pages/TestImageKnifeCallbackPage.ets

@@ -94,13 +94,13 @@ struct TestImageKnifeCallbackPage {
                       this.analyzeStartCallBackData(data);
                     },
                     onLoadFailed: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     },
                     onLoadSuccess: (data, imageData, req) => {
-                      this.analyzeSuccessCallBackData(req?.getImageKnifeData());
+                      this.analyzeSuccessCallBackData(req?.imageKnifeData);
                     },
                     onLoadCancel: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     }
                   },
                   border: { radius: 50 },
@@ -124,13 +124,13 @@ struct TestImageKnifeCallbackPage {
                       this.analyzeStartCallBackData(data);
                     },
                     onLoadFailed: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     },
                     onLoadSuccess: (data, imageData, req) => {
-                      this.analyzeSuccessCallBackData(req?.getImageKnifeData());
+                      this.analyzeSuccessCallBackData(req?.imageKnifeData);
                     },
                     onLoadCancel: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     }
                   },
                   border: { radius: 50 },
@@ -153,13 +153,13 @@ struct TestImageKnifeCallbackPage {
                       this.analyzeStartCallBackData(data);
                     },
                     onLoadFailed: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     },
                     onLoadSuccess: (data, imageData, req) => {
-                      this.analyzeSuccessCallBackData(req?.getImageKnifeData());
+                      this.analyzeSuccessCallBackData(req?.imageKnifeData);
                     },
                     onLoadCancel: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     }
                   },
                   border: { radius: 50 },
@@ -185,13 +185,13 @@ struct TestImageKnifeCallbackPage {
                       this.analyzeStartCallBackData(data);
                     },
                     onLoadFailed: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     },
                     onLoadSuccess: (data, imageData, req) => {
-                      this.analyzeSuccessCallBackData(req?.getImageKnifeData());
+                      this.analyzeSuccessCallBackData(req?.imageKnifeData);
                     },
                     onLoadCancel: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     }
                   },
                   border: { radius: 50 },
@@ -215,13 +215,13 @@ struct TestImageKnifeCallbackPage {
                       this.analyzeStartCallBackData(data);
                     },
                     onLoadFailed: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     },
                     onLoadSuccess: (data, imageData, req) => {
-                      this.analyzeSuccessCallBackData(req?.getImageKnifeData());
+                      this.analyzeSuccessCallBackData(req?.imageKnifeData);
                     },
                     onLoadCancel: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     }
                   },
                   border: { radius: 50 },
@@ -244,13 +244,13 @@ struct TestImageKnifeCallbackPage {
                       this.analyzeStartCallBackData(data);
                     },
                     onLoadFailed: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     },
                     onLoadSuccess: (data, imageData, req) => {
-                      this.analyzeSuccessCallBackData(req?.getImageKnifeData());
+                      this.analyzeSuccessCallBackData(req?.imageKnifeData);
                     },
                     onLoadCancel: (res, req) => {
-                      this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                      this.analyzeFailedBackData(res, req?.imageKnifeData);
                     }
                   },
                   border: { radius: 50 },
@@ -276,13 +276,13 @@ struct TestImageKnifeCallbackPage {
                     this.analyzeStartCallBackData(data);
                   },
                   onLoadFailed: (res, req) => {
-                    this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                    this.analyzeFailedBackData(res, req?.imageKnifeData);
                   },
                   onLoadSuccess: (data, imageData, req) => {
-                    this.analyzeSuccessCallBackData(req?.getImageKnifeData());
+                    this.analyzeSuccessCallBackData(req?.imageKnifeData);
                   },
                   onLoadCancel: (res, req) => {
-                    this.analyzeFailedBackData(res, req?.getImageKnifeData());
+                    this.analyzeFailedBackData(res, req?.imageKnifeData);
                   }
                 },
                 border: { radius: 50 },
@@ -331,7 +331,7 @@ struct TestImageKnifeCallbackPage {
   }
 
   analyzeStartCallBackData(req: ImageKnifeRequest | undefined) {
-    let data = req?.getImageKnifeData();
+    let data = req?.imageKnifeData;
     if (data) {
       if (typeof req?.imageKnifeOption.loadSrc == 'string') {
         this.url = req?.imageKnifeOption.loadSrc;

entry/src/main/ets/pages/TestListImageKnifeCallbackPage.ets

@@ -81,16 +81,16 @@ struct TestListImageKnifeCallbackPage {
                   console.log('listCache start:{ url:' + data?.imageKnifeOption.loadSrc +
                     ',componentWidth:' + data?.componentWidth +
                     ',componentHeight:' + data?.componentHeight +
-                    '},' + JSON.stringify(data?.getImageKnifeData()))
+                    '},' + JSON.stringify(data?.imageKnifeData))
                 },
                 onLoadFailed: (res, req) => {
-                  console.log('listCache onLoadFailed:res:' + res + ';' + JSON.stringify(req?.getImageKnifeData()))
+                  console.log('listCache onLoadFailed:res:' + res + ';' + JSON.stringify(req?.imageKnifeData))
                 },
                 onLoadSuccess: (data, imageData,req) => {
-                  console.log('listCache onLoadSuccess:' + JSON.stringify(req?.getImageKnifeData()))
+                  console.log('listCache onLoadSuccess:' + JSON.stringify(req?.imageKnifeData))
                 },
                 onLoadCancel: (res, req) => {
-                  console.log('listCache onLoadCancel:res:' + res + ';' + JSON.stringify(req?.getImageKnifeData()))
+                  console.log('listCache onLoadCancel:res:' + res + ';' + JSON.stringify(req?.imageKnifeData))
                 }
               },
               border: { radius: 50 },

entry/src/ohosTest/ets/test/ImageKnifeOption.test.ets

@@ -44,7 +44,7 @@ export default function ImageKnifeOptionTest() {
         imageWidth: 0,
         imageHeight: 0,
       }
-      let imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+      let imageKnifeOption: ImageKnifeOption = {
         loadSrc: $r("app.media.rabbit"),
         onLoadListener: {
           onLoadFailed: (err) => {
@@ -58,7 +58,7 @@ export default function ImageKnifeOptionTest() {
             return data;
           },
         },
-      })
+      }
       if (imageKnifeOption.onLoadListener && imageKnifeOption.onLoadListener.onLoadSuccess && imageKnifeOption.onLoadListener.onLoadFailed) {
         imageKnifeOption.onLoadListener.onLoadSuccess(a,imageData);
         imageKnifeOption.onLoadListener.onLoadFailed(a);

entry/src/ohosTest/ets/test/loadCallBackData.test.ets

@@ -53,10 +53,10 @@ export default function loadCallBackData() {
       await new Promise<string>((resolve, reject) => {
         imageKnifeOption.onLoadListener = {
           onLoadStart: (data) => {
-            startCallBack = data?.getImageKnifeData();
+            startCallBack = data?.imageKnifeData;
           },
           onLoadSuccess: (data, imageknifeData,req) => {
-            successCallBack = req?.getImageKnifeData();
+            successCallBack = req?.imageKnifeData;
             resolve("")
           },
           onLoadFailed(err) {
@@ -93,7 +93,7 @@ export default function loadCallBackData() {
           onLoadSuccess: (data, imageknifeData) => {
           },
           onLoadFailed(res,req) {
-            failedCallBack = req?.getImageKnifeData();
+            failedCallBack = req?.imageKnifeData;
             resolve(res)
           }
         }

library/src/main/ets/ImageKnifeDispatcher.ets

@@ -64,8 +64,8 @@ export class ImageKnifeDispatcher {
     }
 
     //记录ImageKnifeRequestSource.SRC 开始内存检查的时间点
-    if (requestSource == ImageKnifeRequestSource.SRC && request.getImageKnifeData()) {
-      let timeInfo = request.getImageKnifeData()?.timeInfo
+    if (requestSource == ImageKnifeRequestSource.SRC && request.imageKnifeData) {
+      let timeInfo = request.imageKnifeData?.timeInfo
       if (timeInfo) {
         timeInfo.memoryCheckStartTime = memoryCheckStartTime;
         timeInfo.memoryCheckEndTime = Date.now();
@@ -93,7 +93,7 @@ export class ImageKnifeDispatcher {
           request.requestState = ImageKnifeRequestState.COMPLETE
           // 回调请求开结束
           if (request.imageKnifeOption.onLoadListener?.onLoadSuccess !== undefined) {
-            this.copyMemoryCacheInfo(memoryCache, request.getImageKnifeData());
+            this.copyMemoryCacheInfo(memoryCache, request.imageKnifeData);
             request.imageKnifeOption.onLoadListener.onLoadSuccess(memoryCache.source, memoryCache, request)
             LogUtil.log('ImageKnife_DataTime_MemoryCache_onLoadSuccess:' + request.imageKnifeOption.loadSrc)
           }
@@ -131,7 +131,7 @@ export class ImageKnifeDispatcher {
         afterCallData.timeInfo.memoryCheckEndTime = beforeCallData.timeInfo.memoryCheckEndTime;
       }
     }
-    req.setImageKnifeData(afterCallData);
+    req.imageKnifeData = afterCallData;
   }
 
   private initCallData(request: ImageKnifeRequest) {
@@ -151,7 +151,7 @@ export class ImageKnifeDispatcher {
     callBackData.timeInfo = callBackTimeInfo;
 
     //跟隨請求保存回調信息點
-    request.setImageKnifeData(callBackData);
+    request.imageKnifeData = callBackData;
   }
 
   enqueue(request: ImageKnifeRequest,isAnimator?: boolean): void {
@@ -295,8 +295,23 @@ export class ImageKnifeDispatcher {
         if (isWatchProgress){
           emitter.off(Constants.PROGRESS_EMITTER + memoryKey)
         }
-        this.executingJobMap.remove(memoryKey);
-        this.dispatchNextJob();
+
+        this.doTaskCallback({
+          pixelMap: undefined,
+          bufferSize: 0,
+          fileKey: '',
+          loadFail: 'Fail to requestJob in sub thread src=' + imageSrc + ' err=' + err,
+          imageKnifeData: {
+            source: '',
+            imageWidth: 0,
+            imageHeight: 0,
+            timeInfo: { requestEndTime: Date.now() },
+            errorInfo: {
+              phase: LoadPhase.PHASE_LOAD,
+              code: LoadPixelMapCode.IMAGE_CUSTOM_LOAD_FAILED_CODE,
+            }
+          }
+        }, requestList!, currentRequest, memoryKey, imageSrc, requestSource, isAnimator)
       })
     } else { //主线程请求
       LogUtil.log('ImageKnife_DataTime_getAndShowImage_execute.start(mainthread):' + currentRequest.imageKnifeOption.loadSrc)
@@ -305,8 +320,23 @@ export class ImageKnifeDispatcher {
         emitter.off(Constants.CALLBACK_EMITTER + memoryKey)
         LogUtil.error('Fail to requestJob in main thread src=' + imageSrc + ' err=' + err)
         LogUtil.log('ImageKnife_DataTime_getAndShowImage.end:' + currentRequest.imageKnifeOption.loadSrc)
-        this.executingJobMap.remove(memoryKey);
-        this.dispatchNextJob();
+
+        this.doTaskCallback({
+          pixelMap: undefined,
+          bufferSize: 0,
+          fileKey: '',
+          loadFail: 'Fail to requestJob in main thread src=' + imageSrc + ' err=' + err,
+          imageKnifeData: {
+            source: '',
+            imageWidth: 0,
+            imageHeight: 0,
+            timeInfo: { requestEndTime: Date.now() },
+            errorInfo: {
+              phase: LoadPhase.PHASE_LOAD,
+              code: LoadPixelMapCode.IMAGE_CUSTOM_LOAD_FAILED_CODE,
+            }
+          }
+        }, requestList!, currentRequest, memoryKey, imageSrc, requestSource, isAnimator)
       })
     }
   }
@@ -345,7 +375,7 @@ export class ImageKnifeDispatcher {
         if (requestWithSource.source === ImageKnifeRequestSource.SRC &&
           requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadFailed !== undefined &&
         requestJobResult.loadFail) {
-          this.assembleImageKnifeData(requestWithSource.request.getImageKnifeData(), requestJobResult.imageKnifeData, requestWithSource.request)
+          this.assembleImageKnifeData(requestWithSource.request.imageKnifeData, requestJobResult.imageKnifeData, requestWithSource.request)
           requestWithSource.request.imageKnifeOption.onLoadListener.onLoadFailed(requestJobResult.loadFail,requestWithSource.request);
           LogUtil.log('ImageKnife_DataTime_getAndShowImage_onLoadFailed:'+currentRequest.imageKnifeOption.loadSrc)
         }
@@ -432,7 +462,7 @@ export class ImageKnifeDispatcher {
             if (requestWithSource.request.imageKnifeOption.onLoadListener &&
             requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess) {
               // 回调请求成功
-              this.assembleImageKnifeData(requestWithSource.request.getImageKnifeData(), imageKnifeData,requestWithSource.request);
+              this.assembleImageKnifeData(requestWithSource.request.imageKnifeData, imageKnifeData,requestWithSource.request);
               requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess(imageKnifeData.source,
                 saveCacheImageData, requestWithSource.request);
               LogUtil.log('ImageKnife_DataTime_getAndShowImage_onLoadSuccess:'+currentRequest.imageKnifeOption.loadSrc)
@@ -445,7 +475,7 @@ export class ImageKnifeDispatcher {
             // 回调请求成功
             // 回调请求成功
             //设置失败回调的时间点
-            let callBackData = requestWithSource.request.getImageKnifeData();
+            let callBackData = requestWithSource.request.imageKnifeData;
 
             if (requestJobResult.imageKnifeData && requestJobResult.imageKnifeData.timeInfo) {
               requestJobResult.imageKnifeData.timeInfo.requestCancelTime = Date.now();
@@ -484,7 +514,7 @@ export class ImageKnifeDispatcher {
         break
       }else if (request.requestState == ImageKnifeRequestState.DESTROY && request.imageKnifeOption.onLoadListener?.onLoadCancel) {
         //构建回调错误信息
-        let callBackData = request.getImageKnifeData();
+        let callBackData = request.imageKnifeData;
         if (callBackData) {
           let timeInfo: TimeInfo =  ImageKnifeLoader.getTimeInfo(callBackData)
           timeInfo.requestCancelTime = Date.now();

library/src/main/ets/components/ImageKnifeAnimatorComponent.ets

@@ -61,6 +61,7 @@ export struct ImageKnifeAnimatorComponent {
       .width(this.adaptiveWidth)
       .height(this.adaptiveHeight)
       .border(this.imageKnifeOption.border)
+      .clip(this.imageKnifeOption.border?.radius == undefined ? false : true)
       .state(this.animatorOption.state == undefined ? AnimationStatus.Running : this.animatorOption.state)
       .iterations(this.animatorOption.iterations == undefined ? -1 : this.animatorOption.iterations)
       .reverse(this.animatorOption.reverse == undefined ? false : this.animatorOption.reverse)

library/src/main/ets/model/ImageKnifeRequest.ets

@@ -27,7 +27,7 @@ export class ImageKnifeRequest {
   ImageKnifeRequestCallback: ImageKnifeRequestCallback
   componentVersion: number = 0
   headers: Map<string,Object> = new Map<string,Object>()
-  private imageCallBackData: ImageKnifeData | undefined = undefined;
+  imageKnifeData?: ImageKnifeData
   constructor(option: ImageKnifeOption,
               uIAbilityContext: common.UIAbilityContext,
               width: number,
@@ -54,14 +54,6 @@ export class ImageKnifeRequest {
       }
     })
   }
-
-  setImageKnifeData(data: ImageKnifeData) {
-    this.imageCallBackData = data;
-  }
-
-  getImageKnifeData(): ImageKnifeData | undefined {
-    return this.imageCallBackData
-  }
 }
 
 export enum ImageKnifeRequestState {