图片裁剪成圆形时裁剪不平滑问题修复
Signed-off-by: zhang_hanyong <zhang_hanyong@h-partners.com>
This commit is contained in:
parent
b2a7fb47f8
commit
2fee05b569
54
README.md
54
README.md
|
@ -167,6 +167,58 @@ ImageKnifeComponent({
|
||||||
.rotate({ angle: 90 }) // 旋转90度
|
.rotate({ angle: 90 }) // 旋转90度
|
||||||
.contrast(12) // 对比度滤波器
|
.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.监听图片加载成功与失败
|
#### 8.监听图片加载成功与失败
|
||||||
|
|
||||||
|
@ -236,8 +288,6 @@ ImageKnifeComponent({ ImageKnifeOption:
|
||||||
| ---------------------------------- | ----------------------------- |
|
| ---------------------------------- | ----------------------------- |
|
||||||
| BlurTransformation | 模糊处理 |
|
| BlurTransformation | 模糊处理 |
|
||||||
| BrightnessTransformation | 亮度滤波器 |
|
| BrightnessTransformation | 亮度滤波器 |
|
||||||
| CropCircleTransformation | 圆形剪裁显示 |
|
|
||||||
| CropCircleWithBorderTransformation | 圆环展示 |
|
|
||||||
| CropSquareTransformation | 正方形剪裁 |
|
| CropSquareTransformation | 正方形剪裁 |
|
||||||
| CropTransformation | 自定义矩形剪裁 |
|
| CropTransformation | 自定义矩形剪裁 |
|
||||||
| GrayScaleTransformation | 灰度级滤波器 |
|
| GrayScaleTransformation | 灰度级滤波器 |
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
import {
|
import {
|
||||||
BlurTransformation,
|
BlurTransformation,
|
||||||
BrightnessTransformation,
|
BrightnessTransformation,
|
||||||
CropCircleTransformation,
|
|
||||||
CropCircleWithBorderTransformation,
|
|
||||||
CropSquareTransformation,
|
CropSquareTransformation,
|
||||||
CropTransformation,
|
CropTransformation,
|
||||||
GrayScaleTransformation,
|
GrayScaleTransformation,
|
||||||
|
@ -367,12 +365,6 @@ struct ImageTransformation {
|
||||||
if (this.isToon) {
|
if (this.isToon) {
|
||||||
transformations.push(new ToonTransformation(0.3, 10.0));
|
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) {
|
if (this.isKuwahara) {
|
||||||
transformations.push(new KuwaharaTransformation(10));
|
transformations.push(new KuwaharaTransformation(10));
|
||||||
}
|
}
|
||||||
|
@ -414,5 +406,13 @@ struct ImageTransformation {
|
||||||
border: { radius: this.isRound ? { topLeft: 50, bottomRight: 50 } : 0 },
|
border: { radius: this.isRound ? { topLeft: 50, bottomRight: 50 } : 0 },
|
||||||
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined
|
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 };
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue