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