floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Pre Merge pull request !293 from zhanghanyong/master

This commit is contained in:
zhanghanyong 2024-06-27 06:44:46 +00:00 committed by Gitee
parent db1ccdc604 07273454dc
commit e9e7a9fa00
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with 89 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -484,6 +484,32 @@ request.skipMemoryCache(true)
<img src="screenshot/gif4.gif" width="50%"/>
其他变换相关属性，可叠加实现组合变换效果
圆形裁剪变换示例
```
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: $r('app.media.jpgSample'),
mainScaleType: ScaleType.CENTER_CROP,
circleCropBorder: { cornerRadius: 150 }
}
}).width(300).height(300)
```
圆形裁剪带边框变换示例
```
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: $r('app.media.jpgSample'),
mainScaleType: ScaleType.CENTER_CROP,
circleCropBorder: { cornerRadius: 150, colorString: Color.Red, borderWidth: 2 }
}
}).width(300).height(300)
```
### setLruCacheSize
setLruCacheSize(size: number,memory:number): void

64
entry/src/main/ets/pages/transformsPage.ets
View File

@ -18,14 +18,12 @@ import {
ImageKnifeOption,
RotateImageTransformation,
SketchFilterTransformation,
CropCircleTransformation,
ToonFilterTransform,
VignetteFilterTransform,
BaseTransform,
BlurTransformation,
BrightnessFilterTransformation,
InvertFilterTransformation,
CropCircleWithBorderTransformation,
CropSquareTransformation,
CropTransformation,
CropType,
@ -35,7 +33,8 @@ import {
SepiaFilterTransformation,
MaskTransformation,
SwirlFilterTransformation,
KuwaharaFilterTransform
KuwaharaFilterTransform,
ScaleType
} from '@ohos/libraryimageknife'
@Entry
@ -51,9 +50,6 @@ struct transformsPage {
private blurTransformation: BlurTransformation = new BlurTransformation(15, 3);
private brightnessFilterTransformation: BrightnessFilterTransformation = new BrightnessFilterTransformation(0.5);
private contrastFilterTransformation: ContrastFilterTransformation = new ContrastFilterTransformation(2.0);
private cropCircleTransformation: CropCircleTransformation = new CropCircleTransformation();
private cropCircleWithBorderTransformation: CropCircleWithBorderTransformation =
new CropCircleWithBorderTransformation(16, { r_color: 100, g_color: 100, b_color: 100 });
private cropSquareTransformation: CropSquareTransformation = new CropSquareTransformation();
private cropTransformation: CropTransformation = new CropTransformation(100, 100, CropType.CENTER);
private grayscaleTransformation: GrayscaleTransformation = new GrayscaleTransformation();
@ -73,6 +69,8 @@ struct transformsPage {
private kuwaharaFilterTransform: KuwaharaFilterTransform = new KuwaharaFilterTransform(10);
private toonFilterTransform: ToonFilterTransform = new ToonFilterTransform(0.3, 10.0);
private vignetteFilterTransform: VignetteFilterTransform = new VignetteFilterTransform([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]);
private isCropCircle: boolean = false;
private isCropCircleWithBorder: boolean = false;
build() {
Scroll() {
@ -139,15 +137,7 @@ struct transformsPage {
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.cropCircleTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.cropCircleTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
this.isCropCircle = value;
})
Text('圆形裁剪').margin({ left: 16 })
}.margin({ left: 16 })
@ -159,15 +149,7 @@ struct transformsPage {
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.cropCircleWithBorderTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.cropCircleWithBorderTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
this.isCropCircleWithBorder = value;
})
Text('圆环').margin({ left: 16 })
}.margin({ left: 16 })
@ -440,22 +422,38 @@ struct transformsPage {
}.margin({ top: 32, left: 16 })
Button("显示效果").onClick(() => {
this.imageKnifeOption = {
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
enableGpu: true,
transformations: this.transformations
};
this.updateImageKnifeOption();
}).margin({ left: 5 }).backgroundColor(Color.Blue)
Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
.width(300)
.height(300)
.backgroundColor(Color.Pink)
}.width(400).height(400).margin({ top: 10 })
}
}
.width('100%')
.height('100%')
}
updateImageKnifeOption() {
this.imageKnifeOption = {
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
enableGpu: true,
transformations: this.transformations
}
if (this.isCropCircle) {
this.imageKnifeOption.mainScaleType = ScaleType.CENTER_CROP;
this.imageKnifeOption.circleCropBorder = { cornerRadius: 150 };
}
if (this.isCropCircleWithBorder) {
this.imageKnifeOption.mainScaleType = ScaleType.CENTER_CROP;
this.imageKnifeOption.circleCropBorder = { cornerRadius: 150, colorString: Color.Red, borderWidth: 2 };
}
}
}

23
library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -678,6 +678,29 @@ export struct ImageKnifeComponent {
}
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
context.restore();
if (imageKnifeOption.circleCropBorder) {
let borderWidth = imageKnifeOption.circleCropBorder.borderWidth ? imageKnifeOption.circleCropBorder.borderWidth : 0;
let connerRadius = imageKnifeOption.circleCropBorder.cornerRadius ? imageKnifeOption.circleCropBorder.cornerRadius : 0;
// 通过 destination-in 裁剪出圆角
context.save();
context.globalCompositeOperation = 'destination-in';
ImageKnifeDrawFactory.setRect(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth,
compHeight, 0, 0, borderWidth, connerRadius);
context.fill();
context.restore();
if (borderWidth > 0) {
// 为圆角添加边框
context.save();
context.strokeStyle = imageKnifeOption.circleCropBorder.colorString ? imageKnifeOption.circleCropBorder.colorString : 0;
context.lineWidth = borderWidth;
context.globalCompositeOperation = 'source-over';
ImageKnifeDrawFactory.setRect(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth,
compHeight, 0, 0, borderWidth, connerRadius);
context.stroke();
context.restore();
}
context.restore();
}
this.drawMainSourceSuccess = true;
LogUtil.log('VISIBLE: ImageKnifeComponent default drawMainSource end!');
})

9
library/src/main/ets/components/imageknife/ImageKnifeOption.ets
View File

@ -64,6 +64,12 @@ export interface TransformOptions{
rotateImage?: number
}
export interface CircleCropBorderOptions {
borderWidth?: number;
cornerRadius?: number;
colorString?: string | number | CanvasGradient | CanvasPattern;
}
export interface HeaderOptions {
key: string;
value: string;
@ -147,6 +153,9 @@ export class ImageKnifeOption {
transformation?: BaseTransform<PixelMap>;
transformations?: Array<BaseTransform<PixelMap>>;
// 圆形裁剪
circleCropBorder?: CircleCropBorderOptions;
// 输出缓存相关内容和信息
allCacheInfoCallback?: IAllCacheInfoCallback;