Revert "ComponentV2装饰器适配"

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

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 3.0.2
+- ImageKnifeAnimatorComponent新增开始、结束、暂停的回调事件
+- 文件缓存数量负数和超过INT最大值时默认为INT最大值
+- 修复宽高不等svg图片显示有毛边
+- 部分静态webp图片有delay属性导致识别成动图,改用getFrameCount识别
+- 修复加载错误图后未去请求排队队列中的请求
+- 子线程本地Resource参数类型转换成number
+- 修改使用hilog记录日志，默认打开debug级别的日志
+- 解码pixelMap默认不可编辑，图形变化可编辑
+- 修改网络请求超时设置
+- 重构代码：抽取ImageKnifeDispatcher子线程requestJob相关代码到ImageKnifeLoader中，降低函数复杂度
+
 ## 3.0.2-rc.1
 - release打包关闭混淆
 

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

@@ -12,82 +12,44 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AnimatorOption, ImageKnifeAnimatorComponent,ImageKnifeOption } from "@ohos/libraryimageknife"
+import { AnimatorOption, ImageKnifeAnimatorComponent } from "@ohos/libraryimageknife"
 
 @Entry
-@ComponentV2
+@Component
 struct ImageAnimatorPage {
-  @Local animatorOption: AnimatorOption = new AnimatorOption({
+  @State animatorOption: AnimatorOption = {
     state: AnimationStatus.Running,
-    iterations: -1,
+    iterations: -1
-    onFinish:()=>{
+  }
-      console.log("ImageKnifeAnimatorComponent animatorOption onFinish")
-    },
-    onStart:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onStart")
-    },
-    onPause:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onPause")
-    },
-    onCancel:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onCancel")
-    },
-    onRepeat:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onRepeat")
-    }
-  })
-  @Local animatorOption1: AnimatorOption = new AnimatorOption({
-    state: AnimationStatus.Initial
-  })
-  @Local animatorOption2: AnimatorOption = new AnimatorOption({
-    state: AnimationStatus.Initial,
-    reverse: true
-  })
   build() {
     Column(){
       Flex(){
-        Button($r('app.string.Play')).onClick(()=>{
+        Button("播放").onClick(()=>{
           this.animatorOption.state = AnimationStatus.Running
         })
-        Button($r('app.string.Pause')).onClick(()=>{
+        Button("暂停").onClick(()=>{
           this.animatorOption.state = AnimationStatus.Paused
         })
-        Button($r('app.string.Stop')).onClick(()=>{
+        Button("停止").onClick(()=>{
           this.animatorOption.state = AnimationStatus.Stopped
         })
-        Button($r('app.string.Infinite_loop')).onClick(()=>{
+        Button("无限循环").onClick(()=>{
           this.animatorOption.iterations = -1
         })
-        Button($r('app.string.Play_once')).onClick(()=>{
+        Button("播放一次").onClick(()=>{
           this.animatorOption.iterations = 1
         })
-        Button($r('app.string.Play_twice')).onClick(()=>{
+        Button("播放两次").onClick(()=>{
           this.animatorOption.iterations = 2
         })
       }
       ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
+        imageKnifeOption:{
           loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
           placeholderSrc:$r('app.media.loading'),
           errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption
+        },animatorOption:this.animatorOption
-      }).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
+      }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
-      Text($r('app.string.Display_the_first_frame')).fontSize(20)
-      ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption1
-      }).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
-      Text($r('app.string.Display_the_last_frame')).fontSize(20)
-      ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption2
-      }).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
     }.width("100%").height("100%")
   }
 }

entry/src/main/ets/pages/ImageTransformation.ets

@@ -35,17 +35,17 @@ import {
 import { collections } from '@kit.ArkTS'
 
 @Entry
-@ComponentV2
+@Component
 struct ImageTransformation {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption: ImageKnifeOption = {
     loadSrc: $r('app.media.pngSample'),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Contain
-  })
+  }
-  @Local isRound: boolean = false;
+  @State isRound: boolean = false;
-  @Local isContrast: boolean = false;
+  @State isContrast: boolean = false;
-  @Local isRotate: boolean = false;
+  @State isRotate: boolean = false;
   isBlur: boolean = false
   isBrightness: boolean = false
   isGrayScale: boolean = false;
@@ -412,14 +412,14 @@ struct ImageTransformation {
     if (this.isMask) {
       transformations.push(new MaskTransformation($r('app.media.mask_starfish')));
     }
-    this.imageKnifeOption = new ImageKnifeOption({
+    this.imageKnifeOption = {
       loadSrc: $r('app.media.pngSample'),
       placeholderSrc: $r("app.media.loading"),
       errorholderSrc: $r("app.media.app_icon"),
       objectFit: ImageFit.Contain,
       border: { radius: this.isRound ? { topLeft: 50, bottomRight: 50 } : 0 },
       transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined
-    })
+    }
     if (this.isCropCircle) {
       this.imageKnifeOption.objectFit = ImageFit.Cover;
       this.imageKnifeOption.border = { radius: 150 };

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

@@ -15,7 +15,7 @@
 import router from '@system.router';
 
 @Entry
-@ComponentV2
+@Component
 struct Index {
 
   getResourceString(res:Resource){

entry/src/main/ets/pages/ListPage.ets

@@ -15,11 +15,11 @@
 import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife';
 
 @Entry
-@ComponentV2
+@Component
 struct ListPage {
 
   private data: string[] = []
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon')})
+  @State ImageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.startIcon')}
 
 
   aboutToAppear(): void {

entry/src/main/ets/pages/LoadStatePage.ets

@@ -16,12 +16,12 @@ import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/libraryimageknife"
 import matrix4 from '@ohos.matrix4'
 
 @Entry
-@ComponentV2
+@Component
 struct LoadStatePage {
 
   starTime:number = new Date().getTime()
 
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State ImageKnifeOption: ImageKnifeOption = {
     loadSrc: $r("app.media.rabbit"),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
@@ -35,22 +35,22 @@ struct LoadStatePage {
       },
     },
     border: { radius: 50 }
-  })
+  }
-  @Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption1: ImageKnifeOption = {
     loadSrc: $r('app.media.startIcon')
-  })
+  }
-  @Local message: string = ""
+  @State message: string = ""
-  @Local currentWidth: number = 200
+  @State currentWidth: number = 200
-  @Local currentHeight: number = 200
+  @State currentHeight: number = 200
-  @Local typeValue: string = ""
+  @State typeValue: string = ""
   build() {
     Column() {
-      Text($r('app.string.TIPS'))
+      Text('测试失败场景请先关闭网络，并保证本地没有此网络图片的缓存')
         .margin({ top: 20 })
       Row() {
-        Button($r('app.string.Test_failure_success'))
+        Button('测试失败/成功场景')
           .onClick(() => {
-            this.ImageKnifeOption = new ImageKnifeOption({
+            this.ImageKnifeOption = {
               loadSrc: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
               placeholderSrc: $r("app.media.loading"),
               errorholderSrc: $r("app.media.app_icon"),
@@ -75,15 +75,15 @@ struct LoadStatePage {
               onComplete:(event)=>{
                 console.error("Load onComplete width:"+event?.width , " height:"+event?.height , " componentWidth:"+event?.componentWidth," componentHeight:" + event?.componentHeight);
               }
-            })
+            }
           })
       }
       .margin({ top: 20 })
       Text(this.typeValue)
       ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth)
         .margin({ top: 20 })
-      Button($r('app.string.Custom_download_failed')).onClick(()=>{
+      Button("自定义下载失败").onClick(()=>{
-        this.imageKnifeOption1 = new ImageKnifeOption({
+        this.imageKnifeOption1 = {
           loadSrc: "abc",
           placeholderSrc:$r('app.media.loading'),
           errorholderSrc:$r('app.media.failed'),
@@ -93,7 +93,7 @@ struct LoadStatePage {
               this.message = "err:" + err
             }
           }
-        })
+        }
       }).margin({ top: 20 })
       Text(this.message).fontSize(20).margin({ top: 20 })
       ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).height(this.currentHeight).width(this.currentWidth)

entry/src/main/ets/pages/LongImagePage.ets

@@ -12,10 +12,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
+import { ImageKnifeComponent } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct LongImagePage {
 
   build() {
@@ -25,13 +25,13 @@ struct LongImagePage {
 
    // Image($r("app.media.aaa")).objectFit(ImageFit.Auto).width(200)
       ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
+        imageKnifeOption: {
           loadSrc:"https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
           //src:$r("app.media.aaa"),
           placeholderSrc: $r("app.media.loading"),
           errorholderSrc: $r("app.media.failed"),
           objectFit: ImageFit.Auto
-        })
+        }
       })
     }
     .height('100%') .width('100%')

entry/src/main/ets/pages/ManyPhotoShowPage.ets

@@ -12,12 +12,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BlurTransformation, ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife';
+import { ImageKnifeComponent } from '@ohos/libraryimageknife';
 
 
 
 @Entry
-@ComponentV2
+@Component
 struct ManyPhotoShowPage {
   private data: TestDataSource = new TestDataSource();
 
@@ -36,16 +36,15 @@ struct ManyPhotoShowPage {
                 //   loadSrc: item.thumbnail,
                 //   mainScaleType: ScaleType.FIT_XY,
                 // } })
-                ImageKnifeComponent({imageKnifeOption:new ImageKnifeOption({
+                ImageKnifeComponent({imageKnifeOption:{
                   loadSrc: item.thumbnail,
                   //src:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
                   //  src: this.localFile,
                   placeholderSrc:$r("app.media.loading"),
                   errorholderSrc:$r("app.media.failed"),
                   objectFit: ImageFit.Auto,
-                  border: {radius:50},
+                  border: {radius:50}
-                  transformation:new BlurTransformation(5)
+                }})
-                })})
               }
               .width(56).height(56)
               //滤镜标题

entry/src/main/ets/pages/ObjectFitPage.ets

@@ -15,49 +15,49 @@
 import { ImageKnife, ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct ObjectFitPage {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption: ImageKnifeOption = {
     loadSrc: $r("app.media.app_icon"),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Fill
-  })
+  }
 
   build() {
     Column() {
 
-      Button($r('app.string.Main_image_Fill')).onClick(()=>{
+      Button("主图Fill拉伸填充").onClick(()=>{
-        this.imageKnifeOption = new ImageKnifeOption({
+        this.imageKnifeOption = {
           loadSrc: $r("app.media.app_icon"),
           placeholderSrc: $r("app.media.loading"),
           errorholderSrc: $r("app.media.app_icon"),
           objectFit: ImageFit.Fill
-        })
+        }
       })
 
-      Button($r('app.string.Maintain_proportion_filling')).margin({top:10}).onClick(async () => {
+      Button("占位图Contain保持比例填充").margin({top:10}).onClick(async () => {
         ImageKnife.getInstance().removeAllMemoryCache()
         await ImageKnife.getInstance().removeAllFileCache()
 
-        this.imageKnifeOption = new ImageKnifeOption({
+        this.imageKnifeOption = {
           loadSrc: "https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
           placeholderSrc: $r("app.media.app_icon"),
           errorholderSrc: $r("app.media.app_icon"),
           objectFit: ImageFit.Fill,
           placeholderObjectFit: ImageFit.Contain
-        })
+        }
       })
 
 
-      Button($r('app.string.Error_graph_None')).margin({top:10}).onClick(() => {
+      Button("错误图None不变化").margin({top:10}).onClick(() => {
-        this.imageKnifeOption = new ImageKnifeOption({
+        this.imageKnifeOption = {
           loadSrc: "http://xxxxx",
           placeholderSrc: $r("app.media.loading"),
           errorholderSrc: $r("app.media.app_icon"),
           objectFit: ImageFit.Fill,
           errorholderObjectFit: ImageFit.None
-        })
+        }
       })
 
       ImageKnifeComponent({

entry/src/main/ets/pages/SignatureTestPage.ets

@@ -16,18 +16,18 @@ import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife';
 
 
 @Entry
-@ComponentV2
+@Component
 struct SignatureTestPage {
-  @Local imageKnifeOption1: ImageKnifeOption =new ImageKnifeOption(
+  @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.icon'),
       placeholderSrc:$r("app.media.loading"),
-    });
+    };
-  @Local imageKnifeOption2: ImageKnifeOption =new ImageKnifeOption(
+  @State imageKnifeOption2: ImageKnifeOption =
     {
       loadSrc: $r('app.media.icon'),
       placeholderSrc:$r("app.media.loading"),
-    });
+    };
 
   build() {
     Scroll() {
@@ -37,11 +37,11 @@ struct SignatureTestPage {
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Button($r('app.string.Load'))
             .onClick(() => {
-              this.imageKnifeOption1 = new ImageKnifeOption({
+              this.imageKnifeOption1 = {
                 loadSrc: 'https://img-blog.csdn.net/20140514114029140',
                 placeholderSrc:$r("app.media.loading"),
                 signature: "1"
-              })
+              }
             }).margin({ top: 5, left: 3 })
           ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width('100%').backgroundColor(Color.Pink)
@@ -50,11 +50,11 @@ struct SignatureTestPage {
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Button($r('app.string.Load'))
             .onClick(() => {
-              this.imageKnifeOption2 = new ImageKnifeOption({
+              this.imageKnifeOption2 = {
                 loadSrc: 'https://img-blog.csdn.net/20140514114029140',
                 placeholderSrc:$r("app.media.loading"),
                 signature: new Date().getTime().toString()
-              })
+              }
             }).margin({ top: 5, left: 3 })
           ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
         }.width('100%').backgroundColor(Color.Pink)

entry/src/main/ets/pages/SingleImage.ets

@@ -12,19 +12,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ImageKnifeComponent,BlurTransformation,ImageKnifeOption } from '@ohos/libraryimageknife';
+import { ImageKnifeComponent,BlurTransformation } from '@ohos/libraryimageknife';
 import fs from '@ohos.file.fs';
 import image from '@ohos.multimedia.image';
 import { common2D, drawing } from '@kit.ArkGraphics2D';
 
 @Entry
-@ComponentV2
+@Component
 struct SingleImage {
   resource: string = "app.media.svgSample"
   scroller: Scroller = new Scroller;
   localFile: string = getContext(this).filesDir + "/icon.png"
-  @Local pixelMap:PixelMap | undefined = undefined;
+  @State pixelMap:PixelMap | undefined = undefined;
-  @Local DrawingColorFilter: ColorFilter | undefined = undefined
+  @State DrawingColorFilter: ColorFilter | undefined = undefined
   private color: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 };
   aboutToAppear(): void {
     // 拷贝本地文件
@@ -46,12 +46,12 @@ struct SingleImage {
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
+          imageKnifeOption: {
             loadSrc: $r("app.media.svgSample"),
             placeholderSrc: $r("app.media.loading"),
             errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain
-          })
+          }
         }).width(100).height(100)
           .onClick(()=>{
             this.DrawingColorFilter = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
@@ -60,48 +60,48 @@ struct SingleImage {
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
+          imageKnifeOption: {
             loadSrc: this.localFile,
             placeholderSrc: $r("app.media.loading"),
             errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain
-          })
+          }
         }).width(100).height(100)
         Text($r('app.string.Network_images'))
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
+          imageKnifeOption: {
             loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
             placeholderSrc: $r("app.media.loading"),
             errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain,
             progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)}
-          })
+          }
         }).width(100).height(100)
         Text($r('app.string.Custom_network_download'))
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
+          imageKnifeOption: {
             loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
             placeholderSrc: $r("app.media.loading"),
             errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain,
             customGetImage: custom,
             transformation: new BlurTransformation(10)
-          })
+          }
         }).width(100).height(100)
         Text($r('app.string.PixelMap_loads_images'))
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
+          imageKnifeOption: {
             loadSrc: this.pixelMap!,
             placeholderSrc: $r("app.media.loading"),
             errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain,
-          })
+          }
         }).width(100).height(100)
       }
       .width('100%')

entry/src/main/ets/pages/TestCommonImage.ets

@@ -12,10 +12,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ImageKnifeComponent ,ImageKnifeOption} from '@ohos/libraryimageknife';
+import { ImageKnifeComponent } from '@ohos/libraryimageknife';
 
 @Entry
-@ComponentV2
+@Component
 struct TestCommonImage {
   private data: Array<string> = []
   aboutToAppear(): void {
@@ -30,13 +30,13 @@ struct TestCommonImage {
           FlowItem() {
             Column(){
               ImageKnifeComponent({
-                imageKnifeOption: new ImageKnifeOption({
+                imageKnifeOption: {
                   loadSrc: item,
                   placeholderSrc: $r("app.media.loading"),
                   errorholderSrc: $r("app.media.failed"),
                   objectFit: ImageFit.Contain,
                   signature: "aaa"
-                })
+                }
               }).width("50%").height(200)
             }
           }.height(200)

entry/src/main/ets/pages/TestErrorHolderPage.ets

@@ -12,34 +12,34 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
+import { ImageKnifeComponent } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct TestErrorHolderPage {
 
   build() {
     Column() {
       Text("ImageKnifeComponent1").fontSize(20)
       ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
+        imageKnifeOption: {
           loadSrc: "abc",
           errorholderSrc:$r('app.media.failed')
-        })
+        }
       }).width(200).height(200)
       Text("ImageKnifeComponent2").fontSize(20)
       ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
+        imageKnifeOption: {
           loadSrc: "abc",
           errorholderSrc:$r('app.media.startIcon')
-        })
+        }
       }).width(200).height(200)
       Text("ImageKnifeComponent2").fontSize(20)
       ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
+        imageKnifeOption: {
           loadSrc: "abc",
           errorholderSrc:$r('app.media.mask_starfish')
-        })
+        }
       }).width(200).height(200)
     }
     .height('100%') .width('100%')

entry/src/main/ets/pages/TestHeader.ets

@@ -15,9 +15,9 @@
 import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct TestPrefetchToFileCachePage {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption: ImageKnifeOption = {
     loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
     placeholderSrc:$r('app.media.loading'),
     headerOption:[
@@ -26,7 +26,7 @@ struct TestPrefetchToFileCachePage {
         value:"单个"
       }
     ]
-  })
+  }
 
   build() {
     Column() {

entry/src/main/ets/pages/TestHspPreLoadImage.ets

@@ -15,7 +15,7 @@
 import { IndexComponent } from "@ohos/libraryimageknife"
 
 @Entry
-@ComponentV2
+@Component
 struct TestHspPreLoadImage {
   build() {
     Column() {

entry/src/main/ets/pages/TestImageFlash.ets

@@ -12,9 +12,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
+import { ImageKnifeComponent } from '@ohos/libraryimageknife'
 
-@ObservedV2
+@Observed
 export class MsgModel {
   id: string
   cId: string
@@ -30,10 +30,10 @@ export class MsgModel {
 }
 
 
-// @Reusable
+@Reusable
-@ComponentV2
+@Component
 export struct MsgItem {
-  @Param count: number = 0
+  count: number = 0
   private data: Array<string> = [
     "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
     "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
@@ -59,37 +59,37 @@ export struct MsgItem {
   build(){
     if (this.count % 2 == 0 && this.count <6){
       ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
+        imageKnifeOption:{
           loadSrc:$r("app.media.startIcon"),
           placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
+        },syncLoad:true
       })
     }else if (this.count > 6 && this.count - 6 < this.data.length){
       ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
+        imageKnifeOption:{
           loadSrc:this.data[this.count - 6],
           placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
+        },syncLoad:true
       })
     }else {
       ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
+        imageKnifeOption:{
           loadSrc:$r("app.media.pngSample"),
           placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
+        },syncLoad:true
       })
     }
   }
 }
 
 @Entry
-@ComponentV2
+@Component
 struct ImageTestPage {
   count : number = 0
   rCount: number = 0
   scroller: Scroller = new Scroller()
-  @Local list: MsgModel[] = []
+  @State list: MsgModel[] = []
-  @Local imageSize: number =100
+  @State imageSize: number =100
   handAdd(){
     this.count++
     const msgItem = new MsgModel('add_id'+this.count, 'addBody'+this.count,'cId'+ this.count)

entry/src/main/ets/pages/TestIsUrlExist.ets

@@ -15,15 +15,15 @@
 import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct TestIsUrlExist {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption: ImageKnifeOption = {
     loadSrc: $r('app.media.startIcon'),
     placeholderSrc: $r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  })
+  }
-  @Local source: PixelMap | string | Resource = $r("app.media.startIcon")
+  @State source: PixelMap | string | Resource = $r("app.media.startIcon")
-  @Local source1: PixelMap | string | Resource = $r("app.media.startIcon")
+  @State source1: PixelMap | string | Resource = $r("app.media.startIcon")
 
   build() {
     Column() {

entry/src/main/ets/pages/TestPrefetchToFileCache.ets

@@ -15,19 +15,19 @@
 import { ImageKnifeComponent,ImageKnife,ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct TestPrefetchToFileCachePage {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption: ImageKnifeOption = {
     loadSrc:$r('app.media.startIcon'),
     placeholderSrc:$r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  })
+  }
   async preload(url:string) {
     let fileCachePath = await ImageKnife.getInstance().preLoadCache(url)
     console.log("preload-fileCachePath=="+ fileCachePath)
   }
   async preload1(url:string) {
-    let fileCachePath = await ImageKnife.getInstance().preLoadCache(new ImageKnifeOption({ loadSrc: url }))
+    let fileCachePath = await ImageKnife.getInstance().preLoadCache({ loadSrc: url })
     console.log("preload-fileCachePath1=="+ fileCachePath)
   }
   build() {

entry/src/main/ets/pages/TestRemoveCache.ets

@@ -15,16 +15,16 @@
 import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct TestRemoveCache {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption: ImageKnifeOption = {
     loadSrc: $r('app.media.startIcon'),
     placeholderSrc: $r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  })
+  }
-  @Local source: PixelMap | string | Resource = $r("app.media.startIcon");
+  @State source: PixelMap | string | Resource = $r("app.media.startIcon");
-  @Local source1: PixelMap | string | Resource = $r("app.media.startIcon");
+  @State source1: PixelMap | string | Resource = $r("app.media.startIcon");
-  @Local url: string = '';
+  @State url: string = '';
 
   build() {
     Column() {

entry/src/main/ets/pages/TestSetCustomImagePage.ets

@@ -15,17 +15,12 @@
 import { ImageKnifeComponent, ImageKnife, ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct TestSetCustomImagePage {
-
+  @State imageKnifeOption: ImageKnifeOption = {
-  getResourceString(res:Resource){
-    return getContext().resourceManager.getStringSync(res.id)
-  }
-
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
     loadSrc: $r('app.media.startIcon'),
     placeholderSrc: $r('app.media.loading')
-  })
+  }
   aboutToAppear(): void {
     ImageKnife.getInstance().setCustomGetImage(custom)
   }
@@ -34,23 +29,23 @@ struct TestSetCustomImagePage {
   }
   build() {
     Column() {
-      Button(this.getResourceString($r('app.string.Custom_network_download')) + " a").onClick(()=>{
+      Button("自定义下载a").onClick(()=>{
-        this.imageKnifeOption = new ImageKnifeOption({
+        this.imageKnifeOption = {
           loadSrc: "aaa",
           placeholderSrc: $r('app.media.loading')
-        })
+        }
       })
-      Button(this.getResourceString($r('app.string.Custom_network_download')) + " b").onClick(()=>{
+      Button("自定义下载b").onClick(()=>{
-        this.imageKnifeOption = new ImageKnifeOption({
+        this.imageKnifeOption = {
           loadSrc: "bbb",
           placeholderSrc: $r('app.media.loading')
-        })
+        }
       })
-      Button(this.getResourceString($r('app.string.Custom_network_download')) + " c").onClick(()=>{
+      Button("自定义下载c").onClick(()=>{
-        this.imageKnifeOption = new ImageKnifeOption({
+        this.imageKnifeOption = {
           loadSrc: "ccc",
           placeholderSrc: $r('app.media.loading')
-        })
+        }
       })
       ImageKnifeComponent({
         imageKnifeOption: this.imageKnifeOption

entry/src/main/ets/pages/TestTaskResourcePage.ets

@@ -24,12 +24,12 @@ export struct ZuImage {
     if (this.src) {
       //当前版本存在bug
       ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
+        imageKnifeOption: {
           loadSrc: this.src,
           placeholderSrc: this.placeholderSrc,
           errorholderSrc: this.errorholderSrc ?? this.placeholderSrc,
           objectFit: ImageFit.Cover
-        })
+        }
       })
     } else {
       Image(this.placeholderSrc)

entry/src/main/ets/pages/TestWriteCacheStage.ets

@@ -15,55 +15,55 @@
 import { ImageKnifeComponent,CacheStrategy,ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@ComponentV2
+@Component
 struct TestWriteCacheStage {
-  @Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption1: ImageKnifeOption = {
     loadSrc:$r('app.media.startIcon'),
     placeholderSrc:$r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  })
+  }
-  @Local imageKnifeOption2: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption2: ImageKnifeOption = {
     loadSrc:$r('app.media.startIcon'),
     placeholderSrc:$r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  })
+  }
-  @Local imageKnifeOption3: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption3: ImageKnifeOption = {
     loadSrc:$r('app.media.startIcon'),
     placeholderSrc:$r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  })
+  }
 
   build() {
     Column() {
-      Button($r('app.string.Write_memory_and_file')).margin({top:10}).onClick(async ()=>{
+      Button("写入内存文件缓存").margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption1 = new ImageKnifeOption({
+        this.imageKnifeOption1 = {
           loadSrc:'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
           placeholderSrc:$r('app.media.loading'),
           errorholderSrc:$r('app.media.failed'),
           writeCacheStrategy:CacheStrategy.Default
-        })
+        }
       })
       ImageKnifeComponent({
         imageKnifeOption: this.imageKnifeOption1
       }).width(200).height(200).margin({top:10})
-      Button($r('app.string.Write_memory')).margin({top:10}).onClick(async ()=>{
+      Button("写入内存缓存").margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption2 = new ImageKnifeOption({
+        this.imageKnifeOption2 = {
           loadSrc:"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
           placeholderSrc:$r('app.media.loading'),
           errorholderSrc:$r('app.media.failed'),
           writeCacheStrategy:CacheStrategy.Memory
-        })
+        }
       })
       ImageKnifeComponent({
         imageKnifeOption: this.imageKnifeOption2
       }).width(200).height(200).margin({top:10})
-      Button($r('app.string.Write_file')).margin({top:10}).onClick(async ()=>{
+      Button("写入文件缓存").margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption3 = new ImageKnifeOption({
+        this.imageKnifeOption3 = {
           loadSrc:'https://img-blog.csdn.net/20140514114029140',
           placeholderSrc:$r('app.media.loading'),
           errorholderSrc:$r('app.media.failed'),
           writeCacheStrategy:CacheStrategy.File
-        })
+        }
       })
       ImageKnifeComponent({
         imageKnifeOption: this.imageKnifeOption3

entry/src/main/ets/pages/TransformPage.ets

@@ -17,17 +17,17 @@ import matrix4 from '@ohos.matrix4'
 
 
 @Entry
-@ComponentV2
+@Component
 struct TransformPage {
   private custom_scale:number = 1
-  @Local matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
+  @State matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State ImageKnifeOption: ImageKnifeOption = {
     loadSrc: $r("app.media.rabbit"),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Contain,
     border: { radius: 50 }
-  })
+  }
 
   build() {
     Column() {

entry/src/main/ets/pages/User.ets

@@ -15,50 +15,24 @@
 import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
 
 // const logger = new imUtils.logger.IMLogger('Avatar')
-@ObservedV2
+
-export class MyStorage {
+class MyImageOption extends ImageKnifeOption {
-  static instance:MyStorage | undefined = undefined
+  account?: string
-  static getInstance(){
-    if(MyStorage.instance == undefined) {
-      MyStorage.instance = new MyStorage()
-    }
-    return MyStorage.instance
-  }
-  @Trace WeLink_Mob_fontSize_multiple: number = 1
 }
 
-@ComponentV2
+@Component
 export struct UserAvatar {
+  @Prop @Watch('userInfoUpdate') userInfo: string = ""
   // @Prop userInfo: string = ""
   imgSize: number = 100
   radius: number = 12
   borderSize: number = 0
   imgSizes: number = 1
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @State ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @StorageProp('WeLink_Mob_fontSize_multiple') @Watch('updateImgSize') WeLink_Mob_fontSize_multiple: number = 0
   scalable: boolean = true;
-  @Local calcImgSize: number = 100
+  @State calcImgSize: number = 100
-  @Param userInfo: string = ""
+
-  @Monitor('userInfo')
-  userInfoUpdate() {
-    // if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return;
-    // // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`)
-    // if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime()
-    //   .toString() === this.imageKnifeOption?.signature?.getKey()) return;
-    this.ImageKnifeOption = new ImageKnifeOption({
-      //TODO:写死loadSRC，场景：变更组件大小，所有图片不显示
-      loadSrc: this.userInfo,
-      placeholderSrc: $r('app.media.loading'),
-      errorholderSrc: $r('app.media.failed'),
-      border: { radius:20,width:5,color:$r('app.color.start_window_background') },
-      objectFit:ImageFit.Contain
-      // signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString())
-    })
-  }
-  @Local storage: MyStorage = MyStorage.getInstance()
-  @Monitor('storage.WeLink_Mob_fontSize_multiple')
-  updateImgSize() {
-    this.setImageSize()
-  }
   aboutToAppear(): void {
     this.userInfoUpdate()
     this.setImageSize()
@@ -67,19 +41,39 @@ export struct UserAvatar {
   setImageSize() {
     if (!this.scalable) {
       this.calcImgSize = this.imgSize
-    } else if (this.storage.WeLink_Mob_fontSize_multiple < 0.9) {
+    } else if (this.WeLink_Mob_fontSize_multiple < 0.9) {
       this.calcImgSize = this.imgSize * 0.9
-    } else if (this.storage.WeLink_Mob_fontSize_multiple > 1.6) {
+    } else if (this.WeLink_Mob_fontSize_multiple > 1.6) {
       this.calcImgSize = this.imgSize * 1.6
     } else {
-      this.calcImgSize = this.imgSize * this.storage.WeLink_Mob_fontSize_multiple
+      this.calcImgSize = this.imgSize * this.WeLink_Mob_fontSize_multiple
     }
   }
 
+  updateImgSize() {
+    this.setImageSize()
+  }
+
   aboutToReuse(param: ESObject) {
     this.userInfoUpdate()
   }
 
+  userInfoUpdate() {
+    // if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return;
+    // // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`)
+    // if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime()
+    //   .toString() === this.imageKnifeOption?.signature?.getKey()) return;
+    this.ImageKnifeOption = {
+      //TODO:写死loadSRC，场景：变更组件大小，所有图片不显示
+      loadSrc: this.userInfo,
+      placeholderSrc: $r('app.media.loading'),
+      errorholderSrc: $r('app.media.failed'),
+      border: { radius:20,width:5,color:$r('app.color.start_window_background') },
+      objectFit:ImageFit.Contain
+      // signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString())
+    }
+  }
+
   build() {
     Row() {
       // Image(this.imageKnifeOption.loadSrc)

entry/src/main/ets/pages/UserPage.ets

@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { MyStorage, UserAvatar } from './User'
+import { UserAvatar } from './User'
 
 class CommonDataSource <T> implements IDataSource {
   private dataArray: T[] = []
@@ -55,9 +55,9 @@ class CommonDataSource <T> implements IDataSource {
   }
 }
 @Entry
-@ComponentV2
+@Component
 struct Index {
-  @Local hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
+  @State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
   private data:string[] = [
     "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
     "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
@@ -85,42 +85,26 @@ struct Index {
     'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
   ]
   aboutToAppear(): void {
-    MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1
+    this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
+    AppStorage.set("WeLink_Mob_fontSize_multiple",1)
   }
 
   build() {
     Column() {
       Button("bigger").onClick(()=>{
-        MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1.6
+        AppStorage.set("WeLink_Mob_fontSize_multiple",1.6)
       })
       Button("small").onClick(()=>{
-        MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 0.8
+        AppStorage.set("WeLink_Mob_fontSize_multiple",0.8)
       })
       List(){
-        // LazyForEach(this.hotCommendList,(item:string)=>{
+        LazyForEach(this.hotCommendList,(item:string)=>{
-        //   ListItem(){
+          ListItem(){
-        //     ReuseImage({
+            ReuseImage({
-        //       userInfo:item
+              userInfo:item
-        //     }).width("100%").height("100%").backgroundColor(Color.Yellow)
+            }).width("100%").height("100%").backgroundColor(Color.Yellow)
-        //   }.width(200).height(200).margin({bottom:5})
+          }.width(200).height(200).margin({bottom:5})
-        // })
+        })
-        Repeat(this.data)
-          .each((repeatItem)=>{
-            ListItem(){
-              ReuseImage({
-                userInfo:repeatItem.item
-              }).width("100%").height("100%").backgroundColor(Color.Yellow)
-            }.width(200).height(200).margin({bottom:5}).key("reuse")
-          })
-          .key(item => item+"reuse")
-          .virtualScroll()
-          .template("1",(repeatItem)=>{
-            ListItem(){
-              ReuseImage({
-                userInfo:repeatItem.item
-              }).width("100%").height("100%").backgroundColor(Color.Yellow)
-            }.width(200).height(200).margin({bottom:5}).key("reuse")
-          })
       }
       // .cachedCount(20)
       .width("100%")
@@ -131,13 +115,13 @@ struct Index {
 }
 
 
-// @Reusable
+@Reusable
-@ComponentV2
+@Component
 struct ReuseImage {
-  @Param userInfo:string = ""
+  @State userInfo:string = ""
-  // aboutToReuse(params: ESObject): void {
+  aboutToReuse(params: ESObject): void {
-  //   this.userInfo = params.userInfo
+    this.userInfo = params.userInfo
-  // }
+  }
 
   build() {
     Column(){

entry/src/main/ets/pages/dataShareUriLoadPage.ets

@@ -18,15 +18,15 @@ import { photoAccessHelper } from '@kit.MediaLibraryKit';
 
 
 @Entry
-@ComponentV2
+@Component
 struct DataShareUriLoadPage {
-  @Local imageKnifeOption1: ImageKnifeOption =
+  @State imageKnifeOption1: ImageKnifeOption =
-    new ImageKnifeOption({
+    {
       loadSrc: $r('app.media.icon'),
 
       placeholderSrc: $r('app.media.loading'),
       errorholderSrc: $r('app.media.failed')
-    });
+    };
 
 
   build() {
@@ -43,10 +43,10 @@ struct DataShareUriLoadPage {
               let photoViewPicker = new photoAccessHelper.PhotoViewPicker();
               let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
               uris = photoSelectResult.photoUris;
-              this.imageKnifeOption1 = new ImageKnifeOption({
+              this.imageKnifeOption1 = {
                 loadSrc: uris[0],
                 placeholderSrc:$r('app.media.loading')
-              })
+              }
             }).margin({ top: 5, left: 3 })
           ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width('100%').backgroundColor(Color.Pink)

entry/src/ohosTest/ets/test/DefaultJobQueueTest.test.ets

@@ -70,10 +70,10 @@ export default function DefaultJobQueueTest() {
 }
 
 function makeRequest(src: string, context: common.UIAbilityContext, priority?: taskpool.Priority): ImageKnifeRequest {
-  let option: ImageKnifeOption = new ImageKnifeOption({
+  let option: ImageKnifeOption = {
     loadSrc: src,
     priority: priority
-  })
+  }
   return new ImageKnifeRequest(
     option,
     context,

entry/src/ohosTest/ets/test/FileLruCache.test.ets

@@ -153,9 +153,9 @@ export default function FileLruCacheTest() {
     });
     it('fileCacheEngineKey', 0, () => {
       let engineKey: IEngineKey = new DefaultEngineKey()
-      let imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+      let imageKnifeOption: ImageKnifeOption = {
         loadSrc:"abc"
-      })
+      }
       let imageKey = engineKey.generateFileKey(imageKnifeOption.loadSrc,"")
       let imageAnimatorKey = engineKey.generateFileKey(imageKnifeOption.loadSrc,"",true)
       expect(imageKey == imageAnimatorKey).assertFalse()

entry/src/ohosTest/ets/test/ImageKnife.test.ets

@@ -40,10 +40,10 @@ export default function ImageKnifeTest() {
 
     it('removeMemoryCache', 0, async () => {
       let a = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp';
-        let option: ImageKnifeOption = new ImageKnifeOption({
+        let option: ImageKnifeOption = {
           loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
           signature: ''
-        })
+        }
         let key = ImageKnife.getInstance()
           .getEngineKeyImpl()
           .generateMemoryKey('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', ImageKnifeRequestSource.SRC, option)

entry/src/ohosTest/ets/test/MemoryLruCache.test.ets

@@ -122,9 +122,9 @@ export default function MemoryLruCacheTest() {
 
     it('memoryCacheEngineKey', 0, () => {
       let engineKey: IEngineKey = new DefaultEngineKey()
-      let imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+      let imageKnifeOption: ImageKnifeOption = {
         loadSrc:"abc"
-      })
+      }
       let imageKey = engineKey.generateMemoryKey(imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,imageKnifeOption)
       let imageAnimatorKey = engineKey.generateMemoryKey(imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,imageKnifeOption,true)
       expect(imageKey == imageAnimatorKey).assertFalse()

entry/src/ohosTest/ets/test/SendableData.test.ets

@@ -1,52 +0,0 @@
-/*
- * Copyright (C) 2024 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 { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium'
-import { SendableData } from '@ohos/imageknife/src/main/ets/components/imageknife/SendableData'
-
-export default function SendableDataTest() {
-  describe('SendableDataTest',  ()=> {
-    // Defines a test suite. Two parameters are supported: test suite name and test suite function.
-    beforeAll( ()=> {
-      // Presets an action, which is performed only once before all test cases of the test suite start.
-      // This API supports only one parameter: preset action function.
-    })
-    beforeEach( ()=> {
-      // Presets an action, which is performed before each unit test case starts.
-      // The number of execution times is the same as the number of test cases defined by **it**.
-      // This API supports only one parameter: preset action function.
-    })
-    afterEach( ()=> {
-      // Presets a clear action, which is performed after each unit test case ends.
-      // The number of execution times is the same as the number of test cases defined by **it**.
-      // This API supports only one parameter: clear action function.
-    })
-    afterAll( ()=> {
-      // Presets a clear action, which is performed after all test cases of the test suite end.
-      // This API supports only one parameter: clear action function.
-    })
-    it('TestPlaceHolderCacheKey', 0, () => {
-      let value: string = "placeholderRegisterCacheKey";
-      let data: SendableData = new SendableData();
-      data.setPlaceHolderRegisterCacheKey(value);
-      expect(data.getPlaceHolderRegisterCacheKey()).assertEqual(value);
-    })
-    it('TestPlaceHolderMemoryCacheKey', 1, () => {
-      let value: string = "placeholderRegisterMemoryCacheKey";
-      let data: SendableData = new SendableData();
-      data.setPlaceHolderRegisterMemoryCacheKey(value);
-      expect(data.getPlaceHolderRegisterMemoryCacheKey()).assertEqual(value);
-    })
-  })
-}

entry/src/ohosTest/ets/test/customdatafetchclient.test.ets

@@ -1,106 +0,0 @@
-/*
- * Copyright (C) 2024 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 { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium'
-import { DownloadClient } from '@ohos/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient';
-import common from '@ohos.app.ability.common';
-import { GlobalContext } from '../testability/GlobalContext';
-import { CustomDataFetchClient, DataFetchResult, ImageKnifeGlobal, RequestOption } from '@ohos/imageknife';
-
-const BASE_COUNT: number = 2000;
-
-export default function CustomDataFetchClientTest() {
-  describe('CustomDataFetchClientTest', () => {
-    // Defines a test suite. Two parameters are supported: test suite name and test suite function.
-    beforeAll(() => {
-      // Presets an action, which is performed only once before all test cases of the test suite start.
-      // This API supports only one parameter: preset action function.
-    })
-    beforeEach(() => {
-      // Presets an action, which is performed before each unit test case starts.
-      // The number of execution times is the same as the number of test cases defined by **it**.
-      // This API supports only one parameter: preset action function.
-    })
-    afterEach(() => {
-      // Presets a clear action, which is performed after each unit test case ends.
-      // The number of execution times is the same as the number of test cases defined by **it**.
-      // This API supports only one parameter: clear action function.
-    })
-    afterAll(() => {
-      // Presets a clear action, which is performed after all test cases of the test suite end.
-      // This API supports only one parameter: clear action function.
-    })
-    it('TestIsLocalLoadSrc', 0, () => {
-      let path = 'invalid path';
-      let client = new DownloadClient()
-      expect(client.isLocalLoadSrc(undefined, path)).assertFalse();
-      let context: object | undefined = GlobalContext.getInstance().getObject("hapContext");
-      if (context != undefined) {
-        let loadSrc1 = (context as common.UIAbilityContext).filesDir + 'a.jpg';
-        let loadSrc2 = (context as common.UIAbilityContext).cacheDir + 'b.jpg';
-        expect(client.isLocalLoadSrc(context, loadSrc1)).assertTrue();
-        expect(client.isLocalLoadSrc(context, loadSrc2)).assertTrue();
-      }
-    })
-    it('TestLoadData', 1, async () => {
-      let client = new CustomDataFetchClient();
-      let request = new RequestOption();
-      request.loadSrc = $r('app.media.icon');
-      let error = (await client.loadData(request) as DataFetchResult).error as String;
-      expect(error).assertEqual('CustomDataFetchClient request or loadSrc error.');
-    })
-    it('TestLoadData_customGetImage', 2, async () => {
-      let client = new CustomDataFetchClient();
-      let request = new RequestOption();
-      request.loadSrc = 'http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg';
-      request.customGetImage = (context: Context, src: string) => {
-        // 这里是模拟的customGetImage逻辑
-        return Promise.resolve(new DataFetchResult());
-      }
-      console.log('LXH', 'TestLoadData 2 --1 customGetImage is undefined ?' + (request.customGetImage == undefined));
-      let context: object | undefined = GlobalContext.getInstance().getObject("hapContext");
-      let result = await client.loadData(request);
-      if (context != undefined) {
-        console.log('LXH', 'TestLoadData 2 --2');
-        expect(typeof result)
-          .assertEqual(typeof (await request?.customGetImage(context as common.UIAbilityContext, request.loadSrc)));
-      }
-    })
-    it('TestLoadData_combineArrayBuffers', 3, () => {
-      // 创建几个ArrayBuffer作为测试数据
-      const arrayBuffer1 = new ArrayBuffer(4);
-      const uint8Array1 = new Uint8Array(arrayBuffer1);
-      uint8Array1[0] = 1;
-      uint8Array1[1] = 2;
-      uint8Array1[2] = 3;
-      uint8Array1[3] = 4;
-
-      const arrayBuffer2 = new ArrayBuffer(2);
-      const uint8Array2 = new Uint8Array(arrayBuffer2);
-      uint8Array2[0] = 5;
-      uint8Array2[1] = 6;
-      let client = new CustomDataFetchClient();
-      const combinedArrayBuffer = client.combineArrayBuffers([arrayBuffer1, arrayBuffer2]);
-      expect(combinedArrayBuffer.byteLength).assertEqual(6);
-      const combinedUint8Array = new Uint8Array(combinedArrayBuffer);
-      for (let i = 0; i < 4; i++) {
-        expect(combinedUint8Array[i]).assertEqual(uint8Array1[i]);
-      }
-      for (let i = 0; i < 2; i++) {
-        expect(combinedUint8Array[i + 4]).assertEqual(uint8Array2[i]);
-      }
-    });
-  })
-}
-

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);

library/oh-package.json5

@@ -14,7 +14,7 @@
   "main": "index.ets",
   "repository": "https://gitee.com/openharmony-tpc/ImageKnife",
   "type": "module",
-  "version": "3.0.2-rc.1",
+  "version": "3.0.2",
   "dependencies": {
     "@ohos/gpu_transform": "^1.0.2"
   },

library/src/main/ets/ImageKnife.ets

@@ -191,10 +191,10 @@ export class ImageKnife {
    */
   getCacheImage(loadSrc: string,
                 cacheType: CacheStrategy = CacheStrategy.Default, signature?: string): Promise<ImageKnifeData | undefined> {
-    let option: ImageKnifeOption = new ImageKnifeOption({
+    let option: ImageKnifeOption = {
       loadSrc: loadSrc,
       signature:signature
-    })
+    }
     let engineKeyImpl: IEngineKey = this.getEngineKeyImpl();
 
     return new Promise((resolve, reject) => {
@@ -218,7 +218,7 @@ export class ImageKnife {
    */
   putCacheImage(url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) {
     let memoryKey = this.getEngineKeyImpl()
-      .generateMemoryKey(url, ImageKnifeRequestSource.SRC, new ImageKnifeOption({ loadSrc: url, signature: signature }));
+      .generateMemoryKey(url, ImageKnifeRequestSource.SRC, { loadSrc: url, signature: signature });
     let fileKey = this.getEngineKeyImpl().generateFileKey(url, signature);
     let imageKnifeData: ImageKnifeData = { source: pixelMap, imageWidth: 0, imageHeight: 0 };
     switch (cacheType) {
@@ -252,9 +252,9 @@ export class ImageKnife {
     if (url instanceof ImageKnifeOption) {
       imageKnifeOption = url;
     } else {
-      imageKnifeOption = new ImageKnifeOption({
+      imageKnifeOption = {
         loadSrc: url
-      });
+      };
     }
     let key = this.getEngineKeyImpl().generateFileKey(imageKnifeOption.loadSrc, imageKnifeOption.signature);
     if (this.fileCache !== undefined) {

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

@@ -19,14 +19,15 @@ import { ImageKnife } from '../ImageKnife';
 import { LogUtil } from '../utils/LogUtil';
 import { ImageKnifeRequestSource } from '../model/ImageKnifeData';
 
-@ComponentV2
+@Component
 export struct ImageKnifeAnimatorComponent {
-  @Param animatorOption: AnimatorOption = new AnimatorOption();
+  @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
-  @Local pixelMap: PixelMap | string | undefined = undefined
+  @State animatorOption: AnimatorOption = new AnimatorOption();
-  @Local imageAnimator: Array<ImageFrameInfo> | undefined = undefined
+  @State pixelMap: PixelMap | string | undefined = undefined
-  @Local adaptiveWidth: Length = '100%'
+  @State imageAnimator: Array<ImageFrameInfo> | undefined = undefined
-  @Local adaptiveHeight: Length = '100%'
+  @State adaptiveWidth: Length = '100%'
-  @Local objectFit: ImageFit = ImageFit.Contain
+  @State adaptiveHeight: Length = '100%'
+  @State objectFit: ImageFit = ImageFit.Contain
   private request: ImageKnifeRequest | undefined
   private lastWidth: number = 0
   private lastHeight: number = 0
@@ -34,17 +35,7 @@ export struct ImageKnifeAnimatorComponent {
   private currentHeight: number = 0
   private componentVersion: number = 0
   private currentContext: common.UIAbilityContext | undefined = undefined
-  @Param imageKnifeOption: ImageKnifeOption = new ImageKnifeOption();
+
-  @Monitor('imageKnifeOption',
-  "imageKnifeOption.loadSrc","imageKnifeOption.signature","imageKnifeOption.transformation","imageKnifeOption.border","imageKnifeOption.objectFit")
-  watchImageKnifeOption() {
-    if (this.request !== undefined) {
-      this.request.requestState = ImageKnifeRequestState.DESTROY
-    }
-    this.request = undefined
-    this.componentVersion++
-    ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
-  }
   aboutToAppear(): void {
     this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
   }
@@ -95,6 +86,15 @@ export struct ImageKnifeAnimatorComponent {
       .onRepeat(this.animatorOption.onRepeat)
   }
 
+  watchImageKnifeOption() {
+    if (this.request !== undefined) {
+      this.request.requestState = ImageKnifeRequestState.DESTROY
+    }
+    this.request = undefined
+    this.componentVersion++
+    ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight),true)
+  }
+
   getCurrentContext(): common.UIAbilityContext {
     if (this.currentContext == undefined) {
       this.currentContext = getContext(this) as common.UIAbilityContext

library/src/main/ets/components/ImageKnifeComponent.ets

@@ -21,13 +21,14 @@ import { ImageKnifeData, ImageKnifeRequestSource } from '../model/ImageKnifeData
 import { IEngineKey } from '../key/IEngineKey';
 import { DefaultEngineKey } from '../key/DefaultEngineKey';
 
-@ComponentV2
+@Component
 export struct ImageKnifeComponent {
-  @Local pixelMap: PixelMap | string | undefined = undefined
+  @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
-  @Param syncLoad: boolean = false
+  @State pixelMap: PixelMap | string | undefined = undefined
-  @Local adaptiveWidth: Length = '100%'
+  @State syncLoad: boolean = false
-  @Local adaptiveHeight: Length = '100%'
+  @State adaptiveWidth: Length = '100%'
-  @Local objectFit: ImageFit = ImageFit.Contain
+  @State adaptiveHeight: Length = '100%'
+  @State objectFit: ImageFit = ImageFit.Contain
   private request: ImageKnifeRequest | undefined
   private lastWidth: number = 0
   private lastHeight: number = 0
@@ -35,20 +36,6 @@ export struct ImageKnifeComponent {
   private currentHeight: number = 0
   private componentVersion: number = 0
   private currentContext: common.UIAbilityContext | undefined = undefined
-  @Param imageKnifeOption: ImageKnifeOption = new ImageKnifeOption();
-
-  @Monitor('imageKnifeOption',
-  "imageKnifeOption.loadSrc","imageKnifeOption.signature","imageKnifeOption.transformation","imageKnifeOption.border","imageKnifeOption.objectFit")
-  watchImageKnifeOption() {
-    this.clearLastRequest()
-    this.componentVersion++
-    this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
-    LogUtil.log("watchImageKnifeOption execute request:width=" + this.currentWidth + " height= " + this.currentHeight
-      + " loadSrc = " + this.request?.imageKnifeOption.loadSrc
-      + " placeholderSrc = " + this.request?.imageKnifeOption.placeholderSrc
-      + " errorholderSrc = " + this.request?.imageKnifeOption.errorholderSrc)
-    ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
-  }
 
   aboutToAppear(): void {
     this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
@@ -83,7 +70,6 @@ export struct ImageKnifeComponent {
   aboutToRecycle() {
     this.clearLastRequest()
   }
-
   /**
    * 对已DESTROY的组件不再发起请求
    */
@@ -93,7 +79,6 @@ export struct ImageKnifeComponent {
       this.request = undefined
     }
   }
-
   build() {
     Image(this.pixelMap)
       .colorFilter(this.imageKnifeOption.drawingColorFilter)
@@ -109,19 +94,29 @@ export struct ImageKnifeComponent {
         this.currentHeight = newValue.height as number
         this.lastWidth = oldValue.width as number
         this.lastHeight = oldValue.height as number
-
+        if (this.currentWidth <= 0 || this.currentHeight <= 0) {
-        // 条件1: 宽高值均有效,值>0. 条件2：当前宽高与上一次宽高不同
+          // 存在宽或者高为0,此次重回无意义,无需进行request请求
-        if (this.currentWidth > 0 && this.currentHeight > 0 &&
+        } else {
-          (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth)) {
+          // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同  条件2:当前是第一次绘制
-          LogUtil.log("onSizeChange execute request:width=" + this.currentWidth + " height= " + this.currentHeight
+          if (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) {
-            + " loadSrc = " + this.request?.imageKnifeOption.loadSrc
+            LogUtil.log("execute request:width=" + this.currentWidth + " height= " + this.currentHeight)
-            + " placeholderSrc = " + this.request?.imageKnifeOption.placeholderSrc
+            ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
-            + " errorholderSrc = " + this.request?.imageKnifeOption.errorholderSrc)
+          }
-          ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
         }
       })
   }
 
+  watchImageKnifeOption() {
+    this.clearLastRequest()
+    this.componentVersion++
+    this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
+    LogUtil.log("watchImageKnifeOption execute request:width=" + this.currentWidth + " height= " + this.currentHeight
+      + " loadSrc = " + this.request?.imageKnifeOption.loadSrc
+      + " placeholderSrc = " + this.request?.imageKnifeOption.placeholderSrc
+      + " errorholderSrc = " + this.request?.imageKnifeOption.errorholderSrc)
+    ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
+  }
+
   getCurrentContext(): common.UIAbilityContext {
     if (this.currentContext == undefined) {
       this.currentContext = getContext(this) as common.UIAbilityContext
@@ -143,10 +138,24 @@ export struct ImageKnifeComponent {
               return //针对reuse场景，不显示历史图片
             }
             this.pixelMap = pixelMap
-            if (typeof this.pixelMap !== 'string' && this.imageKnifeOption.objectFit === ImageFit.Auto) { //针对静态图高度自适应
+            if (typeof this.pixelMap !== 'string') {
-              let info = await this.pixelMap.getImageInfo()
+              if (this.imageKnifeOption.objectFit === ImageFit.Auto) {
-              this.adaptiveWidth = this.currentWidth
+                let info = await this.pixelMap.getImageInfo()
-              this.adaptiveHeight = info.size.height * this.currentWidth / info.size.width
+
+                this.adaptiveWidth = this.currentWidth
+                this.adaptiveHeight = info.size.height * this.currentWidth / info.size.width
+
+                // if (this.currentWidth / this.currentHeight > info.size.width / info.size.height) {
+                //   this.adaptiveWidth = this.currentWidth
+                //   this.adaptiveHeight = info.size.height * this.currentWidth / this.currentHeight
+                // }
+                // else {
+                //   this.adaptiveWidth = info.size.width * this.currentWidth / this.currentHeight
+                //   this.adaptiveHeight = this.currentHeight
+                // }
+              }
+            } else {
+              //console.info("KKKKKKKKKKK:" + pixelMap)
             }
 
             if (requestSource == ImageKnifeRequestSource.SRC) {
@@ -165,4 +174,8 @@ export struct ImageKnifeComponent {
 
     return this.request
   }
+}
+
+interface KeyCanvas {
+  keyId: string
 }

library/src/main/ets/model/ImageKnifeOption.ets

@@ -22,55 +22,38 @@ export interface HeaderOptions {
   key: string;
   value: Object;
 }
-interface AnimatorType {
+
-  state?: AnimationStatus
+@Observed
-  iterations?: number
-  reverse?: boolean
-  onStart?:()=>void
-  onFinish?:()=>void
-  onPause?:()=>void
-  onCancel?:()=>void
-  onRepeat?:()=>void
-}
-@ObservedV2
 export class AnimatorOption {
-  @Trace
+  @Track
   state?: AnimationStatus = AnimationStatus.Running
-  @Trace
+  @Track
   iterations?: number = -1
-  @Trace
+  @Track
   reverse?: boolean = false
-  @Trace
+  @Track
   onStart?:()=>void
-  @Trace
+  @Track
   onFinish?:()=>void
-  @Trace
+  @Track
   onPause?:()=>void
-  @Trace
+  @Track
   onCancel?:()=>void
-  @Trace
+  @Track
   onRepeat?:()=>void
-  constructor(option?:AnimatorType) {
-    this.state = option?.state
-    this.iterations = option?.iterations
-    this.reverse = option?.reverse
-    this.onStart = option?.onStart
-    this.onFinish = option?.onFinish
-    this.onPause = option?.onPause
-    this.onCancel = option?.onCancel
-    this.onRepeat = option?.onRepeat
-  }
 }
-interface ImageOption {
+
+@Observed
+export class ImageKnifeOption {
   // 主图资源
-  loadSrc: string | PixelMap | Resource
+  loadSrc: string | PixelMap | Resource = "";
   // 占位图
-  placeholderSrc?: string | PixelMap | Resource
+  placeholderSrc?: string | PixelMap | Resource;
   // 失败占位图
-  errorholderSrc?: string | PixelMap | Resource
+  errorholderSrc?: string | PixelMap | Resource;
   headerOption?: Array<HeaderOptions>;
   // 自定义缓存关键字
-  signature?: string
+  signature?: string;
   // 主图填充效果
   objectFit?: ImageFit
   // 占位图填充效果
@@ -82,65 +65,16 @@ interface ImageOption {
   // 缓存策略
   writeCacheStrategy?: CacheStrategy
   // 仅使用缓存加载数据
-  onlyRetrieveFromCache?: boolean;
+  onlyRetrieveFromCache?: boolean = false;
-  priority?: taskpool.Priority
+  priority?: taskpool.Priority = taskpool.Priority.LOW
   context?: common.UIAbilityContext;
   progressListener?: (progress: number) => void;
   transformation?: PixelMapTransformation
   onLoadListener?: OnLoadCallBack | undefined;
   onComplete?:(event:EventImage | undefined) => void
   drawingColorFilter?: ColorFilter | drawing.ColorFilter
-}
+  constructor() {
-@ObservedV2
+
-export class ImageKnifeOption {
-  // 主图资源
-  @Trace loadSrc: string | PixelMap | Resource = "";
-  // 占位图
-  placeholderSrc?: string | PixelMap | Resource;
-  // 失败占位图
-  errorholderSrc?: string | PixelMap | Resource;
-  headerOption?: Array<HeaderOptions>;
-  // 自定义缓存关键字
-  @Trace signature?: string;
-  // 主图填充效果
-  @Trace objectFit?: ImageFit
-  // 占位图填充效果
-  placeholderObjectFit?: ImageFit
-  // 错误图填充效果
-  errorholderObjectFit?: ImageFit
-  customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>
-  @Trace border?: BorderOptions
-  // 缓存策略
-  writeCacheStrategy?: CacheStrategy
-  // 仅使用缓存加载数据
-  onlyRetrieveFromCache?: boolean = false;
-  priority?: taskpool.Priority = taskpool.Priority.LOW
-  context?: common.UIAbilityContext;
-  progressListener?: (progress: number) => void;
-  @Trace transformation?: PixelMapTransformation
-  onLoadListener?: OnLoadCallBack | undefined;
-  onComplete?:(event:EventImage | undefined) => void
-  drawingColorFilter?: ColorFilter | drawing.ColorFilter
-  constructor(option?:ImageOption) {
-    this.loadSrc = option?.loadSrc == undefined ? "" : option?.loadSrc
-    this.placeholderSrc = option?.placeholderSrc
-    this.errorholderSrc = option?.errorholderSrc
-    this.headerOption = option?.headerOption
-    this.signature = option?.signature
-    this.objectFit = option?.objectFit
-    this.placeholderObjectFit = option?.placeholderObjectFit
-    this.errorholderObjectFit = option?.errorholderObjectFit
-    this.customGetImage = option?.customGetImage
-    this.border = option?.border
-    this.writeCacheStrategy = option?.writeCacheStrategy
-    this.onlyRetrieveFromCache = option?.onlyRetrieveFromCache
-    this.priority = option?.priority
-    this.context = option?.context
-    this.progressListener = option?.progressListener
-    this.transformation = option?.transformation
-    this.onLoadListener = option?.onLoadListener
-    this.onComplete = option?.onComplete
-    this.drawingColorFilter = option?.drawingColorFilter
   }
 }
 

sharedlibrary/src/main/ets/pages/Index.ets

@@ -14,11 +14,11 @@
  */
 import { ImageKnife , ImageKnifeComponent ,ImageKnifeOption } from "@ohos/imageknife"
 
-@ComponentV2
+@Component
 export struct IndexComponent {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
+  @State imageKnifeOption: ImageKnifeOption = {
     loadSrc: $r('app.media.startIcon')
-  })
+  }
   build() {
     Column() {
       Button($r('app.string.Preload')).onClick((event: ClickEvent) => {