From 2fee05b5692cc7be5089cff5c3994fb5673fdc7c Mon Sep 17 00:00:00 2001
From: zhang_hanyong <zhang_hanyong@h-partners.com>
Date: Mon, 3 Jun 2024 11:47:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=A3=81=E5=89=AA=E6=88=90?=
 =?UTF-8?q?=E5=9C=86=E5=BD=A2=E6=97=B6=E8=A3=81=E5=89=AA=E4=B8=8D=E5=B9=B3?=
 =?UTF-8?q?=E6=BB=91=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: zhang_hanyong <zhang_hanyong@h-partners.com>
---
 README.md                                     | 54 ++++++++++++++++++-
 .../main/ets/pages/ImageTransformation.ets    | 16 +++---
 2 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index f0d4350..a7b1278 100644
--- a/README.md
+++ b/README.md
@@ -167,6 +167,58 @@ ImageKnifeComponent({
   .rotate({ angle: 90 }) // 旋转90度
   .contrast(12) // 对比度滤波器
 ```
+其他变换相关属性，可叠加实现组合变换效果
+
+圆形裁剪变换示例
+
+```
+ImageKnifeComponent({ ImageKnifeOption:
+  {
+  loadSrc: $r('app.media.pngSample'),
+  objectFit: ImageFit.Cover,
+  border: { radius: 150 }
+}
+}).width(300)
+  .height(300)
+```
+
+圆形裁剪带边框变换示例
+
+```
+ImageKnifeComponent({ ImageKnifeOption:
+  {
+  loadSrc: $r('app.media.pngSample'),
+  objectFit: ImageFit.Cover,
+  border: { radius: 150, color: Color.Red, width: 5 }
+}
+}).width(300)
+  .height(300)
+```
+
+对比度滤波变换示例
+
+```
+ImageKnifeComponent({
+  imageKnifeOption: {
+    loadSrc: $r('app.media.pngSample')
+  }
+}).width(300)
+  .height(300)
+  .contrast(12)
+```
+
+旋转变换示例
+
+```
+ImageKnifeComponent({
+  imageKnifeOption: {
+    loadSrc: $r('app.media.pngSample')
+  }
+}).width(300)
+  .height(300)
+  .rotate({angle:90})
+  .backgroundColor(Color.Pink)
+```
 
 #### 8.监听图片加载成功与失败
 
@@ -236,8 +288,6 @@ ImageKnifeComponent({ ImageKnifeOption:
 | ---------------------------------- | ----------------------------- |
 | BlurTransformation                 | 模糊处理                      |
 | BrightnessTransformation           | 亮度滤波器                    |
-| CropCircleTransformation           | 圆形剪裁显示                  |
-| CropCircleWithBorderTransformation | 圆环展示                      |
 | CropSquareTransformation           | 正方形剪裁                    |
 | CropTransformation                 | 自定义矩形剪裁                |
 | GrayScaleTransformation            | 灰度级滤波器                  |
diff --git a/entry/src/main/ets/pages/ImageTransformation.ets b/entry/src/main/ets/pages/ImageTransformation.ets
index 32da2e7..22a2f04 100644
--- a/entry/src/main/ets/pages/ImageTransformation.ets
+++ b/entry/src/main/ets/pages/ImageTransformation.ets
@@ -1,8 +1,6 @@
 import {
   BlurTransformation,
   BrightnessTransformation,
-  CropCircleTransformation,
-  CropCircleWithBorderTransformation,
   CropSquareTransformation,
   CropTransformation,
   GrayScaleTransformation,
@@ -367,12 +365,6 @@ struct ImageTransformation {
     if (this.isToon) {
       transformations.push(new ToonTransformation(0.3, 10.0));
     }
-    if (this.isCropCircle) {
-      transformations.push(new CropCircleTransformation());
-    }
-    if (this.isCropCircleWithBorder) {
-      transformations.push(new CropCircleWithBorderTransformation(16, { r_color: 100, g_color: 100, b_color: 0 }));
-    }
     if (this.isKuwahara) {
       transformations.push(new KuwaharaTransformation(10));
     }
@@ -414,5 +406,13 @@ struct ImageTransformation {
       border: { radius: this.isRound ? { topLeft: 50, bottomRight: 50 } : 0 },
       transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined
     }
+    if (this.isCropCircle) {
+      this.imageKnifeOption.objectFit = ImageFit.Cover;
+      this.imageKnifeOption.border = { radius: 150 };
+    }
+    if (this.isCropCircleWithBorder) {
+      this.imageKnifeOption.objectFit = ImageFit.Cover;
+      this.imageKnifeOption.border = { radius: 150, color: Color.Red, width: 5 };
+    }
   }
 }
\ No newline at end of file