!357 适配ComponentV2装饰器

Merge pull request !357 from zgf/master

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.1.0-rc.0
+- ComponentV2装饰器适配
+- imageKnifeOption={...}用法改为new ImageKnifeOption({...})
+- animatorOption={...}用法改为new AnimatorOption({...})
+
 ## 3.0.1
 - 修复animatorOption属性设置初始化值失效
 - 网络请求code为206、204时返回arraybuffer

README.md

@@ -57,12 +57,12 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: {
+  ImageKnifeOption: new ImageKnifeOption({
     loadSrc: $r("app.media.app_icon"),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  }
+  })
 }).width(100).height(100)
 ```
 
@@ -70,12 +70,12 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: {
+  ImageKnifeOption: new ImageKnifeOption({
     loadSrc: this.localFile,
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  }
+  })
 }).width(100).height(100)
 ```
 
@@ -83,12 +83,12 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: {
+  ImageKnifeOption: new ImageKnifeOption({
     loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  }
+  })
 }).width(100).height(100)
 ```
 
@@ -96,13 +96,13 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: {
+  ImageKnifeOption: new ImageKnifeOption({
     loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto,
     customGetImage: custom
- }
+ })
 }).width(100).height(100)
 
 // 自定义实现图片获取方法，如自定义网络下载
@@ -118,33 +118,33 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: {
+  ImageKnifeOption: new ImageKnifeOption({
     loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
     progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
-  }
+  })
 }).width(100).height(100)
 ```
 
 #### 6.支持option传入border，设置边框，圆角
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: 
+ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
 {
    loadSrc: $r("app.media.rabbit"),
    border: {radius:50}
-  }
+  })
 }).width(100).height(100)
 ```
 
 #### 7.支持option图片变换
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: 
+ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
 {
    loadSrc: $r("app.media.rabbit"),
    border: {radius:50},
    transformation: new BlurTransformation(3)
-  }
+  })
 }).width(100).height(100)
 ```
 多种组合变换用法
@@ -154,14 +154,14 @@ let transformations: collections.Array<PixelMapTransformation> = new collections
 transformations.push(new BlurTransformation(5));
 transformations.push(new BrightnessTransformation(0.2));
 ImageKnifeComponent({
-  {
+  imageKnifeOption: new ImageKnifeOption({
   loadSrc: $r('app.media.pngSample'),
   placeholderSrc: $r("app.media.loading"),
   errorholderSrc: $r("app.media.app_icon"),
   objectFit: ImageFit.Contain,
   border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
   transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
-}
+})
 }).width(300)
   .height(300)
   .rotate({ angle: 90 }) // 旋转90度
@@ -172,12 +172,12 @@ ImageKnifeComponent({
 圆形裁剪变换示例
 
 ```
-ImageKnifeComponent({ ImageKnifeOption:
+ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
   {
   loadSrc: $r('app.media.pngSample'),
   objectFit: ImageFit.Cover,
   border: { radius: 150 }
-}
+})
 }).width(300)
   .height(300)
 ```
@@ -185,12 +185,12 @@ ImageKnifeComponent({ ImageKnifeOption:
 圆形裁剪带边框变换示例
 
 ```
-ImageKnifeComponent({ ImageKnifeOption:
+ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
   {
   loadSrc: $r('app.media.pngSample'),
   objectFit: ImageFit.Cover,
   border: { radius: 150, color: Color.Red, width: 5 }
-}
+})
 }).width(300)
   .height(300)
 ```
@@ -199,9 +199,9 @@ ImageKnifeComponent({ ImageKnifeOption:
 
 ```
 ImageKnifeComponent({
-  imageKnifeOption: {
+  imageKnifeOption: new ImageKnifeOption({
     loadSrc: $r('app.media.pngSample')
-  }
+  })
 }).width(300)
   .height(300)
   .contrast(12)
@@ -211,9 +211,9 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  imageKnifeOption: {
+  imageKnifeOption: new ImageKnifeOption({
     loadSrc: $r('app.media.pngSample')
-  }
+  })
 }).width(300)
   .height(300)
   .rotate({angle:90})
@@ -223,7 +223,7 @@ ImageKnifeComponent({
 #### 8.监听图片加载成功与失败
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: 
+ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
 {
    loadSrc: $r("app.media.rabbit"),
    onLoadListener:{
@@ -242,27 +242,27 @@ ImageKnifeComponent({ ImageKnifeOption:
       console.info(err)
     }
    }
-  }
+  })
 }).width(100).height(100)
 ```
 #### 9.ImageKnifeComponent - syncLoad 
 设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
 ```
 ImageKnifeComponent({
-        imageKnifeOption:{
+        imageKnifeOption:new ImageKnifeOption({
           loadSrc:$r("app.media.pngSample"),
           placeholderSrc:$r("app.media.loading")
-        },syncLoad:true
+        }),syncLoad:true
       })
 ```
 #### 10.ImageKnifeAnimatorComponent 示例
 ```
 ImageKnifeAnimatorComponent({
-        imageKnifeOption:{
+        imageKnifeOption:new 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(300).height(300).backgroundColor(Color.Orange).margin({top:30})
 ```
 ## 接口说明
@@ -352,7 +352,7 @@ ImageKnifeAnimatorComponent({
 ## 约束与限制
 
 在下述版本验证通过：  
-DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12
+DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31)
 
 ## 贡献代码
 

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

@@ -12,15 +12,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AnimatorOption, ImageKnifeAnimatorComponent } from "@ohos/libraryimageknife"
+import { AnimatorOption, ImageKnifeAnimatorComponent,ImageKnifeOption } from "@ohos/libraryimageknife"
 
 @Entry
-@Component
+@ComponentV2
 struct ImageAnimatorPage {
-  @State animatorOption: AnimatorOption = {
+  @Local animatorOption: AnimatorOption = new AnimatorOption({
     state: AnimationStatus.Running,
     iterations: -1
-  }
+  })
   build() {
     Column(){
       Flex(){
@@ -44,11 +44,11 @@ struct ImageAnimatorPage {
         })
       }
       ImageKnifeAnimatorComponent({
-        imageKnifeOption:{
+        imageKnifeOption:new 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(300).height(300).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
-@Component
+@ComponentV2
 struct ImageTransformation {
-  @State imageKnifeOption: ImageKnifeOption = {
+  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
     loadSrc: $r('app.media.pngSample'),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Contain
-  }
+  })
-  @State isRound: boolean = false;
+  @Local isRound: boolean = false;
-  @State isContrast: boolean = false;
+  @Local isContrast: boolean = false;
-  @State isRotate: boolean = false;
+  @Local 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 = {
+    this.imageKnifeOption = new 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
-@Component
+@ComponentV2
 struct Index {
 
 

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

@@ -15,11 +15,11 @@
 import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife';
 
 @Entry
-@Component
+@ComponentV2
 struct ListPage {
 
   private data: string[] = []
-  @State ImageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.startIcon')}
+  @Local ImageKnifeOption: ImageKnifeOption = new 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
-@Component
+@ComponentV2
 struct LoadStatePage {
 
   starTime:number = new Date().getTime()
 
-  @State ImageKnifeOption: ImageKnifeOption = {
+  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
     loadSrc: $r("app.media.rabbit"),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
@@ -35,14 +35,14 @@ struct LoadStatePage {
       },
     },
     border: { radius: 50 }
-  }
+  })
-  @State imageKnifeOption1: ImageKnifeOption = {
+  @Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
     loadSrc: $r('app.media.startIcon')
-  }
+  })
-  @State message: string = ""
+  @Local message: string = ""
-  @State currentWidth: number = 200
+  @Local currentWidth: number = 200
-  @State currentHeight: number = 200
+  @Local currentHeight: number = 200
-  @State typeValue: string = ""
+  @Local typeValue: string = ""
   build() {
     Column() {
       Text('测试失败场景请先关闭网络，并保证本地没有此网络图片的缓存')
@@ -50,7 +50,7 @@ struct LoadStatePage {
       Row() {
         Button('测试失败/成功场景')
           .onClick(() => {
-            this.ImageKnifeOption = {
+            this.ImageKnifeOption = new ImageKnifeOption({
               loadSrc: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
               placeholderSrc: $r("app.media.loading"),
               errorholderSrc: $r("app.media.app_icon"),
@@ -75,7 +75,7 @@ struct LoadStatePage {
               onComplete:(event)=>{
                 console.error("Load onComplete width:"+event?.width , " height:"+event?.height , " componentWidth:"+event?.componentWidth," componentHeight:" + event?.componentHeight);
               }
-            }
+            })
           })
       }
       .margin({ top: 20 })
@@ -83,7 +83,7 @@ struct LoadStatePage {
       ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth)
         .margin({ top: 20 })
       Button("自定义下载失败").onClick(()=>{
-        this.imageKnifeOption1 = {
+        this.imageKnifeOption1 = new ImageKnifeOption({
           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 } from '@ohos/libraryimageknife'
+import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@Component
+@ComponentV2
 struct LongImagePage {
 
   build() {
@@ -25,13 +25,13 @@ struct LongImagePage {
 
    // Image($r("app.media.aaa")).objectFit(ImageFit.Auto).width(200)
       ImageKnifeComponent({
-        imageKnifeOption: {
+        imageKnifeOption: new 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 { ImageKnifeComponent } from '@ohos/libraryimageknife';
+import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife';
 
 
 
 @Entry
-@Component
+@ComponentV2
 struct ManyPhotoShowPage {
   private data: TestDataSource = new TestDataSource();
 
@@ -36,7 +36,7 @@ struct ManyPhotoShowPage {
                 //   loadSrc: item.thumbnail,
                 //   mainScaleType: ScaleType.FIT_XY,
                 // } })
-                ImageKnifeComponent({imageKnifeOption:{
+                ImageKnifeComponent({imageKnifeOption:new ImageKnifeOption({
                   loadSrc: item.thumbnail,
                   //src:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
                   //  src: this.localFile,
@@ -44,7 +44,7 @@ struct ManyPhotoShowPage {
                   errorholderSrc:$r("app.media.failed"),
                   objectFit: ImageFit.Auto,
                   border: {radius:50}
-                }})
+                })})
               }
               .width(56).height(56)
               //滤镜标题

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

@@ -15,49 +15,49 @@
 import { ImageKnife, ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@Component
+@ComponentV2
 struct ObjectFitPage {
-  @State imageKnifeOption: ImageKnifeOption = {
+  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
     loadSrc: $r("app.media.app_icon"),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Fill
-  }
+  })
 
   build() {
     Column() {
 
       Button("主图Fill拉伸填充").onClick(()=>{
-        this.imageKnifeOption = {
+        this.imageKnifeOption = new ImageKnifeOption({
           loadSrc: $r("app.media.app_icon"),
           placeholderSrc: $r("app.media.loading"),
           errorholderSrc: $r("app.media.app_icon"),
           objectFit: ImageFit.Fill
-        }
+        })
       })
 
       Button("占位图Contain保持比例填充").margin({top:10}).onClick(async () => {
         ImageKnife.getInstance().removeAllMemoryCache()
         await ImageKnife.getInstance().removeAllFileCache()
 
-        this.imageKnifeOption = {
+        this.imageKnifeOption = new 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("错误图None不变化").margin({top:10}).onClick(() => {
-        this.imageKnifeOption = {
+        this.imageKnifeOption = new 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
-@Component
+@ComponentV2
 struct SignatureTestPage {
-  @State imageKnifeOption1: ImageKnifeOption =
+  @Local imageKnifeOption1: ImageKnifeOption =new ImageKnifeOption(
     {
       loadSrc: $r('app.media.icon'),
       placeholderSrc:$r("app.media.loading"),
-    };
+    });
-  @State imageKnifeOption2: ImageKnifeOption =
+  @Local imageKnifeOption2: ImageKnifeOption =new 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("加载")
             .onClick(() => {
-              this.imageKnifeOption1 = {
+              this.imageKnifeOption1 = new ImageKnifeOption({
                 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("加载")
             .onClick(() => {
-              this.imageKnifeOption2 = {
+              this.imageKnifeOption2 = new ImageKnifeOption({
                 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 } from '@ohos/libraryimageknife';
+import { ImageKnifeComponent,BlurTransformation,ImageKnifeOption } from '@ohos/libraryimageknife';
 import fs from '@ohos.file.fs';
 import image from '@ohos.multimedia.image';
 import { common2D, drawing } from '@kit.ArkGraphics2D';
 
 @Entry
-@Component
+@ComponentV2
 struct SingleImage {
   resource: string = "app.media.svgSample"
   scroller: Scroller = new Scroller;
   localFile: string = getContext(this).filesDir + "/icon.png"
-  @State pixelMap:PixelMap | undefined = undefined;
+  @Local pixelMap:PixelMap | undefined = undefined;
-  @State DrawingColorFilter: ColorFilter | undefined = undefined
+  @Local 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: {
+          imageKnifeOption: new 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: {
+          imageKnifeOption: new ImageKnifeOption({
             loadSrc: this.localFile,
             placeholderSrc: $r("app.media.loading"),
             errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain
-          }
+          })
         }).width(100).height(100)
         Text("网络图片")
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         ImageKnifeComponent({
-          imageKnifeOption: {
+          imageKnifeOption: new 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("自定义下载")
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         ImageKnifeComponent({
-          imageKnifeOption: {
+          imageKnifeOption: new 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("pixelMap加载图片")
           .fontSize(30)
           .fontWeight(FontWeight.Bold)
         ImageKnifeComponent({
-          imageKnifeOption: {
+          imageKnifeOption: new 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 } from '@ohos/libraryimageknife';
+import { ImageKnifeComponent ,ImageKnifeOption} from '@ohos/libraryimageknife';
 
 @Entry
-@Component
+@ComponentV2
 struct TestCommonImage {
   private data: Array<string> = []
   aboutToAppear(): void {
@@ -30,13 +30,13 @@ struct TestCommonImage {
           FlowItem() {
             Column(){
               ImageKnifeComponent({
-                imageKnifeOption: {
+                imageKnifeOption: new 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 } from '@ohos/libraryimageknife'
+import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@Component
+@ComponentV2
 struct TestErrorHolderPage {
 
   build() {
     Column() {
       Text("ImageKnifeComponent1").fontSize(20)
       ImageKnifeComponent({
-        imageKnifeOption: {
+        imageKnifeOption: new ImageKnifeOption({
           loadSrc: "abc",
           errorholderSrc:$r('app.media.failed')
-        }
+        })
       }).width(200).height(200)
       Text("ImageKnifeComponent2").fontSize(20)
       ImageKnifeComponent({
-        imageKnifeOption: {
+        imageKnifeOption: new ImageKnifeOption({
           loadSrc: "abc",
           errorholderSrc:$r('app.media.startIcon')
-        }
+        })
       }).width(200).height(200)
       Text("ImageKnifeComponent2").fontSize(20)
       ImageKnifeComponent({
-        imageKnifeOption: {
+        imageKnifeOption: new 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
-@Component
+@ComponentV2
 struct TestPrefetchToFileCachePage {
-  @State imageKnifeOption: ImageKnifeOption = {
+  @Local imageKnifeOption: ImageKnifeOption = new 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
-@Component
+@ComponentV2
 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 } from '@ohos/libraryimageknife'
+import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
 
-@Observed
+@ObservedV2
 export class MsgModel {
   id: string
   cId: string
@@ -30,10 +30,10 @@ export class MsgModel {
 }
 
 
-@Reusable
+// @Reusable
-@Component
+@ComponentV2
 export struct MsgItem {
-  count: number = 0
+  @Param 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:{
+        imageKnifeOption:new 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:{
+        imageKnifeOption:new ImageKnifeOption({
           loadSrc:this.data[this.count - 6],
           placeholderSrc:$r("app.media.loading")
-        },syncLoad:true
+        }),syncLoad:true
       })
     }else {
       ImageKnifeComponent({
-        imageKnifeOption:{
+        imageKnifeOption:new ImageKnifeOption({
           loadSrc:$r("app.media.pngSample"),
           placeholderSrc:$r("app.media.loading")
-        },syncLoad:true
+        }),syncLoad:true
       })
     }
   }
 }
 
 @Entry
-@Component
+@ComponentV2
 struct ImageTestPage {
   count : number = 0
   rCount: number = 0
   scroller: Scroller = new Scroller()
-  @State list: MsgModel[] = []
+  @Local list: MsgModel[] = []
-  @State imageSize: number =100
+  @Local 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
-@Component
+@ComponentV2
 struct TestIsUrlExist {
-  @State imageKnifeOption: ImageKnifeOption = {
+  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
     loadSrc: $r('app.media.startIcon'),
     placeholderSrc: $r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  }
+  })
-  @State source: PixelMap | string | Resource = $r("app.media.startIcon")
+  @Local source: PixelMap | string | Resource = $r("app.media.startIcon")
-  @State source1: PixelMap | string | Resource = $r("app.media.startIcon")
+  @Local 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
-@Component
+@ComponentV2
 struct TestPrefetchToFileCachePage {
-  @State imageKnifeOption: ImageKnifeOption = {
+  @Local imageKnifeOption: ImageKnifeOption = new 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({ loadSrc: url })
+    let fileCachePath = await ImageKnife.getInstance().preLoadCache(new ImageKnifeOption({ 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
-@Component
+@ComponentV2
 struct TestRemoveCache {
-  @State imageKnifeOption: ImageKnifeOption = {
+  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
     loadSrc: $r('app.media.startIcon'),
     placeholderSrc: $r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  }
+  })
-  @State source: PixelMap | string | Resource = $r("app.media.startIcon");
+  @Local source: PixelMap | string | Resource = $r("app.media.startIcon");
-  @State source1: PixelMap | string | Resource = $r("app.media.startIcon");
+  @Local source1: PixelMap | string | Resource = $r("app.media.startIcon");
-  @State url: string = '';
+  @Local url: string = '';
 
   build() {
     Column() {

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

@@ -15,12 +15,12 @@
 import { ImageKnifeComponent, ImageKnife, ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@Component
+@ComponentV2
 struct TestSetCustomImagePage {
-  @State imageKnifeOption: ImageKnifeOption = {
+  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
     loadSrc: $r('app.media.startIcon'),
     placeholderSrc: $r('app.media.loading')
-  }
+  })
   aboutToAppear(): void {
     ImageKnife.getInstance().setCustomGetImage(custom)
   }
@@ -30,22 +30,22 @@ struct TestSetCustomImagePage {
   build() {
     Column() {
       Button("自定义下载a").onClick(()=>{
-        this.imageKnifeOption = {
+        this.imageKnifeOption = new ImageKnifeOption({
           loadSrc: "aaa",
           placeholderSrc: $r('app.media.loading')
-        }
+        })
       })
       Button("自定义下载b").onClick(()=>{
-        this.imageKnifeOption = {
+        this.imageKnifeOption = new ImageKnifeOption({
           loadSrc: "bbb",
           placeholderSrc: $r('app.media.loading')
-        }
+        })
       })
       Button("自定义下载c").onClick(()=>{
-        this.imageKnifeOption = {
+        this.imageKnifeOption = new ImageKnifeOption({
           loadSrc: "ccc",
           placeholderSrc: $r('app.media.loading')
-        }
+        })
       })
       ImageKnifeComponent({
         imageKnifeOption: this.imageKnifeOption

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

@@ -15,55 +15,55 @@
 import { ImageKnifeComponent,CacheStrategy,ImageKnifeOption } from '@ohos/libraryimageknife'
 
 @Entry
-@Component
+@ComponentV2
 struct TestWriteCacheStage {
-  @State imageKnifeOption1: ImageKnifeOption = {
+  @Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
     loadSrc:$r('app.media.startIcon'),
     placeholderSrc:$r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  }
+  })
-  @State imageKnifeOption2: ImageKnifeOption = {
+  @Local imageKnifeOption2: ImageKnifeOption = new ImageKnifeOption({
     loadSrc:$r('app.media.startIcon'),
     placeholderSrc:$r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  }
+  })
-  @State imageKnifeOption3: ImageKnifeOption = {
+  @Local imageKnifeOption3: ImageKnifeOption = new ImageKnifeOption({
     loadSrc:$r('app.media.startIcon'),
     placeholderSrc:$r('app.media.loading'),
     errorholderSrc:$r('app.media.failed')
-  }
+  })
 
   build() {
     Column() {
       Button("写入内存文件缓存").margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption1 = {
+        this.imageKnifeOption1 = new ImageKnifeOption({
           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("写入内存缓存").margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption2 = {
+        this.imageKnifeOption2 = new ImageKnifeOption({
           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("写入文件缓存").margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption3 = {
+        this.imageKnifeOption3 = new ImageKnifeOption({
           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
-@Component
+@ComponentV2
 struct TransformPage {
   private custom_scale:number = 1
-  @State matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
+  @Local matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
-  @State ImageKnifeOption: ImageKnifeOption = {
+  @Local ImageKnifeOption: ImageKnifeOption = new 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,24 +15,50 @@
 import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
 
 // const logger = new imUtils.logger.IMLogger('Avatar')
-
+@ObservedV2
-class MyImageOption extends ImageKnifeOption {
+export class MyStorage {
-  account?: string
+  static instance:MyStorage | undefined = undefined
+  static getInstance(){
+    if(MyStorage.instance == undefined) {
+      MyStorage.instance = new MyStorage()
+    }
+    return MyStorage.instance
+  }
+  @Trace WeLink_Mob_fontSize_multiple: number = 1
 }
 
-@Component
+@ComponentV2
 export struct UserAvatar {
-  @Prop @Watch('userInfoUpdate') userInfo: string = ""
   // @Prop userInfo: string = ""
   imgSize: number = 100
   radius: number = 12
   borderSize: number = 0
   imgSizes: number = 1
-  @State ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
-  @StorageProp('WeLink_Mob_fontSize_multiple') @Watch('updateImgSize') WeLink_Mob_fontSize_multiple: number = 0
   scalable: boolean = true;
-  @State calcImgSize: number = 100
+  @Local 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()
@@ -41,39 +67,19 @@ export struct UserAvatar {
   setImageSize() {
     if (!this.scalable) {
       this.calcImgSize = this.imgSize
-    } else if (this.WeLink_Mob_fontSize_multiple < 0.9) {
+    } else if (this.storage.WeLink_Mob_fontSize_multiple < 0.9) {
       this.calcImgSize = this.imgSize * 0.9
-    } else if (this.WeLink_Mob_fontSize_multiple > 1.6) {
+    } else if (this.storage.WeLink_Mob_fontSize_multiple > 1.6) {
       this.calcImgSize = this.imgSize * 1.6
     } else {
-      this.calcImgSize = this.imgSize * this.WeLink_Mob_fontSize_multiple
+      this.calcImgSize = this.imgSize * this.storage.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 { UserAvatar } from './User'
+import { MyStorage, UserAvatar } from './User'
 
 class CommonDataSource <T> implements IDataSource {
   private dataArray: T[] = []
@@ -55,9 +55,9 @@ class CommonDataSource <T> implements IDataSource {
   }
 }
 @Entry
-@Component
+@ComponentV2
 struct Index {
-  @State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
+  @Local 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,26 +85,42 @@ struct Index {
     'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
   ]
   aboutToAppear(): void {
-    this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
+    MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1
-    AppStorage.set("WeLink_Mob_fontSize_multiple",1)
   }
 
   build() {
     Column() {
       Button("bigger").onClick(()=>{
-        AppStorage.set("WeLink_Mob_fontSize_multiple",1.6)
+        MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1.6
       })
       Button("small").onClick(()=>{
-        AppStorage.set("WeLink_Mob_fontSize_multiple",0.8)
+        MyStorage.getInstance().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%")
@@ -115,13 +131,13 @@ struct Index {
 }
 
 
-@Reusable
+// @Reusable
-@Component
+@ComponentV2
 struct ReuseImage {
-  @State userInfo:string = ""
+  @Param 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
-@Component
+@ComponentV2
 struct DataShareUriLoadPage {
-  @State imageKnifeOption1: ImageKnifeOption =
+  @Local 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 = {
+              this.imageKnifeOption1 = new ImageKnifeOption({
                 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/main/ets/pages/transformsPage.ets

@@ -1,494 +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 {
-  GrayscaleTransformation,
-  ImageKnifeComponent,
-  ImageKnifeOption,
-  RotateImageTransformation,
-  SketchFilterTransformation,
-  CropCircleTransformation,
-  ToonFilterTransform,
-  VignetteFilterTransform,
-  BaseTransform,
-  BlurTransformation,
-  BrightnessFilterTransformation,
-  InvertFilterTransformation,
-  CropCircleWithBorderTransformation,
-  CropSquareTransformation,
-  CropTransformation,
-  CropType,
-  ContrastFilterTransformation,
-  PixelationFilterTransformation,
-  RoundedCornersTransformation,
-  SepiaFilterTransformation,
-  MaskTransformation,
-  SwirlFilterTransformation,
-  KuwaharaFilterTransform
-} from '@ohos/libraryimageknife'
-
-@Entry
-@Component
-struct transformsPage {
-  @State imageKnifeOption: ImageKnifeOption =
-    {
-      loadSrc: $r('app.media.jpgSample'),
-      placeholderSrc: $r('app.media.icon_loading'),
-      errorholderSrc: $r('app.media.icon_failed')
-    };
-  @State option1: ImageKnifeOption = {
-    loadSrc: $r('app.media.pngSample'),
-  }
-  @State option2: ImageKnifeOption = {
-    loadSrc: $r('app.media.pngSample'),
-  }
-  private transformations: Array<BaseTransform<PixelMap>> = new Array();
-  private blurTransformation: BlurTransformation = new BlurTransformation(15, 3);
-  private brightnessFilterTransformation: BrightnessFilterTransformation = new BrightnessFilterTransformation(0.5);
-  private contrastFilterTransformation: ContrastFilterTransformation = new ContrastFilterTransformation(2.0);
-  private cropCircleTransformation: CropCircleTransformation = new CropCircleTransformation();
-  private cropCircleWithBorderTransformation: CropCircleWithBorderTransformation =
-    new CropCircleWithBorderTransformation(16, { r_color: 100, g_color: 100, b_color: 100 });
-  private cropSquareTransformation: CropSquareTransformation = new CropSquareTransformation();
-  private cropTransformation: CropTransformation = new CropTransformation(100, 100, CropType.CENTER);
-  private grayscaleTransformation: GrayscaleTransformation = new GrayscaleTransformation();
-  private invertFilterTransformation: InvertFilterTransformation = new InvertFilterTransformation();
-  private pixelationFilterTransformation: PixelationFilterTransformation = new PixelationFilterTransformation(5.0);
-  private rotateImageTransformation: RotateImageTransformation = new RotateImageTransformation(90);
-  private roundedCornersTransformation: RoundedCornersTransformation = new RoundedCornersTransformation({
-    top_left: 5,
-    bottom_left: 5,
-    top_right: 5,
-    bottom_right: 5
-  });
-  private sepiaFilterTransformation: SepiaFilterTransformation = new SepiaFilterTransformation();
-  private sketchFilterTransformation: SketchFilterTransformation = new SketchFilterTransformation();
-  private maskTransformation: MaskTransformation = new MaskTransformation($r('app.media.mask_starfish'));
-  private swirlFilterTransformation: SwirlFilterTransformation = new SwirlFilterTransformation(80);
-  private kuwaharaFilterTransform: KuwaharaFilterTransform = new KuwaharaFilterTransform(10);
-  private toonFilterTransform: ToonFilterTransform = new ToonFilterTransform(0.3, 10.0);
-  private vignetteFilterTransform: VignetteFilterTransform = new VignetteFilterTransform([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]);
-
-  build() {
-    Scroll() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '模糊' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.blurTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.blurTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('模糊变换').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '亮度滤波' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.brightnessFilterTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.brightnessFilterTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('亮度滤波').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '对比度' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.contrastFilterTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.contrastFilterTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('对比度').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '圆形裁剪' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.cropCircleTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.cropCircleTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('圆形裁剪').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '圆环' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.cropCircleWithBorderTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.cropCircleWithBorderTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('圆环').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '正方形裁剪' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.cropSquareTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.cropSquareTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('正方形裁剪').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '自定义矩形' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.cropTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.cropTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('自定义矩形').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '灰度' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.grayscaleTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.grayscaleTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('灰度').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '反转' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.invertFilterTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.invertFilterTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('反转').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '像素化' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.pixelationFilterTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.pixelationFilterTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('像素化').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '旋转' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.rotateImageTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.rotateImageTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('旋转').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '圆角' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.roundedCornersTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.roundedCornersTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('圆角').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '乌墨色滤波' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.sepiaFilterTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.sepiaFilterTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('乌墨色滤波').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '素描' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.sketchFilterTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.sketchFilterTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('素描').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '遮罩' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.maskTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.maskTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('遮罩').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '扭曲滤波' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.swirlFilterTransformation);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.swirlFilterTransformation.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('扭曲滤波').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '桑原滤波' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.kuwaharaFilterTransform);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.kuwaharaFilterTransform.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('桑原滤波').margin({ left: 16 })
-          }.margin({ left: 16 })
-
-          Row() {
-            Checkbox({ name: '动画滤波' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.toonFilterTransform);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.toonFilterTransform.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('动画滤波').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Flex({ direction: FlexDirection.Row }) {
-          Row() {
-            Checkbox({ name: '装饰滤波' })
-              .width(32)
-              .height(32)
-              .onChange((value: boolean) => {
-                if (value) {
-                  this.transformations.push(this.vignetteFilterTransform);
-                } else {
-                  for (let index = 0; index < this.transformations.length; index++) {
-                    if (this.transformations[index].getClassName() == this.vignetteFilterTransform.getClassName()) {
-                      this.transformations.splice(index, 1);
-                    }
-                  }
-                }
-              })
-            Text('装饰滤波').margin({ left: 16 })
-          }.margin({ left: 16 })
-        }.margin({ top: 32, left: 16 })
-
-        Button("显示效果").onClick(() => {
-          this.imageKnifeOption = {
-            loadSrc: $r('app.media.jpgSample'),
-            placeholderSrc: $r('app.media.icon_loading'),
-            errorholderSrc: $r('app.media.icon_failed'),
-            enableGpu: true,
-            transformations: this.transformations
-          };
-        }).margin({ left: 5 }).backgroundColor(Color.Blue)
-        Text("下面为展示图片区域").margin({ top: 5 })
-        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
-        }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
-
-        Button("同资源不同转换效果").onClick(() => {
-          this.option1 = {
-            loadSrc: $r('app.media.pngSample'),
-            errorholderSrc: $r("app.media.app_icon"),
-            transformation: new CropCircleTransformation()
-          }
-          this.option2 = {
-            loadSrc: $r('app.media.pngSample'),
-            errorholderSrc: $r("app.media.app_icon"),
-            transformations: [new RotateImageTransformation(45), new InvertFilterTransformation()]
-          }
-        }).margin(10).backgroundColor(Color.Blue)
-        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
-          ImageKnifeComponent({
-            imageKnifeOption: this.option1
-          }).width(300)
-            .height(300)
-            .margin(10)
-            .borderWidth(3)
-          ImageKnifeComponent({
-            imageKnifeOption: this.option2
-          }).width(300)
-            .height(300)
-            .margin(10)
-            .borderWidth(3)
-        }
-      }
-    }
-    .width('100%')
-    .height('100%')
-  }
-}
-

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 = {
+    let option: ImageKnifeOption = new 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, { loadSrc: url, signature: signature });
+      .generateMemoryKey(url, ImageKnifeRequestSource.SRC, new ImageKnifeOption({ 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 = {
+      imageKnifeOption = new ImageKnifeOption({
         loadSrc: url
-      };
+      });
     }
     let key = this.getEngineKeyImpl().generateFileKey(imageKnifeOption.loadSrc, imageKnifeOption.signature);
     if (this.fileCache !== undefined) {

library/src/main/ets/ImageKnifeOption.ets

@@ -22,28 +22,36 @@ export interface HeaderOptions {
   key: string;
   value: Object;
 }
-
+interface AnimatorType {
-@Observed
+  state?: AnimationStatus
-export class AnimatorOption {
+  iterations?: number
-  @Track
+  reverse?: boolean
-  state?: AnimationStatus = AnimationStatus.Running
-  @Track
-  iterations?: number = -1
-  @Track
-  reverse?: boolean = false
 }
+@ObservedV2
+export class AnimatorOption {
+  @Trace
+  state?: AnimationStatus = AnimationStatus.Running
+  @Trace
+  iterations?: number = -1
+  @Trace
+  reverse?: boolean = false
 
-@Observed
+  constructor(option?:AnimatorType) {
-export class ImageKnifeOption {
+    this.state = option?.state
+    this.iterations = option?.iterations
+    this.reverse = option?.reverse
+  }
+}
+interface ImageOption {
   // 主图资源
-  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
   // 占位图填充效果
@@ -55,16 +63,65 @@ export class ImageKnifeOption {
   // 缓存策略
   writeCacheStrategy?: CacheStrategy
   // 仅使用缓存加载数据
-  onlyRetrieveFromCache?: boolean = false;
+  onlyRetrieveFromCache?: boolean;
-  priority?: taskpool.Priority = taskpool.Priority.LOW
+  priority?: taskpool.Priority
   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
   }
 }
 

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

@@ -19,15 +19,14 @@ import { ImageKnife } from '../ImageKnife';
 import { LogUtil } from '../utils/LogUtil';
 import { ImageKnifeRequestSource } from '../model/ImageKnifeData';
 
-@Component
+@ComponentV2
 export struct ImageKnifeAnimatorComponent {
-  @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
+  @Param animatorOption: AnimatorOption = new AnimatorOption();
-  @State animatorOption: AnimatorOption = new AnimatorOption();
+  @Local pixelMap: PixelMap | string | undefined = undefined
-  @State pixelMap: PixelMap | string | undefined = undefined
+  @Local imageAnimator: Array<ImageFrameInfo> | undefined = undefined
-  @State imageAnimator: Array<ImageFrameInfo> | undefined = undefined
+  @Local adaptiveWidth: Length = '100%'
-  @State adaptiveWidth: Length = '100%'
+  @Local adaptiveHeight: Length = '100%'
-  @State adaptiveHeight: Length = '100%'
+  @Local objectFit: ImageFit = ImageFit.Contain
-  @State objectFit: ImageFit = ImageFit.Contain
   private request: ImageKnifeRequest | undefined
   private lastWidth: number = 0
   private lastHeight: number = 0
@@ -35,7 +34,17 @@ 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
   }
@@ -81,15 +90,6 @@ export struct ImageKnifeAnimatorComponent {
       })
   }
 
-  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,14 +21,13 @@ import { ImageKnifeData, ImageKnifeRequestSource } from '../model/ImageKnifeData
 import { IEngineKey } from '../key/IEngineKey';
 import { DefaultEngineKey } from '../key/DefaultEngineKey';
 
-@Component
+@ComponentV2
 export struct ImageKnifeComponent {
-  @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
+  @Local pixelMap: PixelMap | string | undefined = undefined
-  @State pixelMap: PixelMap | string | undefined = undefined
+  @Param syncLoad: boolean = false
-  @State syncLoad: boolean = false
+  @Local adaptiveWidth: Length = '100%'
-  @State adaptiveWidth: Length = '100%'
+  @Local adaptiveHeight: Length = '100%'
-  @State adaptiveHeight: Length = '100%'
+  @Local objectFit: ImageFit = ImageFit.Contain
-  @State objectFit: ImageFit = ImageFit.Contain
   private request: ImageKnifeRequest | undefined
   private lastWidth: number = 0
   private lastHeight: number = 0
@@ -36,7 +35,17 @@ 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() {
+    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 {
     //闪动问题失效，注释相应代码后续修复
     if(this.syncLoad) {
@@ -102,15 +111,6 @@ export struct ImageKnifeComponent {
       })
   }
 
-  watchImageKnifeOption() {
-    if (this.request !== undefined) {
-      this.request.requestState = ImageKnifeRequestState.DESTROY
-    }
-    this.request = undefined
-    this.componentVersion++
-    ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
-  }
-
   getCurrentContext(): common.UIAbilityContext {
     if (this.currentContext == undefined) {
       this.currentContext = getContext(this) as common.UIAbilityContext

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

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