diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2e93e1..1513f95 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,12 +1,29 @@
+## 1.0.5
+- 自定义组件已支持通用属性和通用事件绑定,因此ImageKnifeComponent将删除相关内容,相关内容由用户自定义实现，提高扩展能力
+
+- ImageKnifeOption 支持列表绑定
+
+- ImageKnifeOption 
+
+  新增
+
+  -  1.onClick事件属性 
+
+  删除 
+
+  - 1.size(设置大小) 
+  - 2.sizeAnimated 显式动画 
+  - 3.backgroundColor背景色
+  - 4.margin 组件外间距 等属性,删除的属性将由通用属性提供支持,可支持在ImageKnifeComponent自定义组件上链式调用
 ## 1.0.4
 
-渲染显示部分使用Canvas组件替代Image组件
+- 渲染显示部分使用Canvas组件替代Image组件
 
-重构渲染封装层ImageKnifeComponent自定义组件
+- 重构渲染封装层ImageKnifeComponent自定义组件
 
-新增GIF图片解析能力
+- 新增GIF图片解析能力
 
-新增SVG图片解析能力
+- 新增SVG图片解析能力
 
 ## 1.0.3
 
diff --git a/README.md b/README.md
index e6e2a54..a9f03fd 100644
--- a/README.md
+++ b/README.md
@@ -52,8 +52,6 @@ struct Index {
   @State imageKnifeOption1: ImageKnifeOption =
     { // 加载一张本地的jpg资源（必选）
       loadSrc: $r('app.media.jpgSample'),
-      // 组件宽设置为300，高设置为300（必选）
-      size: { width: '300', height: '300' },
       // 占位图使用本地资源icon_loading（可选）
       placeholderSrc: $r('app.media.icon_loading'),
       // 失败占位图使用本地资源icon_failed（可选）
@@ -63,6 +61,8 @@ struct Index {
     Scroll() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+          .width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高
+          .height(300)
       }
     }
     .width('100%')
@@ -99,7 +99,6 @@ struct IndexFunctionDemo {
   @State imageKnifeOption: ImageKnifeOption =
     {
       loadSrc: $r('app.media.gifSample'),
-      size: { width: '300', height: '300' },
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed')
     };
@@ -109,6 +108,8 @@ struct IndexFunctionDemo {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Text("简单示例：加载一张gif图片").fontSize(15)
         ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption })
+          .width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高
+          .height(300)
       }
     }
     .width('100%')
@@ -188,7 +189,6 @@ arkWorker.parentPort.onmessage = gifHandler;
 
 | 参数名称                     | 入参内容                                                     | 功能简介                            |
 | ---------------------------- | ------------------------------------------------------------ | ----------------------------------- |
-| size                         | {    width: string,    height: string  }                     | 设置组件宽高（必选）                |
 | loadSrc                      | string \| PixelMap \| Resource                               | 设置主图资源（必选）                |
 | mainScaleType                | ScaleType                                                    | 设置主图展示样式（可选）            |
 | strategy                     | DiskStrategy                                                 | 设置磁盘缓存策略（可选）            |
@@ -210,9 +210,6 @@ arkWorker.parentPort.onmessage = gifHandler;
 | transformation               | BaseTransform<PixelMap>                                      | 单个变换（可选）                    |
 | transformations              | Array<BaseTransform<PixelMap>>                               | 多个变换,目前仅支持单个变换（可选） |
 | allCacheInfoCallback         | IAllCacheInfoCallback                                        | 输出缓存相关内容和信息（可选）      |
-| backgroundColor              | Color \| number \| string \| Resource                        | 组件背景颜色（可选）                |
-| margin                       | {  <br/> top?: number \| string \| Resource,  <br/> right?: number \| string \| Resource, <br/>  bottom?: number \| string \| Resource,<br/>   left?: number \| string \| Resource<br/> } \| number \| string \| Resource | 组件间距（可选）                    |
-| sizeAnimate                  | AnimateParam                                                 | 组件大小变化显式动画效果（可选）    |
 | **drawLifeCycle**            | **IDrawLifeCycle**                                           | **用户自定义实现绘制方案（可选）**  |
 
 其他参数只需要在ImageKnifeOption对象上按需添加即可。
@@ -311,7 +308,7 @@ export default class MyAbilityStage extends AbilityStage {
 
 下面我们会着重指导用户如何复用图片加载逻辑，重构自定义组件ImageKnifeComponent。
 
-首先我们先看看RequestOption构建的内容,如下表格所示:
+首先我们先看看RequestOption构建的内容,如下所示:
 
 ### 数据加载
 
@@ -482,7 +479,7 @@ request.skipMemoryCache(true)
 /entry/src/
 - main/ets/MainAbility     
     - pages                                    # 测试page页面列表
-       - basicTestFeatureAbilityPage.ets       # 测试元能力
+       - basicTestFeatureAbilityPage.ets       # 测试列表加载
        - basicTestFileIOPage.ets               # 测试fileio
        - basicTestMediaImage.ets               # 测试媒体image
        - basicTestResourceManagerPage.ets      # 测试本地资源解析
diff --git a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets
index 22d1e5e..ee87e56 100644
--- a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets
+++ b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets
@@ -1,6 +1,6 @@
 /*
  * Copyright (C) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
+ * 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
  *
@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import {ImageKnifeOption,ImageKnifeComponent} from '@ohos/imageknife'
 
 @Entry
 @Component
@@ -20,30 +20,63 @@ struct BasicTestFeatureAbilityPage {
   @Watch("watchPathChange") @State filePath: string = "查看featureAbility路径";
 
   watchPathChange() {
-    console.log("watchPathChange");
+    console.log("watchPathChange")
+  }
+  urls=[
+   "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
+   "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
+   "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
+   "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
+   "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
+   "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
+   "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
+   "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
+   "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
+   "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
+   "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
+   "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
+   "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
+   "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
+   "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
+   "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
+   "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
+   "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
+   "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
+   "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
+  ]
+
+  @State options:Array<ImageKnifeOption> = []
+
+  aboutToAppear(){
+    this.options =  this.urls.map((url)=>{
+      return {
+        loadSrc:url
+      }
+    })
+    console.log('this.options length ='+this.options.length)
   }
 
   build() {
-    Scroll() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Text(this.filePath).fontSize(20)
-        Button("featureAbility.getContext().getFilesDir()")
-          .margin({ top: 20 })
-          .onClick(() => {
-            let data = globalThis.ImageKnife.getImageKnifeContext().filesDir;
-            console.log("ImageKnife filesPath = " + data)
-            this.filePath = data
-          })
-        Button("featureAbility.getContext().getCacheDir()")
-          .margin({ top: 20 })
-          .onClick(() => {
-            let data = globalThis.ImageKnife.getImageKnifeContext().cacheDir;
-            console.log("ImageKnife cachesPath = " + data)
-            this.filePath = data
-          })
-      }
-    }
-    .width('100%')
-    .height('100%')
+    Stack({ alignContent: Alignment.TopStart }) {
+      Column() {
+        List({ space: 20, initialIndex: 0 }) {
+          ForEach(this.options, (item) => {
+            ListItem() {
+              ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300)
+            }
+          }, item => item.loadSrc)
+        }
+        .listDirection(Axis.Vertical) // 排列方向
+        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
+        .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
+        .chainAnimation(false) // 联动特效关闭
+        .onScrollIndex((firstIndex: number, lastIndex: number) => {
+          console.info('first' + firstIndex)
+          console.info('last' + lastIndex)
+        })
+
+      }.width('100%')
+
+    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
   }
 }
diff --git a/entry/src/main/ets/pages/frescoImageTestCasePage.ets b/entry/src/main/ets/pages/frescoImageTestCasePage.ets
index 4534bce..c12ee29 100644
--- a/entry/src/main/ets/pages/frescoImageTestCasePage.ets
+++ b/entry/src/main/ets/pages/frescoImageTestCasePage.ets
@@ -25,7 +25,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       displayProgress: true
@@ -33,7 +33,7 @@ struct FrescoImageTestCasePage {
   @State ImageKnifeOption: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       displayProgress: true
@@ -41,7 +41,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption3: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       displayProgress: true
@@ -49,7 +49,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption4: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       displayProgress: true,
@@ -58,10 +58,12 @@ struct FrescoImageTestCasePage {
   build() {
     Scroll() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-//        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
-//        ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
-//        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
-        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+          .width(300)
+          .height(300)
 //        Scroll() {
 //          Text(this.progresshint).fontSize(15)
 //        }.width(300).height(200)
diff --git a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets
index 4624896..b44bfba 100644
--- a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets
+++ b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets
@@ -23,7 +23,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       retryholderSrc: $r('app.media.icon_retry'),
@@ -33,7 +33,7 @@ struct FrescoImageTestCasePage {
   @State ImageKnifeOption: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       retryholderSrc: $r('app.media.icon_retry'),
@@ -43,7 +43,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption3: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       retryholderSrc: $r('app.media.icon_retry'),
@@ -53,7 +53,7 @@ struct FrescoImageTestCasePage {
   @State imageKnifeOption4: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       retryholderSrc: $r('app.media.icon_retry'),
@@ -64,10 +64,12 @@ struct FrescoImageTestCasePage {
   build() {
     Scroll() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-//        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
-//        ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
-//        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
-        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+          .width(300)
+          .height(300)
       }
     }
     .width('100%')
diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
index 89efb33..108abb5 100644
--- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
+++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
@@ -28,7 +28,7 @@ struct IndexFunctionDemo {
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Button("测试元能力")
             .onClick(() => {
-              console.log("测试元能力子系统")
+              console.log("测试List列表")
               router.push({ uri: "pages/basicTestFeatureAbilityPage" });
             }).margin({ top: 5, left: 3 })
           Button("测试文件")
diff --git a/entry/src/main/ets/pages/index.ets b/entry/src/main/ets/pages/index.ets
index 7b4d7cc..d3a0cc4 100644
--- a/entry/src/main/ets/pages/index.ets
+++ b/entry/src/main/ets/pages/index.ets
@@ -25,7 +25,7 @@ struct IndexFunctionDemo {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.icon'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed')
     };
@@ -33,7 +33,7 @@ struct IndexFunctionDemo {
   @State imageKnifeOption2: ImageKnifeOption =
     {
       loadSrc: $r('app.media.icon'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed')
     };
@@ -47,12 +47,12 @@ struct IndexFunctionDemo {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.pngSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed')
               }
             }).margin({ top: 5, left: 3 })
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width('100%').backgroundColor(Color.Pink)
 
         Text("简单示例2：加载一张网络gif图片").fontSize(15)
@@ -62,13 +62,13 @@ struct IndexFunctionDemo {
             .onClick(() => {
               this.imageKnifeOption2 = {
                 loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 displayProgress:true,
               }
             }).margin({ top: 5, left: 3 })
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
         }.width('100%').backgroundColor(Color.Pink)
 
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
diff --git a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets
index c25b479..ad82adf 100644
--- a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets
+++ b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets
@@ -23,28 +23,28 @@ struct ShowErrorholderTestCasePage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
-  @State ImageKnifeOption: ImageKnifeOption =
+  @State imageKnifeOption: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/xxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
   @State imageKnifeOption3: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/xxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
   @State imageKnifeOption4: ImageKnifeOption =
     {
       loadSrc: "https://hbimg.huabanimg.com/xxxxx",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
@@ -52,10 +52,10 @@ struct ShowErrorholderTestCasePage {
   build() {
     Scroll() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
-        ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
-        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
-        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300)
       }
     }
     .width('100%')
diff --git a/entry/src/main/ets/pages/testAllCacheInfoPage.ets b/entry/src/main/ets/pages/testAllCacheInfoPage.ets
index dab58d5..a2f4123 100644
--- a/entry/src/main/ets/pages/testAllCacheInfoPage.ets
+++ b/entry/src/main/ets/pages/testAllCacheInfoPage.ets
@@ -45,23 +45,23 @@ struct TestAllCacheInfoPage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.pngSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin:{top:15},
+
       transform: {
         transformType:TransformType.RotateImageTransformation,
         rotateImage:180
       },
       allCacheInfoCallback:this.allCacheInfoCallback1
     };
-  @State ImageKnifeOption: ImageKnifeOption =
+  @State imageKnifeOption: ImageKnifeOption =
     {
       loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin:{top:15},
+
       transform: {
         transformType:TransformType.RotateImageTransformation,
         rotateImage:180
@@ -112,10 +112,10 @@ struct TestAllCacheInfoPage {
             this.imageKnifeOption1 =
             {
               loadSrc: $r('app.media.pngSample'),
-              size: { width: '300', height: '300' },
+
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin: { top: 15 },
+
               transform: {
                 transformType:TransformType.RotateImageTransformation,
                 rotateImage:this.imageKnifeComponentAngle
@@ -126,18 +126,18 @@ struct TestAllCacheInfoPage {
         Scroll() {
           Text(this.cacheinfo3).fontSize(15)
         }.width(300).height(200)
-        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
 
         Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
           .onClick(() => {
             this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
-            this.ImageKnifeOption =
+            this.imageKnifeOption =
             {
               loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
-              size: { width: '300', height: '300' },
+
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin: { top: 15 },
+
               transform: {
                 transformType:TransformType.RotateImageTransformation,
                 rotateImage:this.imageKnifeComponentAngle
@@ -148,7 +148,7 @@ struct TestAllCacheInfoPage {
         Scroll() {
           Text(this.cacheinfo4).fontSize(15)
         }.width(300).height(200)
-        ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
 
       }
     }
diff --git a/entry/src/main/ets/pages/testGifDontAnimatePage.ets b/entry/src/main/ets/pages/testGifDontAnimatePage.ets
index f256bb1..b9ec490 100644
--- a/entry/src/main/ets/pages/testGifDontAnimatePage.ets
+++ b/entry/src/main/ets/pages/testGifDontAnimatePage.ets
@@ -23,10 +23,8 @@ struct TestGifDontAnimatePage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
       placeholderSrc: $r('app.media.icon_loading'),
-      errorholderSrc: $r('app.media.icon_failed'),
-      margin:{left:15,top:15,right:15,bottom:15}
+      errorholderSrc: $r('app.media.icon_failed')
     };
 
 
@@ -38,10 +36,9 @@ struct TestGifDontAnimatePage {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.gifSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
               }
 
           }).margin({left:15}).backgroundColor(Color.Grey)
@@ -49,10 +46,8 @@ struct TestGifDontAnimatePage {
             .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.gifSample'),
-              size: { width: '300', height: '300' },
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin:{left:15,top:15,right:15,bottom:15},
               dontAnimateFlag:true
             }
 
@@ -64,26 +59,24 @@ struct TestGifDontAnimatePage {
             .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-              size: { width: '300', height: '300' },
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin:{left:15,top:15,right:15,bottom:15}
             };
           }).margin({left:15}).backgroundColor(Color.Grey)
           Button('网络资源gif静态')
             .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-              size: { width: '300', height: '300' },
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
-              margin:{left:15,top:15,right:15,bottom:15},
               dontAnimateFlag:true
             };
           }).margin({left:15}).backgroundColor(Color.Grey)
         }
         .margin({top:15})
-        ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+          .width(300)
+          .height(300)
 
       }
     }
diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
index adeea94..a0a31b3 100644
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
@@ -25,10 +25,10 @@ struct TestImageKnifeOptionChangedPage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin:{left:5,top:5,right:5,bottom:5}
+
     };
 
 
@@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.jpgSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5}
+
               };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -51,10 +51,10 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 =  {
                loadSrc: $r('app.media.pngSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -62,10 +62,10 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.bmpSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -73,10 +73,9 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.jpgSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -84,10 +83,9 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.svgSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -95,10 +93,9 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.gifSample'),
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
              };
 
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -109,60 +106,54 @@ struct TestImageKnifeOptionChangedPage {
           .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5}
+                errorholderSrc: $r('app.media.icon_failed')
               };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('png')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('bmp')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://img-blog.csdn.net/20140514114029140',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('webp')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('svg')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/30df266a-485e-411e-b178-b9fb1d8e0748.svg',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
            Button('gif')
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
-               errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5}
+               errorholderSrc: $r('app.media.icon_failed')
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
 
@@ -170,10 +161,9 @@ struct TestImageKnifeOptionChangedPage {
             .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
+                errorholderSrc: $r('app.media.icon_failed')
               };
             }).margin({left:5}).backgroundColor(Color.Blue)
         }
@@ -181,7 +171,9 @@ struct TestImageKnifeOptionChangedPage {
 
         Text('下面为展示图片区域').margin({top:5})
         Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+            .width(300)
+            .height(300)
         }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
 
 
diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
index 024313f..8c90a6e 100644
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
@@ -24,10 +24,10 @@ struct TestImageKnifeOptionChangedPage2 {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin:{left:5,top:5,right:5,bottom:5},
+       
       thumbSizeMultiplier:0.1
     };
 
@@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage2 {
           .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
+                 
                 thumbSizeMultiplier:0.1,
                 transformation:new RotateImageTransformation(180)
               };
@@ -52,10 +52,10 @@ struct TestImageKnifeOptionChangedPage2 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
+                
                thumbSizeMultiplier:0.1,
                transformations:[new RotateImageTransformation(180)]
              };
@@ -64,10 +64,10 @@ struct TestImageKnifeOptionChangedPage2 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img-blog.csdn.net/20140514114029140",
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
+                
                thumbSizeMultiplier:0.1,
                transformations:[new GrayscaleTransformation()]
              };
@@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage2 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-               size: { width: '300', height: '300' },
+
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
+                
                thumbSizeMultiplier:0.1,
                transformations:[new SketchFilterTransformation()]
              };
@@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage2 {
 
         Text("下面为展示图片区域").margin({top:5})
         Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
 
 
diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
index 812d872..6b0d443 100644
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
@@ -27,10 +27,11 @@ struct TestImageKnifeOptionChangedPage3 {
     {
       loadSrc: $r('app.media.jpgSample'),
       mainScaleType: ScaleType.FIT_CENTER,
-      size: { width: '300', height: '300' },
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
     };
+  @State compWidht:number = 300
+  @State compHeight:number = 300
 
 
   build() {
@@ -42,46 +43,48 @@ struct TestImageKnifeOptionChangedPage3 {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.jpgSample'),
                 mainScaleType: ScaleType.FIT_CENTER,
-                size: { width: '350', height: '350' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 thumbSizeMultiplier:0.1,
                 transformation:new RotateImageTransformation(180),
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode:PlayMode.Normal,
-                  onFinish:()=>{
-                    console.log('play end!')
-                  }
-                }
               };
+              animateTo({
+                duration: 500,
+                curve: Curve.EaseInOut,
+                delay: 100,
+                iterations: 1,
+                playMode:PlayMode.Normal,
+                onFinish:()=>{
+                  console.log('play end!')
+                }
+              },()=>{
+                this.compHeight = 350
+                this.compWidht = 350
+              })
             }).margin({left:5}).backgroundColor(Color.Blue)
           Button("本地png")
             .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.pngSample'),
                 mainScaleType: ScaleType.FIT_CENTER,
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 thumbSizeMultiplier:0.1,
                 transformation:new RotateImageTransformation(180),
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode: PlayMode.Normal,
-                  onFinish: () => {
-                    console.log('play end!')
-                  }
-                }
               };
+              animateTo({
+                duration: 500,
+                curve: Curve.EaseInOut,
+                delay: 100,
+                iterations: 1,
+                playMode:PlayMode.Normal,
+                onFinish:()=>{
+                  console.log('play end!')
+                }
+              },()=>{
+                this.compHeight = 400
+                this.compWidht = 300
+              })
             }).margin({left:5}).backgroundColor(Color.Blue)
         }.margin({top:15})
         Flex({direction:FlexDirection.Row}){
@@ -90,46 +93,48 @@ struct TestImageKnifeOptionChangedPage3 {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.bmpSample'),
                 mainScaleType: ScaleType.FIT_CENTER,
-                size: { width: '100', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 thumbSizeMultiplier:0.1,
                 transformations:[new GrayscaleTransformation()],
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode: PlayMode.Normal,
-                  onFinish: () => {
-                    console.log('play end!')
-                  }
-                }
               };
+              animateTo({
+                duration: 500,
+                curve: Curve.EaseInOut,
+                delay: 100,
+                iterations: 1,
+                playMode:PlayMode.Normal,
+                onFinish:()=>{
+                  console.log('play end!')
+                }
+              },()=>{
+                this.compHeight = 250
+                this.compWidht = 350
+              })
             }).margin({left:5}).backgroundColor(Color.Blue)
           Button("本地webp")
             .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.webpSample'),
                 mainScaleType: ScaleType.FIT_CENTER,
-                size: { width: '300', height: '100' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 thumbSizeMultiplier:0.1,
                 transformations:[new SketchFilterTransformation()],
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode: PlayMode.Normal,
-                  onFinish: () => {
-                    console.log('play end!')
-                  }
-                }
               };
+              animateTo({
+                duration: 500,
+                curve: Curve.EaseInOut,
+                delay: 100,
+                iterations: 1,
+                playMode:PlayMode.Normal,
+                onFinish:()=>{
+                  console.log('play end!')
+                }
+              },()=>{
+                this.compHeight = 400
+                this.compWidht = 400
+              })
             }).margin({left:5}).backgroundColor(Color.Blue)
         }.margin({top:15})
         Flex({direction:FlexDirection.Row}){
@@ -137,21 +142,9 @@ struct TestImageKnifeOptionChangedPage3 {
           .onClick(()=>{
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-                size: { width: '200', height: '200' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin:{left:5,top:5,right:5,bottom:5},
                 displayProgress:true,
-                sizeAnimate: {
-                  duration: 500,
-                  curve: Curve.EaseInOut,
-                  delay: 100,
-                  iterations: 1,
-                  playMode: PlayMode.Normal,
-                  onFinish: () => {
-                    console.log('play end!')
-                  }
-                },
                 thumbSizeMultiplier:0.1,
                 transformation:new RotateImageTransformation(180)
               };
@@ -160,22 +153,10 @@ struct TestImageKnifeOptionChangedPage3 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
-               size: { width: '300', height: '300' },
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
                displayProgress:true,
                thumbSizeMultiplier:0.1,
-               sizeAnimate: {
-                 duration: 500,
-                 curve: Curve.EaseInOut,
-                 delay: 100,
-                 iterations: 1,
-                 playMode: PlayMode.Normal,
-                 onFinish: () => {
-                   console.log('play end!')
-                 }
-               },
                transformations:[new RotateImageTransformation(180)]
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -185,22 +166,10 @@ struct TestImageKnifeOptionChangedPage3 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img-blog.csdn.net/20140514114029140",
-               size: { width: '400', height: '400' },
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
                displayProgress:true,
                thumbSizeMultiplier:0.1,
-               sizeAnimate: {
-                 duration: 500,
-                 curve: Curve.EaseInOut,
-                 delay: 100,
-                 iterations: 1,
-                 playMode: PlayMode.Normal,
-                 onFinish: () => {
-                   console.log('play end!')
-                 }
-               },
                transformations:[new GrayscaleTransformation()]
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
@@ -208,29 +177,17 @@ struct TestImageKnifeOptionChangedPage3 {
           .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-               size: { width: '500', height: '500' },
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
-               margin:{left:5,top:5,right:5,bottom:5},
                displayProgress:true,
                thumbSizeMultiplier:0.1,
-               sizeAnimate: {
-                 duration: 500,
-                 curve: Curve.EaseInOut,
-                 delay: 100,
-                 iterations: 1,
-                 playMode: PlayMode.Normal,
-                 onFinish: () => {
-                   console.log('play end!')
-                 }
-               },
              };
            }).margin({left:5}).backgroundColor(Color.Blue)
         }.margin({top:15})
 
         Text("下面为展示图片区域").margin({top:5})
         Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight)
         }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
 
 
diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
index 763c1e5..2b97fd5 100644
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
@@ -31,10 +31,10 @@ struct TestImageKnifeOptionChangedPage4 {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 5, top: 5, right: 5, bottom: 5 },
+        
       thumbSizeMultiplier: 0.1,
       drawLifeCycle:this.createViewLifeCycle()
     };
@@ -48,10 +48,10 @@ struct TestImageKnifeOptionChangedPage4 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 5, top: 5, right: 5, bottom: 5 },
+                  
                 thumbSizeMultiplier: 0.1,
                 transformation: new RotateImageTransformation(180),
                 drawLifeCycle:this.createViewLifeCycle()
@@ -61,10 +61,10 @@ struct TestImageKnifeOptionChangedPage4 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 5, top: 5, right: 5, bottom: 5 },
+                  
                 thumbSizeMultiplier: 0.1,
                 transformations: [new RotateImageTransformation(180)],
                 drawLifeCycle:this.createViewLifeCycle()
@@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage4 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://img-blog.csdn.net/20140514114029140",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 5, top: 5, right: 5, bottom: 5 },
+                  
                 thumbSizeMultiplier: 0.1,
                 transformations: [new GrayscaleTransformation()],
                 drawLifeCycle:this.createViewLifeCycle()
@@ -89,10 +89,10 @@ struct TestImageKnifeOptionChangedPage4 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 5, top: 5, right: 5, bottom: 5 },
+                  
                 thumbSizeMultiplier: 0.1,
                 transformations: [new SketchFilterTransformation()],
                 drawLifeCycle:this.createViewLifeCycle()
@@ -102,7 +102,7 @@ struct TestImageKnifeOptionChangedPage4 {
 
         Text("下面为展示图片区域").margin({ top: 5 })
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
 
       }
diff --git a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
index be8abc0..25cae43 100644
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
@@ -32,7 +32,6 @@ struct TestImageKnifeOptionChangedPage5 {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
       drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -47,7 +46,6 @@ struct TestImageKnifeOptionChangedPage5 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -57,7 +55,6 @@ struct TestImageKnifeOptionChangedPage5 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -69,7 +66,6 @@ struct TestImageKnifeOptionChangedPage5 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://img-blog.csdn.net/20140514114029140",
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -79,7 +75,6 @@ struct TestImageKnifeOptionChangedPage5 {
             .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
                 drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@@ -89,7 +84,7 @@ struct TestImageKnifeOptionChangedPage5 {
 
         Text("下面为展示图片区域").margin({ top: 5 })
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
         }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
 
       }
diff --git a/entry/src/main/ets/pages/testPreloadPage.ets b/entry/src/main/ets/pages/testPreloadPage.ets
index 1bd9e42..b7cf66d 100644
--- a/entry/src/main/ets/pages/testPreloadPage.ets
+++ b/entry/src/main/ets/pages/testPreloadPage.ets
@@ -24,51 +24,51 @@ struct TestPreloadPage {
   @State imageKnifeOption1: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
-  @State ImageKnifeOption: ImageKnifeOption =
+  @State imageKnifeOption: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
   @State imageKnifeOption3: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
 
   @State imageKnifeOption4: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
   @State imageKnifeOption5: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
   @State imageKnifeOption6: ImageKnifeOption =
     {
       loadSrc: $r('app.media.jpgSample'),
-      size: { width: '300', height: '300' },
+
       placeholderSrc: $r('app.media.icon_loading'),
       errorholderSrc: $r('app.media.icon_failed'),
-      margin: { left: 15, top: 15, right: 15, bottom: 15 }
+         
     };
 
   build() {
@@ -99,10 +99,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.gifSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -132,10 +132,8 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: $r('app.media.gifSample'),
-                size: { width: '300', height: '300' },
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 },
                 dontAnimateFlag: true
               }
 
@@ -169,10 +167,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -201,10 +199,9 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption1 = {
                 loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 },
                 dontAnimateFlag: true
               };
             })
@@ -213,7 +210,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200)
 
         }
 
@@ -240,12 +237,12 @@ struct TestPreloadPage {
 
             Button('本地资源svg')
               .onClick(() => {
-              this.ImageKnifeOption = {
+              this.imageKnifeOption = {
                 loadSrc: $r('app.media.svgSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -278,12 +275,12 @@ struct TestPreloadPage {
 
             Button('网络资源svg')
               .onClick(() => {
-              this.ImageKnifeOption = {
+              this.imageKnifeOption = {
                 loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -293,7 +290,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
 
         }
 
@@ -322,10 +319,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption3 = {
                 loadSrc: $r('app.media.jpgSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -360,10 +357,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption3 = {
                 loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -371,7 +368,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200)
 
         }
 
@@ -400,10 +397,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption4 = {
                 loadSrc: $r('app.media.bmpSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -438,10 +435,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption4 = {
                 loadSrc: 'https://img-blog.csdn.net/20140514114029140',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -449,7 +446,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200)
 
         }
 
@@ -478,10 +475,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption5 = {
                 loadSrc: $r('app.media.pngSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -516,10 +513,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption5 = {
                 loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -527,7 +524,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption5 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200)
 
         }
 
@@ -556,10 +553,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption6 = {
                 loadSrc: $r('app.media.jpgSample'),
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               }
 
             })
@@ -594,10 +591,10 @@ struct TestPreloadPage {
               .onClick(() => {
               this.imageKnifeOption6 = {
                 loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
-                size: { width: '300', height: '300' },
+
                 placeholderSrc: $r('app.media.icon_loading'),
                 errorholderSrc: $r('app.media.icon_failed'),
-                margin: { left: 15, top: 15, right: 15, bottom: 15 }
+                   
               };
             })
               .margin({ left: 15 })
@@ -605,7 +602,7 @@ struct TestPreloadPage {
           }
           .margin({ top: 15 })
 
-          ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption6 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200)
 
         }
       }
diff --git a/imageknife/hvigorfile.js b/imageknife/hvigorfile.ts
similarity index 100%
rename from imageknife/hvigorfile.js
rename to imageknife/hvigorfile.ts
diff --git a/imageknife/index.ets b/imageknife/index.ets
index 582233d..d4ee93c 100644
--- a/imageknife/index.ets
+++ b/imageknife/index.ets
@@ -116,4 +116,7 @@ export {gifHandler} from './GifWorker'
 
 // 自定义组件新增
 // 自定义组件绘制生命周期
-export * from './src/main/ets/components/imageknife/interface/IDrawLifeCycle'
\ No newline at end of file
+export * from './src/main/ets/components/imageknife/interface/IDrawLifeCycle'
+
+// 日志管理
+export * from './src/main/ets/components/imageknife/utils/LogUtil'
\ No newline at end of file
diff --git a/imageknife/package.json b/imageknife/package.json
index 3ff96e7..40edd3c 100644
--- a/imageknife/package.json
+++ b/imageknife/package.json
@@ -12,7 +12,7 @@
 	},
 	"main": "index.ets",
 	"repository": "https://gitee.com/openharmony-tpc/ImageKnife",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"dependencies": {
 		"pako": "^1.0.5",
 		"js-binary-schema-parser": "^2.0.3",
@@ -22,13 +22,11 @@
 		"spark-md5": "^3.0.2"
 	},
 	"tags": [
-		"OpenHarmony",
-		"ImageKnife",
-		"glide",
 		"ImageCache",
 		"UI"
 	],
 	"license": "Apache License 2.0",
 	"devDependencies": {},
-	"name": "@ohos/imageknife"
+	"name": "@ohos/imageknife",
+	"type": "module"
 }
diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnife.ets b/imageknife/src/main/ets/components/imageknife/ImageKnife.ets
index adcf174..28de40a 100644
--- a/imageknife/src/main/ets/components/imageknife/ImageKnife.ets
+++ b/imageknife/src/main/ets/components/imageknife/ImageKnife.ets
@@ -34,6 +34,7 @@ import {FileReader} from '../cache/FileReader'
 import image from "@ohos.multimedia.image"
 import {CompressBuilder} from "../imageknife/compress/CompressBuilder"
 import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
+import {LogUtil} from '../imageknife/utils/LogUtil'
 
 export class ImageKnife {
   static readonly SEPARATOR: string = '/'
@@ -59,6 +60,8 @@ export class ImageKnife {
 
   private defaultLifeCycle: IDrawLifeCycle;
 
+
+
   private constructor(imgCtx) {
     this.imageKnifeContext = imgCtx;
 
@@ -326,7 +329,7 @@ export class ImageKnife {
       }
     }
     else {
-      console.log("key没有生成无法进入存取！")
+      LogUtil.log("key没有生成无法进入存取！")
     }
 
 
@@ -370,7 +373,7 @@ export class ImageKnife {
         request.diskCacheStrategy(none);
         this.loadResources(request);
       } else {
-        console.error("输入参数有问题！")
+        LogUtil.error("输入参数有问题！")
       }
     }
   }
diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets
index 8b096e7..7b5a2ce 100644
--- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets
+++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets
@@ -19,25 +19,23 @@ import { RequestOption } from '../imageknife/RequestOption'
 import { ImageKnifeData } from '../imageknife/ImageKnifeData'
 import { GIFFrame } from '../imageknife/utils/gif/GIFFrame'
 import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
+import {LogUtil} from '../imageknife/utils/LogUtil'
 
 
 @Component
 export struct ImageKnifeComponent {
-  @Watch('watchImageKnifeOption') @Link imageKnifeOption: ImageKnifeOption;
-  @State componentWidth: string = '100%'
-  @State componentHeight: string = '100%'
-  @State gifPixelMap: PixelMap = undefined;
-  drawLifeCycle: IDrawLifeCycle
-  autoPlay = true
-  // 有效onAreaChanged触发计数
-  private onAreaCount: number = 0
-  private preSize: {
-    width: string,
-    height: string
-  } = { width: '0', height: '0' }
+  @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
+
+  autoPlay:boolean = true
+
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private hasDisplayRetryholder = false;
+
+
+  private lastWidth:number = 0
+  private lastHeight:number = 0
+
   private currentWidth: number = 0
   private currentHeight: number = 0
 
@@ -84,25 +82,42 @@ export struct ImageKnifeComponent {
     }
 
   }
-
+  private canvasHasReady:boolean = false;
+  private firstDrawFlag:boolean = false;
+  private onReadyNext:()=>void = undefined
   build() {
     Canvas(this.context)
-      .width(this.componentWidth)
-      .height(this.componentHeight)
+      .width('100%')
+      .height('100%')
       .onAreaChange((oldValue: Area, newValue: Area) => {
         this.currentWidth = newValue.width as number
         this.currentHeight = newValue.height as number
-        console.log('onAreaChange stack currentWidth =' + this.currentWidth + '  currentHeight=' + this.currentHeight)
-        if (this.onAreaCount > 0) {
-          this.onAreaCount--;
-          this.imageKnifeExecute()
+        if(this.currentWidth <=0 || this.currentHeight <=0 ){
+          // 存在宽或者高为0,此次重回无意义,无需进行request请求
+        }else{
+          // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同  条件2:当前是第一次绘制
+          if( (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth)  || this.firstDrawFlag){
+            this.firstDrawFlag = false;
+            LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + '  currentHeight=' + this.currentHeight)
+            this.lastWidth = this.currentWidth
+            this.lastHeight = this.currentHeight
+            this.imageKnifeExecute()
+          }
         }
       })
-      .backgroundColor(this.imageKnifeOption.backgroundColor ? this.imageKnifeOption.backgroundColor : Color.White)
-      .margin(this.imageKnifeOption.margin ? this.imageKnifeOption.margin : { left: 0, top: 0, right: 0, bottom: 0 })
       .onReady(() => {
+        this.canvasHasReady = true;
+        if(this.onReadyNext){
+          LogUtil.log('ImageKnifeComponent onReadyNext is running!')
+          this.onReadyNext()
+          this.onReadyNext = undefined;
+        }
       })
-      .onClick(() => {
+      .onClick((event:ClickEvent) => {
+        // 需要将点击事件回传
+        if(this.imageKnifeOption.onClick){
+          this.imageKnifeOption.onClick(event)
+        }
         if (this.imageKnifeOption.canRetryClick && this.hasDisplayRetryholder) {
           this.retryClick()
         }
@@ -110,70 +125,60 @@ export struct ImageKnifeComponent {
   }
 
   watchImageKnifeOption() {
-    console.log('watchImageKnifeOption is happened!')
-
-    if (this.imageKnifeOption.sizeAnimate) {
-      animateTo(this.imageKnifeOption.sizeAnimate, () => {
-        this.resetGifData();
-        this.whetherWaitSize();
-      })
-    } else {
-      this.resetGifData();
-      this.whetherWaitSize();
-    }
+    LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!')
+    this.whetherWaitSize();
   }
 
-  whetherWaitSize() {
-    this.componentWidth = this.imageKnifeOption.size.width
-    this.componentHeight = this.imageKnifeOption.size.height
-    if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) {
-      console.log('whetherWaitSize 宽高不变 直接发送请求')
+  /**
+   * 判断当前是否有宽高,有直接重绘,没有则等待onAreaChange回调,当出现aboutToAppear第一次绘制的时候
+   * 给firstDrawFlag置为true,保证size即使没有变化也要进入 请求绘制流程
+   * @param drawFirst 是否是aboutToAppear第一次绘制
+   */
+  whetherWaitSize(drawFirst?:boolean) {
+    if(this.currentHeight <= 0 || this.currentWidth <= 0){
+      // 宽或者高没有高度,需要等待canvas组件初始化完成
+      if(drawFirst){
+        this.firstDrawFlag = true;
+      }
+    }else{
+      LogUtil.log('ImageKnifeComponent whetherWaitSize 宽高有效 直接发送请求')
       this.imageKnifeExecute()
-    } else {
-      this.onAreaCount++;
-      // waitSize changed
-      this.preSize = this.imageKnifeOption.size
-      console.log('whetherWaitSize 宽高改变 等待组件回调onAreaChange后发送请求')
     }
   }
 
-  newSizeEqualPreSize(newSize: {
-    width: string,
-    height: string
-  }): boolean {
-    if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) {
-      return true;
-    }
-    return false;
-  }
-
   retryClick() {
     this.hasDisplayRetryholder = false;
     this.imageKnifeExecute();
   }
 
-  aboutToAppear() {
-    console.log('imageKnifeComponent aboutToAppear happened!')
-    this.onAreaCount++;
-    this.componentWidth = this.imageKnifeOption.size.width
-    this.componentHeight = this.imageKnifeOption.size.height
+  /**
+   * 为了保证执行方法在canvas的onReay之后
+   * 如果onReady未初始化,则将最新的绘制生命周期绑定到onReadNext上
+   * 待onReady执行的时候执行
+   * @param nextFunction 下一个方法
+   */
+  runNextFunction(nextFunction:()=>void){
+    if(!this.canvasHasReady){
+      // canvas未初始化完成
+      this.onReadyNext = nextFunction;
+    }else{
+      nextFunction();
+    }
   }
 
   configNecessary(request: RequestOption) {
     request.load(this.imageKnifeOption.loadSrc)
       .addListener((err, data) => {
-        console.log('request.load callback')
-        this.displayMainSource(data)
+        LogUtil.log('ImageKnifeComponent request.load callback')
+        this.runNextFunction(this.displayMainSource.bind(this,data));
         return false;
       })
 
-    if (this.imageKnifeOption.size) {
       let realSize = {
         width: this.currentWidth,
         height: this.currentHeight
       }
       request.setImageViewSize(realSize)
-    }
   }
 
   configCacheStrategy(request: RequestOption) {
@@ -196,22 +201,21 @@ export struct ImageKnifeComponent {
   configDisplay(request: RequestOption) {
     if (this.imageKnifeOption.placeholderSrc) {
       request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
-        console.log('request.placeholder callback')
-        this.displayPlaceholder(data)
+        LogUtil.log('ImageKnifeComponent request.placeholder callback')
+        this.runNextFunction(this.displayPlaceholder.bind(this,data))
 
       })
     }
     if (this.imageKnifeOption.thumbSizeMultiplier) {
       request.thumbnail(this.imageKnifeOption.thumbSizeMultiplier, (data) => {
-        console.log('request.thumbnail callback')
-        this.displayThumbSizeMultiplier(data)
+        LogUtil.log('ImageKnifeComponent request.thumbnail callback')
+        this.runNextFunction(this.displayThumbSizeMultiplier.bind(this,data))
       }, this.imageKnifeOption.thumbSizeDelay)
     }
     if (this.imageKnifeOption.errorholderSrc) {
       request.errorholder(this.imageKnifeOption.errorholderSrc, (data) => {
-        console.log('request.errorholder callback')
-        this.displayErrorholder(data)
-
+        LogUtil.log('ImageKnifeComponent request.errorholder callback')
+        this.runNextFunction(this.displayErrorholder.bind(this, data))
       })
     }
 
@@ -232,21 +236,22 @@ export struct ImageKnifeComponent {
     if (this.imageKnifeOption.displayProgress) {
       request.addProgressListener((percentValue: number) => {
         // 如果进度条百分比 未展示大小,展示其动画
-        this.displayProgress(percentValue)
-
+        LogUtil.log('ImageKnifeComponent request.addProgressListener callback')
+        this.runNextFunction(this.displayProgress.bind(this,percentValue))
       })
     }
 
     if (this.imageKnifeOption.retryholderSrc) {
       request.retryholder(this.imageKnifeOption.retryholderSrc, (data) => {
-        console.log("RetryListener callback!")
+        LogUtil.log('ImageKnifeComponent request.retryholder callback')
         this.hasDisplayRetryholder = true
-        this.displayRetryholder(data)
+        this.runNextFunction(this.displayRetryholder.bind(this,data))
       })
     }
   }
   // imageknife 第一次启动和数据刷新后重新发送请求
   imageKnifeExecute() {
+    this.resetGifData()
     let request = new RequestOption();
     this.configNecessary(request);
     this.configCacheStrategy(request);
@@ -255,7 +260,6 @@ export struct ImageKnifeComponent {
   }
 
   displayPlaceholder(data: ImageKnifeData) {
-
     if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayPlaceholder', this.context, data, this.imageKnifeOption,
     this.currentWidth, this.currentHeight, (gifTimeId) => {
         this.setGifTimeId(gifTimeId)
@@ -274,7 +278,6 @@ export struct ImageKnifeComponent {
   }
 
   displayProgress(percent: number) {
-
     if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayProgress', this.context, percent, this.imageKnifeOption,
     this.currentWidth, this.currentHeight, (gifTimeId) => {
         this.setGifTimeId(gifTimeId)
@@ -293,7 +296,6 @@ export struct ImageKnifeComponent {
   }
 
   displayThumbSizeMultiplier(data: ImageKnifeData) {
-
     if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
     this.currentWidth, this.currentHeight, (gifTimeId) => {
         this.setGifTimeId(gifTimeId)
@@ -307,12 +309,9 @@ export struct ImageKnifeComponent {
         })
       }
     }
-
-
   }
 
   displayMainSource(data: ImageKnifeData) {
-
     if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayMainSource', this.context, data, this.imageKnifeOption,
     this.currentWidth, this.currentHeight, (gifTimeId) => {
         this.setGifTimeId(gifTimeId)
@@ -348,7 +347,6 @@ export struct ImageKnifeComponent {
   }
 
   displayErrorholder(data: ImageKnifeData) {
-
     if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayErrorholder', this.context, data, this.imageKnifeOption,
     this.currentWidth, this.currentHeight, (gifTimeId) => {
         this.setGifTimeId(gifTimeId)
@@ -367,16 +365,16 @@ export struct ImageKnifeComponent {
   }
 
   drawPlaceholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
-    console.log('default drawPlaceholder start!')
+    LogUtil.log('ImageKnifeComponent default drawPlaceholder start!')
     // @ts-ignore
     data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
-      console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
+      LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
       let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER
       context.save();
       context.clearRect(0, 0, compWidth, compHeight)
       ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
       context.restore();
-      console.log('default drawPlaceholder end!')
+      LogUtil.log('ImageKnifeComponent default drawPlaceholder end!')
     })
   }
 
@@ -422,31 +420,31 @@ export struct ImageKnifeComponent {
   }
 
   drawThumbSizeMultiplier(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
-    console.log('default drawThumbSizeMultiplier start!')
+    LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier start!')
     // @ts-ignore
     data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
-      console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
+      LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
       let scaleType = (typeof imageKnifeOption.thumbSizeMultiplierScaleType == 'number') ? imageKnifeOption.thumbSizeMultiplierScaleType : ScaleType.FIT_CENTER
       context.save();
       context.clearRect(0, 0, compWidth, compHeight)
       ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
       context.restore();
-      console.log('default drawThumbSizeMultiplier end!')
+      LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier end!')
     })
   }
 
   drawMainSource(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
-    console.log('default drawMainSource start!')
+    LogUtil.log('ImageKnifeComponent default drawMainSource start!')
     if (data.isPixelMap()) {
       // @ts-ignore
       data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
         let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
-        console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
+        LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
         context.save();
         context.clearRect(0, 0, compWidth, compHeight)
         ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
         context.restore();
-        console.log('default drawMainSource end!')
+        LogUtil.log('ImageKnifeComponent default drawMainSource end!')
       })
     } else if (data.isGIFFrame()) {
       this.drawGIFFrame(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
@@ -454,30 +452,30 @@ export struct ImageKnifeComponent {
   }
 
   drawRetryholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
-    console.log('default drawRetryholder start!')
+    LogUtil.log('ImageKnifeComponent default drawRetryholder start!')
     // @ts-ignore
     data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
-      console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
+      LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
       let scaleType = (typeof imageKnifeOption.retryholderScaleType == 'number') ? imageKnifeOption.retryholderScaleType : ScaleType.FIT_CENTER
       context.save();
       context.clearRect(0, 0, compWidth, compHeight)
       ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
       context.restore();
-      console.log('default drawRetryholder end!')
+      LogUtil.log('ImageKnifeComponent default drawRetryholder end!')
     })
   }
 
   drawErrorholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
-    console.log('default drawErrorholder start!')
+    LogUtil.log('ImageKnifeComponent default drawErrorholder start!')
     // @ts-ignore
     data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
-      console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
+      LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
       let scaleType = (typeof imageKnifeOption.errorholderSrcScaleType == 'number') ? imageKnifeOption.errorholderSrcScaleType : ScaleType.FIT_CENTER
       context.save();
       context.clearRect(0, 0, compWidth, compHeight)
       ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
       context.restore();
-      console.log('default drawErrorholder end!')
+      LogUtil.log('ImageKnifeComponent default drawErrorholder end!')
     })
   }
 
@@ -523,7 +521,14 @@ export struct ImageKnifeComponent {
     }
   }
 
+  aboutToAppear() {
+    LogUtil.log('ImageKnifeComponent aboutToAppear happened!')
+    this.canvasHasReady = false;
+    this.whetherWaitSize(true);
+  }
+
   aboutToDisappear() {
+    LogUtil.log('ImageKnifeComponent aboutToDisappear happened!')
     this.resetGifData();
   }
 
@@ -551,7 +556,7 @@ export struct ImageKnifeComponent {
 
   private drawGIFFrame(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
     let frames = data.drawGIFFrame.imageGIFFrames as GIFFrame[]
-    console.log('gifFrameLength =' + frames.length);
+    LogUtil.log('ImageKnifeComponent gifFrameLength =' + frames.length);
     if (imageKnifeOption.gif && (typeof (imageKnifeOption.gif.seekTo) == 'number') && imageKnifeOption.gif.seekTo >= 0) {
       this.autoPlay = false;
       context.clearRect(0, 0, compWidth, compHeight)
@@ -580,7 +585,7 @@ export struct ImageKnifeComponent {
   }
 
   private renderFrames(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) {
-    console.log('renderFrames frames length =' + frames.length)
+    LogUtil.log('ImageKnifeComponent renderFrames frames length =' + frames.length)
     let start = new Date().getTime();
     if (index === 0) {
       // 如果是第一帧，我们只从开始渲染前记录时间
@@ -641,7 +646,7 @@ export struct ImageKnifeComponent {
 
   // 具体绘制过程
   private canvasDrawPixelMap(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) {
-    console.log('canvasDrawPixelMap index=' + index)
+    LogUtil.log('ImageKnifeComponent canvasDrawPixelMap index=' + index)
     let frame = frames[index];
     let pixelmap = frame['drawPixelMap']
     let disposal = 0
@@ -660,7 +665,7 @@ export struct ImageKnifeComponent {
     ScaleTypeHelper.drawImageWithScaleType(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth, compHeight, px2vp(frame.dims.left), px2vp(frame.dims.top))
     // tips:worker如果不是在展示页面中创建,使用子线程回来的数据创建的图片,会导致canvas绘制不出来
     context.restore();
-    console.log('default drawMainSource end!')
+    LogUtil.log('ImageKnifeComponent default drawMainSource end!')
   }
 }
 
@@ -697,6 +702,8 @@ export enum ScaleType {
   NONE = 8
 }
 
+
+
 export class ScaleTypeHelper {
   static drawImageWithScaleType(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX: number, imageOffsetY: number) {
     let scaleW = compWidth / imageWidth
diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets
index 8f10f73..e68a0d3 100644
--- a/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets
+++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets
@@ -237,7 +237,6 @@ export class ImageKnifeDrawFactory{
             context.restore();
             }
             context.restore();
-            console.log('TestImageKnifeOptionChangedPage4 drawMainSource end!')
           })
           return true;
         }
diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets
index 4f4b21f..e8be662 100644
--- a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets
+++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets
@@ -23,12 +23,8 @@ import { AllCacheInfo, IAllCacheInfoCallback } from '../imageknife/interface/IAl
 import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
 import { ScaleType } from '../imageknife/ImageKnifeComponent'
 
+@Observed
 export class ImageKnifeOption {
-  // 组件大小
-  size: {
-    width: string,
-    height: string
-  };
 
   // 主图资源
   loadSrc: string | PixelMap | Resource;
@@ -76,6 +72,9 @@ export class ImageKnifeOption {
   // 用户自定义实现 绘制方案
   drawLifeCycle?: IDrawLifeCycle;
 
+  // 设置点击事件回调
+  onClick?:(event?: ClickEvent) => void
+
   gif?: {
     loopFinish?: (loopTime?) => void
     speedFactory?: number
@@ -83,7 +82,7 @@ export class ImageKnifeOption {
   }
 
 
-  // 变换相关
+  // 变换相关 不推荐使用该接口 建议直接使用transformation  transformations这2个接口实现
   transform?: {
     transformType: number,
     blur?: number,
@@ -119,16 +118,9 @@ export class ImageKnifeOption {
   // 输出缓存相关内容和信息
   allCacheInfoCallback?: IAllCacheInfoCallback;
 
-  imageFit?: ImageFit;
-  backgroundColor?: Color | number | string | Resource;
-  margin?: {
-    top?: number | string | Resource,
-    right?: number | string | Resource,
-    bottom?: number | string | Resource,
-    left?: number | string | Resource
-  } | number | string | Resource
 
-  sizeAnimate?: AnimateParam
+
+//  sizeAnimate?: AnimateParam 由业务自定义不再支持
 
   constructor() {
 
diff --git a/imageknife/src/main/ets/components/imageknife/RequestOption.ets b/imageknife/src/main/ets/components/imageknife/RequestOption.ets
index acbdf82..066dd27 100644
--- a/imageknife/src/main/ets/components/imageknife/RequestOption.ets
+++ b/imageknife/src/main/ets/components/imageknife/RequestOption.ets
@@ -42,7 +42,7 @@ import {BlurTransformation} from '../imageknife/transform/BlurTransformation'
 import {PixelationFilterTransformation} from '../imageknife/transform/PixelationFilterTransformation'
 import {MaskTransformation} from '../imageknife/transform/MaskTransformation'
 import {SwirlFilterTransformation} from '../imageknife/transform/SwirlFilterTransformation'
-
+import {LogUtil} from '../imageknife/utils/LogUtil'
 
 export class RequestOption {
   loadSrc: string | PixelMap | Resource;
@@ -324,11 +324,10 @@ export class RequestOption {
     return this;
   }
 
-
   // 占位图解析成功
   placeholderOnComplete(imageKnifeData: ImageKnifeData) {
-    console.log("placeholderOnComplete has called!");
-    console.log("Main Image is Ready:" + this.loadMainReady);
+    LogUtil.log("placeholderOnComplete has called!");
+    LogUtil.log("Main Image is Ready:" + this.loadMainReady);
     if (!this.loadMainReady && !(this.loadErrorReady || this.loadRetryReady) && !this.loadThumbnailReady) {
       // 主图未加载成功,并且未加载失败  显示占位图  主图加载成功或者加载失败后=>不展示占位图
       this.placeholderFunc(imageKnifeData)
@@ -337,7 +336,7 @@ export class RequestOption {
 
   // 占位图解析失败
   placeholderOnError(error) {
-    console.log("占位图解析失败 error =" + error)
+    LogUtil.log("占位图解析失败 error =" + error)
   }
 
 
@@ -353,7 +352,7 @@ export class RequestOption {
 
   // 缩略图解析失败
   thumbholderOnError(error) {
-    console.log("缩略图解析失败 error =" + error)
+    LogUtil.log("缩略图解析失败 error =" + error)
   }
 
   // 加载失败 占位图解析成功
@@ -367,7 +366,7 @@ export class RequestOption {
 
   //加载失败 占位图解析失败
   errorholderOnError(error) {
-    console.log("失败占位图解析失败 error =" + error)
+    LogUtil.log("失败占位图解析失败 error =" + error)
   }
 
   retryholderOnComplete(imageKnifeData: ImageKnifeData){
@@ -378,7 +377,7 @@ export class RequestOption {
   }
 
   retryholderOnError(error){
-    console.log("重试占位图解析失败 error ="+ error)
+    LogUtil.log("重试占位图解析失败 error ="+ error)
   }
 
   loadComplete(imageKnifeData: ImageKnifeData) {
@@ -395,8 +394,8 @@ export class RequestOption {
   }
 
   loadError(err) {
-    console.log("loadError:"+err);
-    console.log("loadError stack=:"+JSON.stringify(err.stack));
+    LogUtil.log("loadError:"+err);
+    LogUtil.log("loadError stack=:"+JSON.stringify(err.stack));
     //失败占位图展示规则
     if (this.retryholderFunc) {
       // 重试图层优先于加载失败展示
diff --git a/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets
index a829038..a195e7a 100644
--- a/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets
+++ b/imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets
@@ -20,6 +20,7 @@ import { ParseImageUtil } from '../utils/ParseImageUtil'
 import { SupportFormat } from '../utils/FileTypeUtil'
 import { SVGParseImpl } from '../utils/svg/SVGParseImpl'
 import { ParseResClient } from '../resourcemanage/ParseResClient'
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from '@ohos.multimedia.image'
 
 export class ErrorHolderManager {
@@ -40,7 +41,7 @@ export class ErrorHolderManager {
   }
 
   private displayErrorholder(onComplete, onError) {
-    console.log("displayErrorholder")
+    LogUtil.log("displayErrorholder")
     if ((typeof (this.options.errorholderSrc as image.PixelMap).isEditable) == 'boolean') {
       let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.errorholderSrc as PixelMap)
       onComplete(imageKnifeData);
diff --git a/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets
index a3c23f7..434520c 100644
--- a/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets
+++ b/imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets
@@ -21,6 +21,7 @@ import {ParseImageUtil} from '../utils/ParseImageUtil'
 import {ParseResClient} from '../resourcemanage/ParseResClient'
 import { SupportFormat } from '../utils/FileTypeUtil'
 import { SVGParseImpl } from '../utils/svg/SVGParseImpl'
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import resourceManager from '@ohos.resourceManager';
 import image from "@ohos.multimedia.image"
 
@@ -42,7 +43,7 @@ export class PlaceHolderManager {
   }
 
   private displayPlaceholder(onComplete, onError) {
-    console.log("displayPlaceholder")
+    LogUtil.log("displayPlaceholder")
     if ((typeof (this.options.placeholderSrc as image.PixelMap).isEditable) == 'boolean') {
       let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap)
       onComplete(imageKnifeData);
diff --git a/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets b/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets
index ff186a0..93ee6ea 100644
--- a/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets
+++ b/imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets
@@ -21,6 +21,7 @@ import {ParseImageUtil} from '../utils/ParseImageUtil'
 import {ParseResClient} from '../resourcemanage/ParseResClient'
 import { SupportFormat } from '../utils/FileTypeUtil'
 import { SVGParseImpl } from '../utils/svg/SVGParseImpl'
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import resourceManager from '@ohos.resourceManager';
 import image from "@ohos.multimedia.image"
 
@@ -42,7 +43,7 @@ export class RetryHolderManager {
   }
 
   private displayRetryholder(onComplete, onError) {
-    console.log("displayRetryholder")
+    LogUtil.log("displayRetryholder")
     if ((typeof (this.options.retryholderSrc as image.PixelMap).isEditable) == 'boolean') {
       let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap)
       onComplete(imageKnifeData);
diff --git a/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets b/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets
index 51f099e..bdc85e0 100644
--- a/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets
+++ b/imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets
@@ -46,9 +46,12 @@ export class DownloadClient implements IDataFetch {
         loadTask = downloadTask;
 
         loadTask.on('progress', (receivedSize, totalSize) => {
-          let percent = Math.round(((receivedSize * 1.0) / (totalSize * 1.0)) * 100)
-          if (request.progressFunc) {
-            request.progressFunc(percent);
+          if(totalSize > 0) {
+            // 并不是所有服务器都会返回totalSize 当没有文件大小的时候,下载进度没有百分比回调,只能知道目前下载了多少数据量
+            let percent = Math.round(((receivedSize * 1.0) / (totalSize * 1.0)) * 100)
+            if (request.progressFunc) {
+              request.progressFunc(percent);
+            }
           }
         });
 
diff --git a/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets b/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets
index 43a9ec3..0a9a3a8 100644
--- a/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets
+++ b/imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets
@@ -31,6 +31,7 @@ import image from "@ohos.multimedia.image"
 import { SVGParseImpl } from '../utils/svg/SVGParseImpl'
 import { GIFParseImpl } from '../utils/gif/GIFParseImpl'
 import { GIFFrame } from '../utils/gif/GIFFrame'
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 
 export interface AsyncString {
   (data: string): void;
@@ -88,7 +89,7 @@ export class RequestManager {
   }
 
   static execute(option: RequestOption, memoryCache1: LruCache<string, any>, diskMemoryCache1: DiskLruCache, dataFetch: IDataFetch, resourceFetch: IResourceFetch) {
-    console.log("RequestManager execute")
+    LogUtil.log("RequestManager execute")
     let manager = new RequestManager(option, memoryCache1, diskMemoryCache1, dataFetch, resourceFetch);
     return new Promise<PixelMap>(manager.process.bind(manager))
       .then(option.loadComplete.bind(option))
@@ -98,9 +99,9 @@ export class RequestManager {
 
   loadCompleteAfter() {
     try { // 内部消化问题
-      console.log("loadCompleteAfter!")
+      LogUtil.log("loadCompleteAfter!")
       if (this.options.allCacheInfoCallback) {
-        console.log("RequestOption =" + JSON.stringify(this.options));
+        LogUtil.log("RequestOption =" + JSON.stringify(this.options));
 
         // 内存缓存
         let allCacheInfo = new AllCacheInfo();
@@ -124,7 +125,7 @@ export class RequestManager {
         this.options.allCacheInfoCallback(allCacheInfo)
       }
     } catch (err) {
-      console.log("after err =" + err)
+      LogUtil.log("after err =" + err)
     }
   }
 
@@ -134,12 +135,12 @@ export class RequestManager {
   private mRunReason: RunReason = RunReason.INITIALIZE;
 
   process(onComplete, onError) {
-    console.log("RequestManager process !");
+    LogUtil.log("RequestManager process !");
     this.loadLeve1MemoryCache(onComplete, onError)
   }
 
   private runWrapped(request: RequestOption, runReason: RunReason, onComplete, onError) {
-    console.log("RequestManager runWrapped")
+    LogUtil.log("RequestManager runWrapped")
     if (runReason == RunReason.INITIALIZE) {
       this.mStage = this.getNextStage(request, this.mStage);
       this.searchLoadFrom(this.options, this.mStage, onComplete, onError);
@@ -170,7 +171,7 @@ export class RequestManager {
 
   //究竟从哪里加载数据
   private searchLoadFrom(request: RequestOption, current: Stage, onComplete, onError) {
-    console.log("RequestManager searchLoadFrom")
+    LogUtil.log("RequestManager searchLoadFrom")
     if (current == Stage.RESOURCE_CACHE) {
       this.loadDiskFromTransform(request, onComplete, onError);
     } else if (current == Stage.DATA_CACHE) {
@@ -194,13 +195,13 @@ export class RequestManager {
 
   // 加载本地资源
   private loadSourceFormNative(request: RequestOption, onComplete, onError) {
-    console.log("RequestManager loadSourceFormNative")
+    LogUtil.log("RequestManager loadSourceFormNative")
     // 本地解析后进行一级缓存
     let success = (arrayBuffer) => {
       // 使用媒体子系统 ImageSource解析文件 获取PixelMap
       let fileTypeUtil = new FileTypeUtil();
       let typeValue = fileTypeUtil.getFileType(arrayBuffer)
-      console.log("RequestManager  - 文件类型为= " + typeValue)
+      LogUtil.log("RequestManager  - 文件类型为= " + typeValue)
       // gif处理
       if(ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag){
         // 处理gif
@@ -240,7 +241,7 @@ export class RequestManager {
   }
   // 加载磁盘缓存 原图
   private loadDiskFromSource(request: RequestOption, onComplete, onError) {
-    console.log("RequestManager loadDiskFromSource")
+    LogUtil.log("RequestManager loadDiskFromSource")
     let cached = this.mDiskCacheProxy.getValue(request.generateDataKey)
     if (cached != null) {
       this.parseDiskFile2PixelMap(request, cached, onComplete, onError)
@@ -252,7 +253,7 @@ export class RequestManager {
 
   // 加载磁盘缓存 变换后图片
   private loadDiskFromTransform(request: RequestOption, onComplete, onError) {
-    console.log("RequestManager loadDiskFromTransform")
+    LogUtil.log("RequestManager loadDiskFromTransform")
     let cached = this.mDiskCacheProxy.getValue(request.generateResourceKey)
     if (cached != null) {
       this.parseDiskTransformFile2PixelMap(request, cached, onComplete, onError)
@@ -263,7 +264,7 @@ export class RequestManager {
   }
 
   parseSource(request: RequestOption, onComplete, onError) {
-      console.log("RequestManager parseSource")
+      LogUtil.log("RequestManager parseSource")
       if ((typeof (request.loadSrc as image.PixelMap).isEditable) == 'boolean') {
         // PixelMap 外层捕获效率更高，不会进入这里
       } else if (typeof request.loadSrc == 'string') {
@@ -273,14 +274,14 @@ export class RequestManager {
         if (typeof res.id != 'undefined' && typeof res.id != 'undefined') {
           this.loadSourceFormNative(request, onComplete, onError)
         } else {
-          console.log("输入参数有问题！")
+          LogUtil.log("输入参数有问题！")
         }
       }
 
   }
 
   private loadLeve1MemoryCache(onComplete, onError) {
-    console.log("RequestManager loadLeve1MemoryCache")
+    LogUtil.log("RequestManager loadLeve1MemoryCache")
     // 一级缓存 内存获取
     let cache = this.mMemoryCacheProxy.loadMemoryCache(this.options.generateCacheKey, this.options.isCacheable);
     if (cache == null || typeof cache == 'undefined') {
@@ -414,7 +415,7 @@ export class RequestManager {
   }
 
   private downloadSuccess(source: ArrayBuffer, onComplete, onError) {
-    console.info('Download task completed.');
+    LogUtil.log('Download task completed.');
 
     if(source == null || source == undefined || source.byteLength <= 0){
       onError('Download task completed. but download file is empty!')
@@ -445,7 +446,7 @@ export class RequestManager {
           await this.mDiskCacheProxy.putValue(this.options.generateDataKey, arraybuffer)
         })
         .catch(err=>{
-          console.log('download file is ='+ImageKnifeData.GIF+'and save diskLruCache error ='+ err)
+          LogUtil.log('download file is ='+ImageKnifeData.GIF+'and save diskLruCache error ='+ err)
         })
     }else if(ImageKnifeData.SVG == filetype){
       // 处理svg
@@ -459,7 +460,7 @@ export class RequestManager {
           await this.mDiskCacheProxy.putValue(this.options.generateDataKey, arraybuffer)
         })
         .catch(err=>{
-          console.log('download file is ='+ImageKnifeData.SVG+'and save diskLruCache error ='+ err)
+          LogUtil.log('download file is ='+ImageKnifeData.SVG+'and save diskLruCache error ='+ err)
         })
     } else {
       // 进行变换
@@ -572,12 +573,12 @@ export class RequestManager {
       if(err){
         onError(err)
       }
-      console.log("gifProcess data is null:"+(data == null));
+      LogUtil.log("gifProcess data is null:"+(data == null));
       if(!!data){
         let imageKnifeData = this.createImageGIFFrame(ImageKnifeType.GIFFRAME,data)
-        console.log('gifProcess 生成gif 返回数据类型')
+        LogUtil.log('gifProcess 生成gif 返回数据类型')
         if(cacheStrategy){
-          console.log('gifProcess 生成gif并且存入了缓存策略')
+          LogUtil.log('gifProcess 生成gif并且存入了缓存策略')
           cacheStrategy(imageKnifeData)
         }
         onComplete(imageKnifeData)
diff --git a/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets
index 5a84076..bd37413 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets
@@ -20,6 +20,7 @@ import { RequestOption } from "../../imageknife/RequestOption"
 import { TransformUtils } from "../transform/TransformUtils"
 import image from "@ohos.multimedia.image"
 import { fastBlur } from "../utils/FastBlur"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 
 
 export class BlurTransformation implements BaseTransform<PixelMap> {
@@ -35,7 +36,7 @@ export class BlurTransformation implements BaseTransform<PixelMap> {
 
   transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";BlurTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";BlurTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";BlurTransformation buf is empty", null);
       }
@@ -73,7 +74,7 @@ export class BlurTransformation implements BaseTransform<PixelMap> {
         fastBlur.blur(data, this._mRadius, true, func);
       })
         .catch((e) => {
-        console.log(Constants.PROJECT_TAG + ";error:" + e);
+        LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
         func(e, null);
       })
     })
diff --git a/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets
index 6afc66b..aa05957 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets
@@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
 import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 
 
@@ -36,7 +37,7 @@ export class BrightnessFilterTransformation implements BaseTransform<PixelMap> {
 
   async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty", null);
       }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets
index 33956ce..b152aac 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets
@@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
 import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 
 
@@ -48,7 +49,7 @@ export class ContrastFilterTransformation implements BaseTransform<PixelMap> {
 
   async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty", null);
       }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets
index 6d64065..d526c40 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets
@@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
 import { TransformUtils } from "../transform/TransformUtils"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 
 export class CropCircleTransformation implements BaseTransform<PixelMap> {
@@ -34,7 +35,7 @@ export class CropCircleTransformation implements BaseTransform<PixelMap> {
 
   transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.error(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty", null);
       }
@@ -77,7 +78,7 @@ export class CropCircleTransformation implements BaseTransform<PixelMap> {
         this.transformCircle(p, func);
       })
       .catch(e => {
-        console.error(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " transform e:" + e);
+        LogUtil.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " transform e:" + e);
         if (func) {
           func(Constants.PROJECT_TAG + CropCircleTransformation.TAG + "e" + e, null);
         }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets
index 86495f1..3cd5843 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets
@@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
 import { TransformUtils } from "../transform/TransformUtils"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 
 export class CropCircleWithBorderTransformation implements BaseTransform<PixelMap> {
@@ -53,7 +54,7 @@ export class CropCircleWithBorderTransformation implements BaseTransform<PixelMa
 
   transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty", null);
       }
@@ -96,7 +97,7 @@ export class CropCircleWithBorderTransformation implements BaseTransform<PixelMa
         this.transformPixelMap(pixelMap, outWith, outHeight, func);
       })
       .catch(e => {
-        console.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e);
+        LogUtil.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e);
         if (func) {
           func(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e, null);
         }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets
index 63b7b21..92d0256 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets
@@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
 import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 
 import image from "@ohos.multimedia.image"
 
@@ -29,7 +30,7 @@ export class CropSquareTransformation implements BaseTransform<PixelMap> {
 
   transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty", null);
       }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets
index f06cc09..c8af2ce 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets
@@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
 import { TransformUtils } from "../transform/TransformUtils"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 
 export class CropTransformation implements BaseTransform<PixelMap> {
@@ -40,7 +41,7 @@ export class CropTransformation implements BaseTransform<PixelMap> {
 
   transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";CropTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";CropTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";CropTransformation buf is empty", null);
       }
@@ -85,7 +86,7 @@ export class CropTransformation implements BaseTransform<PixelMap> {
           func("", data);
         })
         .catch((e) => {
-          console.log(Constants.PROJECT_TAG + ";error:" + e);
+          LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
           func(e, null);
         })
     })
diff --git a/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets
index d146073..2333d47 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets
@@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
 import { TransformUtils } from "../transform/TransformUtils"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 
 export class GrayscaleTransformation implements BaseTransform<PixelMap> {
@@ -27,7 +28,7 @@ export class GrayscaleTransformation implements BaseTransform<PixelMap> {
 
   async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty", null);
       }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets
index ccaeaca..91b9431 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets
@@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
 import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 
 /**
@@ -34,7 +35,7 @@ export class InvertFilterTransformation implements BaseTransform<PixelMap> {
 
   async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty", null);
       }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets
index 27130e6..51a413c 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets
@@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
 import { MaskUtils } from "../utils/MaskUtils"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 import resmgr from "@ohos.resourceManager"
 
@@ -34,7 +35,7 @@ export class MaskTransformation implements BaseTransform<PixelMap> {
 
   async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";MaskTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";MaskTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";MaskTransformation buf is empty", null);
       }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets
index 6ea204f..6aece60 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets
@@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
 import { TransformUtils } from "../transform/TransformUtils"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 import { pixelUtils } from "../utils/PixelUtils"
 
@@ -40,7 +41,7 @@ export class PixelationFilterTransformation implements BaseTransform<PixelMap> {
 
   transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty", null);
       }
@@ -78,7 +79,7 @@ export class PixelationFilterTransformation implements BaseTransform<PixelMap> {
           pixelUtils.pixel(data, this._mPixel, func);
         })
         .catch((e) => {
-          console.log(Constants.PROJECT_TAG + ";error:" + e);
+          LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
           func(e, null);
         })
     })
diff --git a/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets
index 3034c55..4fc0325 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets
@@ -17,6 +17,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
 import { TransformUtils } from "../transform/TransformUtils"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 
 import image from "@ohos.multimedia.image"
 
@@ -33,7 +34,7 @@ export class RotateImageTransformation implements BaseTransform<PixelMap> {
 
   transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty", null);
       }
@@ -72,7 +73,7 @@ export class RotateImageTransformation implements BaseTransform<PixelMap> {
         func("", data);
       })
         .catch((e) => {
-        console.log(Constants.PROJECT_TAG + ";error:" + e);
+        LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
         func(e, null);
       })
     })
diff --git a/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets
index da5fcb3..dca0d44 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets
@@ -18,6 +18,7 @@ import { ArcPoint } from "../entry/ArcPoint"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
 import { TransformUtils } from "../transform/TransformUtils"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 
 import image from "@ohos.multimedia.image"
 
@@ -49,10 +50,10 @@ export class RoundedCornersTransformation implements BaseTransform<PixelMap> {
   }
 
   transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
-    console.log('RoundedCornersTransformation = '+ this.getName()
+    LogUtil.log('RoundedCornersTransformation = '+ this.getName()
     + 'buf is null ='+ (buf == null));
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty", null);
       }
@@ -114,11 +115,11 @@ export class RoundedCornersTransformation implements BaseTransform<PixelMap> {
         }
       })
         .catch((error) => {
-        console.log(Constants.PROJECT_TAG + "RoundedCornersTransformation error:" + error);
+        LogUtil.log(Constants.PROJECT_TAG + "RoundedCornersTransformation error:" + error);
       });
     })
       .catch((e) => {
-      console.log(Constants.PROJECT_TAG + ";error:" + e);
+      LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
       if (func) {
         func(e, null);
       }
diff --git a/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets b/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets
index bca60c4..98f954e 100644
--- a/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets
+++ b/imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets
@@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
 import { AsyncTransform } from "../transform/AsyncTransform"
 import { Constants } from "../constants/Constants"
 import { RequestOption } from "../../imageknife/RequestOption"
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 import image from "@ohos.multimedia.image"
 
 /**
@@ -31,7 +32,7 @@ export class SepiaFilterTransformation implements BaseTransform<PixelMap> {
 
   async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
     if (!buf || buf.byteLength <= 0) {
-      console.log(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty");
+      LogUtil.log(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty");
       if (func) {
         func(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty", null);
       }
diff --git a/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets b/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets
index cb9a367..d4ced98 100644
--- a/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets
+++ b/imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets
@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import {LogUtil} from '../../imageknife/utils/LogUtil'
 export class FileTypeUtil {
   private map = new Map();
   private READ_MIN_LENGTH;
@@ -44,7 +44,7 @@ export class FileTypeUtil {
     }
 
     let dataView = new DataView(arraybuffer);
-    console.log('dataView +'+this.getDataViewAt(dataView,0)+this.getDataViewAt(dataView,1))
+    LogUtil.log('dataView +'+this.getDataViewAt(dataView,0)+this.getDataViewAt(dataView,1))
 
     for(var [key,value] of this.map){
       let keySplit = key.split(',')
@@ -58,10 +58,10 @@ export class FileTypeUtil {
           fileMagic+=this.getDataViewAt(dataView,offset+start)
           start++;
         }
-//        console.log('magic='+fileMagic+' keySplit[1]='+keySplit[1]+' fileMagic == keySplit[1] ='+(fileMagic == keySplit[1])+
+//        LogUtil.log('magic='+fileMagic+' keySplit[1]='+keySplit[1]+' fileMagic == keySplit[1] ='+(fileMagic == keySplit[1])+
 //        ' fileMagic type ='+typeof(fileMagic) + ' keySplit[1]='+typeof(keySplit[1]))
         if(fileMagic == keySplit[1]){
-          console.log('匹配到了 fileType='+value)
+          LogUtil.log('匹配到了 fileType='+value)
           fileType = value
           break;
         }
@@ -105,7 +105,7 @@ export class FileTypeUtil {
 
   private printMapContent(){
     for(var [key,value] of this.map){
-      console.log('key='+key+'---value='+value)
+      LogUtil.log('key='+key+'---value='+value)
     }
   }
 
diff --git a/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets b/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets
new file mode 100644
index 0000000..27ff820
--- /dev/null
+++ b/imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2022 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.
+ */
+export class LogUtil {
+  public static OFF: number = 1
+  public static LOG: number = 2
+  public static DEBUG: number = 3
+  public static INFO: number = 4
+  public static WARN: number = 5
+  public static ERROR: number = 6
+  public static ALL: number = 7
+  public static mLogLevel:number = LogUtil.OFF;
+
+  public static debug(message: string, ...args: any[]) {
+    if (LogUtil.mLogLevel >= LogUtil.DEBUG) {
+      console.debug(message, args)
+    }
+  }
+
+  public static info(message: string, ...args: any[]) {
+    if (LogUtil.mLogLevel >= LogUtil.INFO) {
+      console.info(message, args)
+    }
+  }
+
+  public static log(message: string, ...args: any[]) {
+    if (LogUtil.mLogLevel >= LogUtil.LOG) {
+      console.log(message, args)
+    }
+  }
+
+  public static warn(message: string, ...args: any[]) {
+    if (LogUtil.mLogLevel >= LogUtil.WARN) {
+      console.warn(message, args)
+    }
+  }
+
+  // error 不做拦截
+  public static error(message: string, ...args: any[]) {
+    if(LogUtil.mLogLevel >= LogUtil.ERROR) {
+      console.error(message, args)
+    }
+  }
+}
\ No newline at end of file
diff --git a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets
index aa82948..96d6ea4 100644
--- a/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets
+++ b/imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets
@@ -16,20 +16,22 @@ import { IParseGif } from './IParseGif'
 import { GIFFrame } from './GIFFrame'
 import { LoadType } from '../../../../../../../GifWorker'
 import { parseBufferToFrame } from './parse/GIFParse'
+import {LogUtil} from '../../utils/LogUtil'
 import image from '@ohos.multimedia.image'
 
 export class GIFParseImpl implements IParseGif {
   parseGifs(imageinfo: ArrayBuffer, callback: (data?, err?) => void, worker?,runMainThread?:boolean) {
     let resolveWorker = worker;
-    console.log('parseGifs resolveWorker1 is null =' + (resolveWorker == null))
+    LogUtil.log('parseGifs resolveWorker1 is null =' + (resolveWorker == null))
     if (!resolveWorker) {
       resolveWorker = globalThis.ImageKnife.getGifWorker();
     }
-    console.log('parseGifs resolveWorker2 is null =' + (resolveWorker == null))
+    LogUtil.log('parseGifs resolveWorker2 is null =' + (resolveWorker == null))
 
     if (!!resolveWorker && !runMainThread) {
-      console.log('parseGifs in worker thread!')
-      this.useWorkerParse(resolveWorker, imageinfo, (data, err) => {
+      LogUtil.log('parseGifs in worker thread!')
+      let copyBuffer = imageinfo.slice(0);
+      this.useWorkerParse(resolveWorker, copyBuffer, (data, err) => {
         if (err) {
           callback(undefined, err)
         } else {
@@ -48,9 +50,9 @@ export class GIFParseImpl implements IParseGif {
         }
       })
     } else {
-      console.log('parseGifs in main thread!')
+      LogUtil.log('parseGifs in main thread!')
       let frames = parseBufferToFrame(imageinfo)
-      console.log('frames length =' + frames.length)
+      LogUtil.log('frames length =' + frames.length)
       this.createPixelMapAll(frames).then((pixelmaps) => {
         if (pixelmaps.length == frames.length) {
           for (let i = 0;i < frames.length; i++) {
@@ -58,11 +60,11 @@ export class GIFParseImpl implements IParseGif {
             frame['drawPixelMap'] = pixelmaps[i];
             frame['patch'] = null;
           }
-          console.log('parseGifs in main thread! callback is done!')
+          LogUtil.log('parseGifs in main thread! callback is done!')
           callback(frames, undefined)
         }
       }).catch(err => {
-        console.log('parseGifs in main thread! err =' + err)
+        LogUtil.log('parseGifs in main thread! err =' + err)
         callback(undefined, err)
       })
     }
@@ -97,7 +99,7 @@ export class GIFParseImpl implements IParseGif {
     }
 
     worker.onexit = function () {
-      console.log('gifWork worker.onexit!')
+      LogUtil.log('gifWork worker.onexit!')
     }
 
     worker.onmessage = (e) => {
diff --git a/imageknife/src/main/ets/components/imageknife/utils/svg/SVGImageViewModel.ets b/imageknife/src/main/ets/components/imageknife/utils/svg/SVGImageViewModel.ets
deleted file mode 100644
index c7480da..0000000
--- a/imageknife/src/main/ets/components/imageknife/utils/svg/SVGImageViewModel.ets
+++ /dev/null
@@ -1,1107 +0,0 @@
-/*
- * Copyright (C) 2022 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 image from '@ohos.multimedia.image'
-import util from '@ohos.util'
-import display from '@ohos.display';
-import configuration from '@system.configuration';
-import {
-  SVG,
-  PathView,
-  ImageSvg,
-  CircleView,
-  EllipseView,
-  LineView,
-  PolyLineView,
-  PolygonView,
-  RectView,
-  Group,
-  Switch,
-  TextView,
-  Use,
-  SVGXMLConstants,
-  SVGAttrConstants,
-  SVGManager,
-  SVGXMLChecker
-} from '@ohos/svg';
-
-export default class SVGImageViewModel {
-  private svgString: string = "";
-  private rawfileName: string = "";
-  private media: Resource;
-  svgs: SVG[] = []
-  svg: SVG = new SVG();
-  isPx: boolean = false;
-  private context: OffscreenCanvasRenderingContext2D
-  private svgManager: SVGManager = SVGManager.getInstance();
-
-  deviceW: number = display.getDefaultDisplaySync().width;
-  deviceH: number = display.getDefaultDisplaySync().height;
-
-  /**
-   * 设置svg的字符串
-   * @param svgString svg字符串
-   */
-  public setSvgString(svgString: string) {
-    this.svgString = svgString;
-    this.parseSvgFromString();
-  }
-
-  /**
-   * 设置rawfile下的svg
-   * @param svgRawfile rawfile下的svg文件名
-   */
-  public setSvgRawfile(svgRawfile: string) {
-    this.rawfileName = svgRawfile;
-    this.parseSvgFromRawfile();
-  }
-
-  /**
-   * 设置media下的svg
-   * @param media media下的svg文件
-   */
-  public setSvgMedia(media: Resource) {
-    this.media = media;
-    this.parseSvgFromMedia();
-  }
-
-  public setSvgUint8Array(uint8:Uint8Array){
-    this.svgString = this.unit8ArrayToString(uint8)
-    this.parseSvgFromString();
-  }
-
-  private parseSvgFromMedia() {
-    globalThis.resourceManager.getMedia(this.media.id, (error, value) => {
-      if (error != null) {
-        console.error("media get error:" + error)
-        throw new Error("未找到media下的svg")
-      } else {
-        this.svgString = this.unit8ArrayToString(value);
-        this.parseSvgFromString();
-      }
-    })
-  }
-
-  private parseSvgFromRawfile() {
-    globalThis.resourceManager.getRawFile(this.rawfileName, (error, value) => {
-      if (error != null) {
-        console.error("rawfile get error:" + error)
-        throw new Error("未找到rawfile下的svg")
-      } else {
-        this.svgString = this.unit8ArrayToString(value);
-        this.parseSvgFromString();
-      }
-    })
-  }
-
-  private unit8ArrayToString(fileData) {
-//    var dataString = "";
-//    for (var i = 0; i < fileData.length; i++) {
-//      dataString += String.fromCharCode(fileData[i]);
-//    }
-//    return dataString
-  let textDecoder = new util.TextDecoder("utf-8", {ignoreBOM:true});
-    let retStr = textDecoder.decode(fileData, {stream: false});
-    return retStr;
-  }
-
-  private parseSvgFromString() {
-    this.svgs.length = 0;
-    this.svgManager.parseString(this.svgString, (jsonString) => {
-      var reg = new RegExp("stroke-", "g")
-      jsonString = String(jsonString).replace(reg, "stroke_");
-      reg = new RegExp("font-", "g")
-      jsonString = String(jsonString).replace(reg, "font_");
-      reg = new RegExp("fill-", "g")
-      jsonString = String(jsonString).replace(reg, "fill_");
-      var svgElements: any[] = JSON.parse(jsonString).elements;
-      if (!SVGXMLChecker.checkArrayEmpty(svgElements)) {
-        this.getSvgData(svgElements);
-      }
-    })
-  }
-
-  private getSvgData(data: any[], g?: SVG) {
-    for (let i = 0;i < data.length; i++) {
-      if (data[i].type == SVGAttrConstants.ATTR_VALUE_ELEMENT) {
-        switch (data[i].name) {
-          case SVGXMLConstants.SVG_SVG_TAG:
-            if (!SVGXMLChecker.checkObjectEmpty(data[i].attributes)) {
-              this.parseAttributesSVG(data[i].attributes);
-            }
-            if (!SVGXMLChecker.checkArrayEmpty(data[i].elements)) {
-              this.getSvgData(data[i].elements);
-            }
-            break;
-        }
-        this.setSvgArrayChild(data[i], this.svgs, g)
-      }
-    }
-  }
-
-  private setSvgArrayChild(elements: any, svgs: SVG[], g?: SVG) {
-    switch (elements.name) {
-      case SVGXMLConstants.SVG_G_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          g = this.parseAttributesGroup(elements.attributes, g);
-        }
-        if (!SVGXMLChecker.checkArrayEmpty(elements.elements)) {
-          this.getSvgData(elements.elements, g);
-        }
-        break;
-      case SVGXMLConstants.SVG_CIRCLE_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesCircle(elements.attributes, g))
-        }
-        break;
-      case SVGXMLConstants.SVG_ELLIPSE_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesEllipse(elements.attributes, g))
-        }
-        break;
-      case SVGXMLConstants.SVG_LINE_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesLine(elements.attributes, g))
-        }
-        break;
-      case SVGXMLConstants.SVG_POLYLINE_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesPolyLine(elements.attributes, g))
-        }
-        break;
-      case SVGXMLConstants.SVG_POLYGON_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesPolygon(elements.attributes, g));
-        }
-        break;
-      case SVGXMLConstants.SVG_PATH_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesPath(elements.attributes, g));
-        }
-        break;
-      case SVGXMLConstants.SVG_RECT_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesRect(elements.attributes, g));
-        }
-        break;
-      case SVGXMLConstants.SVG_IMAGE_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesImage(elements.attributes, g));
-        }
-        break;
-      case SVGXMLConstants.SVG_STYLE_TAG:
-        if (!SVGXMLChecker.checkArrayEmpty(elements.elements)) {
-        }
-        break;
-      case SVGXMLConstants.SVG_USE_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesUse(elements.attributes, g));
-        }
-        break;
-      case SVGXMLConstants.SVG_TEXT_TAG:
-        if (!SVGXMLChecker.checkObjectEmpty(elements.attributes)) {
-          svgs.push(this.parseAttributesText(elements.attributes, g, elements.elements[0].text));
-        }
-        break;
-      case SVGXMLConstants.SVG_SWITCH_TAG:
-        if (!SVGXMLChecker.checkArrayEmpty(elements.elements)) {
-          svgs.push(this.parseAttributesSwitch(elements.attributes, elements.elements));
-        }
-        break;
-    }
-  }
-
-  private parseAttributesSVG(svg: any) {
-    if (!SVGXMLChecker.checkObjectEmpty(svg.id)) {
-      this.svg.setId(svg.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(svg.width)) {
-      this.svg.setWidth(svg.width);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(svg.height)) {
-      this.svg.setHeight(svg.height);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(svg.viewBox)) {
-      this.svg.setViewBox(svg.viewBox);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(svg.fill)) {
-      this.svg.setFill(svg.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(svg.stroke)) {
-      this.svg.setStroke(svg.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(svg.stroke_width)) {
-      this.svg.setStrokeWidth(svg.stroke_width);
-    }
-    if (this.svg.width == '100%') {
-      this.svg.setWidth(this.svg.viewBoxWidth)
-    }
-    if (this.svg.height == '100%') {
-      this.svg.setHeight(this.svg.viewBoxHeight)
-    }
-  }
-
-  private parseAttributesGroup(g: any, lastGroup?: SVG): SVG {
-    var newGroup: SVG = SVGXMLChecker.checkObjectEmpty(lastGroup) ? new SVG() : lastGroup
-    if (!SVGXMLChecker.checkObjectEmpty(g.id)) {
-      newGroup.setId(g.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.class)) {
-      newGroup.setClass(g.class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.fill)) {
-      newGroup.setFill(g.fill);
-    } else {
-      newGroup.setFill(newGroup.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.fill_opacity)) {
-      newGroup.setFillOpacity(g.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.stroke)) {
-      newGroup.setStroke(g.stroke);
-    } else {
-      newGroup.setStroke(newGroup.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.stroke_width)) {
-      newGroup.setStrokeWidth(g.stroke_width);
-    } else {
-      newGroup.setStrokeWidth(newGroup.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.stroke_miterlimit)) {
-      newGroup.setStrokeMiterLimit(g.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.style)) {
-      newGroup.setStyle(g.style);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.transform)) {
-      newGroup.setTransform(g.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, true);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(g.systemLanguage)) {
-      newGroup.setSystemLanguage(g.systemLanguage);
-    }
-    return newGroup;
-  }
-
-  private parseAttributesCircle(circle: any, g: SVG): CircleView {
-    var newCircle: CircleView = new CircleView();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.id)) {
-      newCircle.setId(circle.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.class)) {
-      newCircle.setClass(circle.class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.r)) {
-      newCircle.setWidth(circle.r);
-      newCircle.setHeight(circle.r);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.cx)) {
-      newCircle.setX(circle.cx);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.cy)) {
-      newCircle.setY(circle.cy);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.transform)) {
-      newCircle.copyTransform(g);
-      newCircle.setTransform(circle.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.fill)) {
-      newCircle.setFill(circle.fill);
-    } else {
-      newCircle.setFill(g.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.fill_opacity)) {
-      newCircle.setFillOpacity(circle.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.stroke)) {
-      newCircle.setStroke(circle.stroke);
-    } else {
-      newCircle.setStroke(g.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.stroke_width)) {
-      newCircle.setStrokeWidth(circle.stroke_width);
-    } else {
-      newCircle.setStrokeWidth(g.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.stroke_miterlimit)) {
-      newCircle.setStrokeMiterLimit(circle.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(circle.style)) {
-      newCircle.setStyle(circle.style);
-    }
-    return newCircle;
-  }
-
-  private parseAttributesEllipse(ellipse: any, g: SVG): EllipseView {
-    var newEllipse: EllipseView = new EllipseView();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.id)) {
-      newEllipse.setId(ellipse.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.class)) {
-      newEllipse.setClass(ellipse.class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.cx)) {
-      newEllipse.setX(ellipse.cx)
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.cy)) {
-      newEllipse.setY(ellipse.cy)
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.rx)) {
-      newEllipse.setWidth(Number(ellipse.rx) * 2);
-      //        newEllipse.setX(-Number(ellipse.rx))
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.ry)) {
-      newEllipse.setHeight(Number(ellipse.ry) * 2);
-      //        newEllipse.setY(-Number(ellipse.ry))
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.x)) {
-      newEllipse.setX(ellipse.x);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.y)) {
-      newEllipse.setY(ellipse.y);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.transform)) {
-      newEllipse.copyTransform(g);
-      newEllipse.setTransform(ellipse.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.fill)) {
-      newEllipse.setFill(ellipse.fill);
-    } else {
-      newEllipse.setFill(g.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.fill_opacity)) {
-      newEllipse.setFillOpacity(ellipse.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.stroke)) {
-      newEllipse.setStroke(ellipse.stroke);
-    } else {
-      newEllipse.setStroke(g.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.stroke_width)) {
-      newEllipse.setStrokeWidth(ellipse.stroke_width);
-    } else {
-      newEllipse.setStrokeWidth(g.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.stroke_miterlimit)) {
-      newEllipse.setStrokeMiterLimit(ellipse.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.style)) {
-      newEllipse.setStyle(ellipse.style);
-    }
-
-    if (newEllipse.cx > 0 && newEllipse.cy > 0) {
-      newEllipse.setX(Number(newEllipse.x) + Number(newEllipse.cx))
-      newEllipse.setY(Number(newEllipse.y) + Number(newEllipse.cy))
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(ellipse.systemLanguage)) {
-      newEllipse.setSystemLanguage(ellipse.systemLanguage);
-    }
-    return newEllipse;
-  }
-
-  private parseAttributesLine(line: any, g: SVG): LineView {
-    var newLine: LineView = new LineView();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.id)) {
-      newLine.setId(line.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.class)) {
-      newLine.setClass(line.class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.x1)) {
-      newLine.setStartX(line.x1);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.y1)) {
-      newLine.setStartY(line.y1);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.x2)) {
-      newLine.setEndX(line.x2);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.y2)) {
-      newLine.setEndY(line.y2);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.x)) {
-      newLine.setX(line.x);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.y)) {
-      newLine.setY(line.y);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.transform)) {
-      newLine.copyTransform(g);
-      newLine.setTransform(line.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.fill)) {
-      newLine.setFill(line.fill);
-    } else {
-      newLine.setFill(g.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.fill_opacity)) {
-      newLine.setFillOpacity(line.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.stroke)) {
-      newLine.setStroke(line.stroke);
-    } else {
-      newLine.setStroke(g.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.stroke_width)) {
-      newLine.setStrokeWidth(line.stroke_width);
-    } else {
-      newLine.setStrokeWidth(g.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.stroke_miterlimit)) {
-      newLine.setStrokeMiterLimit(line.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.style)) {
-      newLine.setStyle(line.style);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(line.systemLanguage)) {
-      newLine.setSystemLanguage(line.systemLanguage);
-    }
-
-    return newLine;
-  }
-
-  private parseAttributesPolyLine(polyLine: any, g: SVG): PolyLineView {
-    var newPolyLine = new PolyLineView();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.id)) {
-      newPolyLine.setId(polyLine.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.class)) {
-      newPolyLine.setClass(polyLine.class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.points)) {
-      let pointsArray: string[] = String(polyLine.points).split(" ");
-      let pointsResult: Array<[number, number]> = new Array<[number, number]>();
-      for (let i = 0;i < pointsArray.length; i++) {
-        let pointsItem = pointsArray[i].split(",")
-        pointsResult.push([Number(pointsItem[0]), Number(pointsItem[1])])
-      }
-      newPolyLine.setPointsResult(pointsResult);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.x)) {
-      newPolyLine.setX(polyLine.x);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.y)) {
-      newPolyLine.setY(polyLine.y);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.transform)) {
-      newPolyLine.copyTransform(g);
-      newPolyLine.setTransform(polyLine.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.fill)) {
-      newPolyLine.setFill(polyLine.fill);
-    } else {
-      newPolyLine.setFill(g.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.fill_opacity)) {
-      newPolyLine.setFillOpacity(polyLine.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.stroke)) {
-      newPolyLine.setStroke(polyLine.stroke);
-    } else {
-      newPolyLine.setStroke(g.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.stroke_width)) {
-      newPolyLine.setStrokeWidth(polyLine.stroke_width);
-    } else {
-      newPolyLine.setStrokeWidth(g.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.stroke_miterlimit)) {
-      newPolyLine.setStrokeMiterLimit(polyLine.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.style)) {
-      newPolyLine.setStyle(polyLine.style);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polyLine.systemLanguage)) {
-      newPolyLine.setSystemLanguage(polyLine.systemLanguage);
-    }
-
-    return newPolyLine;
-  }
-
-  private parseAttributesPolygon(polygon: any, g: SVG): PolygonView {
-    var newPolygon = new PolygonView();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.id)) {
-      newPolygon.setId(polygon.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.class)) {
-      newPolygon.setClass(polygon.class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.points)) {
-      let pointsArray: string[] = String(polygon.points).split(" ");
-      let pointsResult: Array<[number, number]> = new Array<[number, number]>();
-      for (let i = 0;i < pointsArray.length; i++) {
-        let pointsItem = pointsArray[i].split(",")
-        pointsResult.push([Number(pointsItem[0]), Number(pointsItem[1])])
-      }
-      newPolygon.setPointsResult(pointsResult);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.x)) {
-      newPolygon.setX(polygon.x);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.y)) {
-      newPolygon.setY(polygon.y);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.transform)) {
-      newPolygon.copyTransform(g);
-      newPolygon.setTransform(polygon.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.fill)) {
-      newPolygon.setFill(polygon.fill);
-    } else {
-      newPolygon.setFill(g.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.fill_opacity)) {
-      newPolygon.setFillOpacity(polygon.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.stroke)) {
-      newPolygon.setStroke(polygon.stroke);
-    } else {
-      newPolygon.setStroke(g.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.stroke_width)) {
-      newPolygon.setStrokeWidth(polygon.stroke_width);
-    } else {
-      newPolygon.setStrokeWidth(g.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.stroke_miterlimit)) {
-      newPolygon.setStrokeMiterLimit(polygon.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.style)) {
-      newPolygon.setStyle(polygon.style);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(polygon.systemLanguage)) {
-      newPolygon.setSystemLanguage(polygon.systemLanguage);
-    }
-
-    return newPolygon;
-  }
-
-  private parseAttributesPath(path: any, g: SVG): PathView {
-    var newPath = new PathView();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.id)) {
-      newPath.setId(path.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.class)) {
-      newPath.setClass(path.class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.d)) {
-      newPath.setCommands(path.d);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.x)) {
-      newPath.setX(path.x);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.y)) {
-      newPath.setY(path.y);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.transform)) {
-      newPath.copyTransform(g);
-      newPath.setTransform(path.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.fill)) {
-      newPath.setFill(path.fill);
-    } else {
-      newPath.setFill(g.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.fill_opacity)) {
-      newPath.setFillOpacity(path.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.stroke)) {
-      newPath.setStroke(path.stroke);
-    } else {
-      newPath.setStroke(g.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.stroke_width)) {
-      newPath.setStrokeWidth(path.stroke_width);
-    } else {
-      newPath.setStrokeWidth(g.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.stroke_miterlimit)) {
-      newPath.setStrokeMiterLimit(path.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.style)) {
-      newPath.setStyle(path.style);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(path.systemLanguage)) {
-      newPath.setSystemLanguage(path.systemLanguage);
-    }
-
-    return newPath;
-  }
-
-  private parseAttributesRect(rect: any, g: SVG): RectView {
-    var newRect = new RectView();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.id)) {
-      newRect.setId(rect.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.class)) {
-      newRect.setClass(g._class + " " + rect.class);
-    } else {
-      newRect.setClass(g._class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.width)) {
-      newRect.setWidth(rect.width);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.height)) {
-      newRect.setHeight(rect.height);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.rx)) {
-      newRect.setRx(rect.rx);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.ry)) {
-      newRect.setRy(rect.ry);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.x)) {
-      newRect.setX(rect.x);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.y)) {
-      newRect.setY(rect.y);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.transform)) {
-      newRect.copyTransform(g);
-      newRect.setTransform(rect.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.fill)) {
-      newRect.setFill(!SVGXMLChecker.checkObjectEmpty(rect.fill) ? rect.fill : g.fill);
-    } else {
-      newRect.setFill(g.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.fill_opacity)) {
-      newRect.setFillOpacity(rect.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.stroke)) {
-      newRect.setStroke(rect.stroke);
-    } else {
-      newRect.setStroke(g.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.stroke_width)) {
-      newRect.setStrokeWidth(rect.stroke_width);
-    } else {
-      newRect.setStrokeWidth(g.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.stroke_miterlimit)) {
-      newRect.setStrokeMiterLimit(rect.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.style)) {
-      newRect.setStyle(rect.style);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(rect.systemLanguage)) {
-      newRect.setSystemLanguage(rect.systemLanguage);
-    }
-
-    return newRect;
-  }
-
-  private parseAttributesImage(image: any, g: SVG): ImageSvg {
-    var newImage = new ImageSvg();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(image.id)) {
-      newImage.setId(image.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(image.class)) {
-      newImage.setClass(image.class);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(image.width)) {
-      newImage.setWidth(image.width);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(image.height)) {
-      newImage.setHeight(image.height);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(image.opacity)) {
-      newImage.setOpacity(Number(image.opacity));
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(image.href)) {
-      newImage.setHref(image.href);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(image.transform)) {
-      newImage.copyTransform(g);
-      newImage.setTransform(image.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(image.systemLanguage)) {
-      newImage.setSystemLanguage(image.systemLanguage);
-    }
-
-    return newImage;
-  }
-
-  private parseAttributesUse(use: any, g: SVG): Use {
-    var newUse = new Use();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(use.id)) {
-      newUse.setId(use.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(use.x)) {
-      newUse.setX(use.x);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(use.y)) {
-      newUse.setY(use.y);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(use.width)) {
-      newUse.setWidth(use.width);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(use.height)) {
-      newUse.setHeight(use.height);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(use.href)) {
-      newUse.setHref(use.href);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(use.transform)) {
-      newUse.copyTransform(g);
-      newUse.setTransform(use.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(use.systemLanguage)) {
-      newUse.setSystemLanguage(use.systemLanguage);
-    }
-
-    return newUse;
-  }
-
-  private parseAttributesText(text: any, g: SVG, str: string): TextView {
-    var newText = new TextView();
-    if (SVGXMLChecker.checkObjectEmpty(g)) {
-      g = new Group();
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.id)) {
-      newText.setId(text.id);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.x)) {
-      newText.setX(text.x);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.y)) {
-      newText.setY(text.y);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.dx)) {
-      newText.setDx(text.dx);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.dy)) {
-      newText.setDy(text.dy);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(str)) {
-      newText.setText(str);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.font_size)) {
-      newText.setFontSize(text.font_size);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.transform)) {
-      newText.copyTransform(g);
-      newText.setTransform(text.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, false);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.fill)) {
-      newText.setFill(!SVGXMLChecker.checkObjectEmpty(text.fill) ? text.fill : g.fill);
-    } else {
-      newText.setFill(g.fill);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.fill_opacity)) {
-      newText.setFillOpacity(text.fill_opacity);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.stroke)) {
-      newText.setStroke(text.stroke);
-    } else {
-      newText.setStroke(g.stroke);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.stroke_width)) {
-      newText.setStrokeWidth(text.stroke_width);
-    } else {
-      newText.setStrokeWidth(g.strokeWidth);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.stroke_miterlimit)) {
-      newText.setStrokeMiterLimit(text.stroke_miterlimit);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.style)) {
-      newText.setStyle(text.style);
-    }
-    if (!SVGXMLChecker.checkObjectEmpty(text.systemLanguage)) {
-      newText.setSystemLanguage(text.systemLanguage);
-    }
-
-    return newText;
-  }
-
-  private parseAttributesSwitch(g: any, elements: any): Switch {
-    var newSwitch: Switch = new Switch();
-    if (g != undefined) {
-      if (!SVGXMLChecker.checkObjectEmpty(g.id)) {
-        newSwitch.setId(g.id);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.class)) {
-        newSwitch.setClass(g.class);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.fill)) {
-        newSwitch.setFill(g.fill);
-      } else {
-        newSwitch.setFill(newSwitch.fill);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.fill_opacity)) {
-        newSwitch.setFillOpacity(g.fill_opacity);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.stroke)) {
-        newSwitch.setStroke(g.stroke);
-      } else {
-        newSwitch.setStroke(newSwitch.stroke);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.stroke_width)) {
-        newSwitch.setStrokeWidth(g.stroke_width);
-      } else {
-        newSwitch.setStrokeWidth(newSwitch.strokeWidth);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.stroke_miterlimit)) {
-        newSwitch.setStrokeMiterLimit(g.stroke_miterlimit);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.style)) {
-        newSwitch.setStyle(g.style);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.transform)) {
-        newSwitch.setTransform(g.transform, this.svg.viewBoxWidth, this.svg.viewBoxHeight, true);
-      }
-      if (!SVGXMLChecker.checkObjectEmpty(g.systemLanguage)) {
-        newSwitch.setSystemLanguage(g.systemLanguage);
-      }
-    }
-    for (let i = 0;i < elements.length; i++) {
-      this.setSvgArrayChild(elements[i], newSwitch.child, newSwitch);
-    }
-    return newSwitch;
-  }
-
-  private addSvgToArray(svg: SVG) {
-    this.svgs.push(svg)
-  }
-
-  public copy(val: SVG): SVG{
-    let copySvg = null;
-    if (val instanceof ImageSvg) {
-      copySvg = new ImageSvg();
-      copySvg.href = val.href;
-    } else if (val instanceof CircleView) {
-      copySvg = new CircleView();
-    } else if (val instanceof EllipseView) {
-      copySvg = new EllipseView();
-    } else if (val instanceof LineView) {
-      copySvg = new LineView();
-      copySvg.startX = val.startX;
-      copySvg.startY = val.startY;
-      copySvg.endX = val.endX;
-      copySvg.endY = val.endY;
-    } else if (val instanceof PolyLineView) {
-      copySvg = new PolyLineView();
-      copySvg.pointsResult = val.pointsResult;
-    } else if (val instanceof PolygonView) {
-      copySvg = new PolygonView();
-      copySvg.pointsResult = val.pointsResult;
-    } else if (val instanceof RectView) {
-      copySvg = new RectView();
-      copySvg.rx = val.rx;
-      copySvg.ry = val.ry;
-    } else if (val instanceof Use) {
-      copySvg = new Use();
-      copySvg.href = val.href;
-    }
-    copySvg.id = val.id;
-    copySvg._class = val._class;
-    copySvg.x = val.x;
-    copySvg.y = val.y;
-    copySvg.width = val.width;
-    copySvg.height = val.height;
-    copySvg.fill = val.fill;
-    copySvg.opacity = val.opacity;
-    copySvg.fillOpacity = val.fillOpacity;
-    copySvg.stroke = val.stroke;
-    copySvg.strokeDashArray = val.strokeDashArray;
-    copySvg.strokeDashOffset = val.strokeDashOffset;
-    copySvg.strokeLineCap = val.strokeLineCap;
-    copySvg.strokeLineJoin = val.strokeLineJoin;
-    copySvg.strokeMiterLimit = val.strokeMiterLimit;
-    copySvg.strokeOpacity = val.strokeOpacity;
-    copySvg.strokeWidth = val.strokeWidth;
-    copySvg.translateX = val.translateX;
-    copySvg.translateY = val.translateY;
-    copySvg.rotateX = val.rotateX;
-    copySvg.rotateY = val.rotateY;
-    copySvg.rotateZ = val.rotateZ;
-    copySvg.rotateAngle = val.rotateAngle;
-    copySvg.scaleX = val.scaleX;
-    copySvg.scaleY = val.scaleY;
-    return copySvg;
-  }
-
-  private drawSvg(val: any) {
-    if (val instanceof ImageSvg) {
-      let img: ImageBitmap = new ImageBitmap("../../../resources/rawfile/" + val.href);
-      this.context.drawImage(img, px2vp(val.x), px2vp(val.y), px2vp(Number(val.width)), px2vp(Number(val.height)))
-    } else if (val instanceof CircleView) {
-      this.context.beginPath()
-      this.context.ellipse(px2vp(val.x), px2vp(val.y), px2vp(Number(val.width)), px2vp(Number(val.height)), 0, 0, Math.PI * 2)
-    } else if (val instanceof EllipseView) {
-      this.context.beginPath()
-      this.context.ellipse(px2vp(val.x), px2vp(val.y), px2vp(Number(val.width) / 2), px2vp(Number(val.height) / 2), 0, 0, Math.PI * 2)
-    } else if (val instanceof LineView) {
-      this.context.beginPath();
-      this.context.moveTo(px2vp(Number(val.startX)), px2vp(Number(val.startY)));
-      this.context.lineTo(px2vp(Number(val.endX)), px2vp(Number(val.endY)))
-    } else if (val instanceof PolyLineView) {
-      this.context.beginPath();
-      this.context.moveTo(px2vp(val.pointsResult[0][0]), px2vp(val.pointsResult[0][1]))
-      val.pointsResult.forEach((val, idx) => {
-        if (idx > 0) {
-          this.context.lineTo(px2vp(val[0]), px2vp(val[1]))
-        }
-      })
-    } else if (val instanceof PolygonView) {
-      this.context.beginPath();
-      this.context.moveTo(px2vp(val.pointsResult[0][0]), px2vp(val.pointsResult[0][1]))
-      val.pointsResult.forEach((val, idx) => {
-        if (idx > 0) {
-          this.context.lineTo(px2vp(val[0]), px2vp(val[1]))
-        }
-      })
-    } else if (val instanceof RectView) {
-      this.context.beginPath()
-      this.context.rect(px2vp(val.x), px2vp(val.y), px2vp(Number(val.width)), px2vp(Number(val.height)))
-    } else if (val instanceof Use) {
-      for (let i = 0;i < this.svgs.length; i++) {
-        if (this.svgs[i].id.trim().indexOf(val.href.replace("#", "").trim()) > -1) {
-          let svg = this.copy(this.svgs[i])
-          if (val.x) {
-            svg.x = Number(this.svgs[i].x) + Number(val.x)
-          }
-          if (val.y) {
-            svg.y = Number(this.svgs[i].y) + Number(val.y)
-          }
-          this.drawSvg(svg)
-          break
-        }
-      }
-    } else if (val instanceof TextView) {
-      this.context.font = val.fontSize + " sans-serif";
-    } else if (val instanceof Switch) {
-      let language = configuration.getLocale().language;
-      for (let i = 0;i < val.child.length; i++) {
-        if (val.child[i].systemLanguage.trim() == language.trim()) {
-          this.drawSvg(val.child[i])
-          break
-        }
-      }
-    }
-
-    this.context.save();
-    if (val.strokeMiterLimit != null) {
-      this.context.miterLimit = val.strokeMiterLimit;
-    }
-    if (val.strokeDashOffset != 0) {
-      this.context.lineDashOffset = Number(val.strokeDashOffset);
-    }
-    if (val.translateX != 0 || val.translateY != 0) {
-      this.context.translate(px2vp(val.translateX), px2vp(val.translateY))
-    }
-    if (val.scaleX != 1 || val.scaleY != 1) {
-      this.context.scale(val.scaleX, val.scaleY);
-    }
-    if (val.rotateAngle != 0) {
-      this.context.rotate(val.rotateAngle)
-    }
-    if (val.strokeWidth != null && Number(val.strokeWidth.toString().replace("px", "")) > 0) {
-      this.context.strokeStyle = val.stroke;
-      this.context.lineWidth = Number(val.strokeWidth.toString().replace("px", ""));
-      if (val instanceof PathView) {
-        let path2D: Path2D = new Path2D(val.commands);
-        this.context.stroke(path2D)
-      } else if (val instanceof TextView) {
-        this.context.strokeText(val.text, Number(val.x) + Number(val.dx), Number(val.y) + Number(val.dy))
-      } else {
-        this.context.stroke();
-      }
-    }
-    if (val.fill != null) {
-      this.context.fillStyle = val.fill;
-      if (val instanceof PathView) {
-        let path2D: Path2D = new Path2D(val.commands);
-        this.context.fill(path2D);
-      } else if (val instanceof TextView) {
-        this.context.fillText(val.text, Number(val.x) + Number(val.dx), Number(val.y) + Number(val.dy))
-      } else {
-        this.context.fill();
-      }
-    }
-    this.context.restore();
-  }
-
-  public getSVGPixelMap(size?:{width:number,height:number}): PixelMap{
-
-    let setttings: RenderingContextSettings = new RenderingContextSettings(true)
-    let offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(px2vp(this.svg.viewBoxWidth), px2vp(this.svg.viewBoxHeight),setttings)
-
-    image.createImageSource(null)
-    this.context = offContext
-
-    // 根据目标大小适配
-    let targetCompWidth: number;
-    let targetCompHeight: number;
-    if(size){
-      targetCompWidth = size.width
-      targetCompHeight = size.height
-    }else{
-      targetCompWidth = this.deviceW*px2vp(1)
-      targetCompHeight = this.deviceH*px2vp(1)
-    }
-    let minScale = 1;
-    if(this.svg.viewBoxWidth * px2vp(1) > targetCompWidth || this.svg.viewBoxHeight*px2vp(1)> targetCompHeight){
-      let scaleW = targetCompWidth / (this.svg.viewBoxWidth * px2vp(1) *1.0)
-      let scaleH = targetCompHeight / (this.svg.viewBoxHeight * px2vp(1) *1.0)
-      minScale = scaleW >= scaleH ? scaleH:scaleW;
-      this.context.setTransform(minScale,0,0,minScale,0,0)
-    }
-    // 缩放之后再绘制
-    this.svgs.forEach((val, idx, array) => {
-      this.drawSvg(val)
-    })
-    let minShowWidth = this.svg.viewBoxWidth * px2vp(1) *minScale;
-    let minShowHeight = this.svg.viewBoxHeight * px2vp(1) *minScale;
-    console.log('getPixelMap width ='+minShowWidth+'height='+minShowHeight)
-    let pix = this.context.getPixelMap(0,0,minShowWidth,minShowHeight)
-    this.context.clearRect(0, 0, this.svg.viewBoxWidth, this.svg.viewBoxHeight)
-    return pix
-  }
-
-//  getMinShowWidth(): number{
-//    return px2vp(this.svg.viewBoxWidth < globalThis.deviceW ? this.svg.viewBoxWidth : globalThis.deviceW)
-//  }
-//
-//  getMinShowHeight(): number{
-//    return px2vp(this.svg.viewBoxHeight < globalThis.deviceH ? this.svg.viewBoxHeight : globalThis.deviceH)
-//  }
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index d837c93..fbc532c 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,9 @@
 	"repository": {},
 	"version": "1.0.0",
 	"dependencies": {
-		"@ohos/hvigor": "1.2.2",
-		"@ohos/hvigor-ohos-plugin": "1.2.2",
-		"@ohos/hypium": "1.0.2",
-		"@ohos/svg": "^1.1.0",
-		"hypium": "^1.0.0"
+		"@ohos/hypium": "1.0.3",
+		"@ohos/hvigor-ohos-plugin": "1.3.1",
+		"hypium": "^1.0.0",
+		"@ohos/hvigor": "1.3.1"
 	}
 }