修改图片组合变换的触发方式为点击按钮后触发,修复图片变换频繁切换滤波器效果导致gpu接口调用闪退的问题

Signed-off-by: chongtiantian <chongtiantian1@h-partners.com>
This commit is contained in:
chongtiantian 2024-07-03 11:28:36 +08:00
parent 414e335a3a
commit 88fd6d1f43
2 changed files with 210 additions and 146 deletions

View File

@ -1,5 +1,5 @@
## 3.0.0-rc.10
- 修复图变换的闪退问题
- 修复图片组合变换的闪退问题
## 3.0.0-rc.9
- 修复Resource类型$r(变量无法)加载

View File

@ -46,6 +46,7 @@ struct ImageTransformation {
@State isRound: boolean = false;
@State isContrast: boolean = false;
@State isRotate: boolean = false;
private transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>();
isBlur: boolean = false
isBrightness: boolean = false
isGrayScale: boolean = false;
@ -69,12 +70,19 @@ struct ImageTransformation {
Scroll() {
Column() {
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox1' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isBlur = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new BlurTransformation(5));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Blur') === -1;
})
}
}
})
.width(30)
.height(30)
@ -82,12 +90,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox2' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isBrightness = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new BrightnessTransformation(0.2));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Brightness') === -1;
})
}
}
})
.width(30)
.height(30)
@ -95,12 +110,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox3' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isGrayScale = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new GrayScaleTransformation());
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('GrayScale') === -1;
})
}
}
})
.width(30)
.height(30)
@ -108,12 +130,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox4', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox4' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isInvert = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new InvertTransformation());
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Invert') === -1;
})
}
}
})
.width(30)
.height(30)
@ -121,12 +150,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox5', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox5' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isToon = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new ToonTransformation(0.3, 10.0));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Toon') === -1;
})
}
}
})
.width(30)
.height(30)
@ -134,12 +170,11 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox6', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox6' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isCropCircle = value;
this.updateImageKnifeOption();
})
.width(30)
.height(30)
@ -147,12 +182,11 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox7', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox7' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isCropCircleWithBorder = value;
this.updateImageKnifeOption();
})
.width(30)
.height(30)
@ -160,9 +194,9 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox8', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox8' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isContrast = value;
})
@ -172,12 +206,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox9', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox9' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isSepia = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new SepiaTransformation());
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Sepia') === -1;
})
}
}
})
.width(30)
.height(30)
@ -185,9 +226,9 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox10', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox10' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isRotate = value;
})
@ -197,12 +238,11 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox11', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox11' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isRound = value;
this.updateImageKnifeOption();
})
.width(30)
.height(30)
@ -210,12 +250,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox12', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox12' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isKuwahara = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new KuwaharaTransformation(10));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Kuwahara') === -1;
})
}
}
})
.width(30)
.height(30)
@ -223,12 +270,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox13', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox13' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isPixelation = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new PixelationTransformation(5.0));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Pixelation') === -1;
})
}
}
})
.width(30)
.height(30)
@ -236,12 +290,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox14', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox14' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isSketch = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new SketchTransformation());
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Sketch') === -1;
})
}
}
})
.width(30)
.height(30)
@ -249,12 +310,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox15', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox15' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isSwirl = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new SwirlTransformation(200, 1.0, [0.5, 0.5]));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Swirl') === -1;
})
}
}
})
.width(30)
.height(30)
@ -262,12 +330,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox16', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox16' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isVignetter = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new VignetterTransformation([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Vignetter') === -1;
})
}
}
})
.width(30)
.height(30)
@ -275,12 +350,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox17', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox17' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isCropSquare = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new CropSquareTransformation());
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('CropSquare') === -1;
})
}
}
})
.width(30)
.height(30)
@ -288,12 +370,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox18', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox18' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isCropTop = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new CropTransformation(25, 25, 0));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Crop') === -1;
})
}
}
})
.width(30)
.height(30)
@ -301,12 +390,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox19', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox19' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isCropCenter = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new CropTransformation(25, 25, 1));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Crop') === -1;
})
}
}
})
.width(30)
.height(30)
@ -314,12 +410,19 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox20', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox20' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isCropBottom = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new CropTransformation(25, 25, 2));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Crop') === -1;
})
}
}
})
.width(30)
.height(30)
@ -327,18 +430,47 @@ struct ImageTransformation {
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox21', group: 'checkboxGroup' })
Checkbox({ name: 'checkbox21' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.isMask = value;
this.updateImageKnifeOption();
if (value) {
this.transformations.push(new MaskTransformation($r('app.media.mask_starfish')));
} else {
if(this.transformations.length) {
this.transformations = this.transformations.filter((x: PixelMapTransformation) => {
return x.getName().indexOf('Mask') === -1;
})
}
}
})
.width(30)
.height(30)
Text('遮罩效果').fontSize(20)
}
Button("显示效果").onClick(() => {
this.imageKnifeOption = {
loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain,
transformation: this.transformations.length > 0 ? new MultiTransTransformation(this.transformations) : undefined
}
if (this.isRound) {
this.imageKnifeOption.objectFit = ImageFit.Cover;
this.imageKnifeOption.border = { radius: { topLeft: 50, bottomRight: 50 } };
}
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 };
}
}).margin({ left: 5 }).backgroundColor(Color.Blue)
if (this.isContrast) {
ImageKnifeComponent({
imageKnifeOption: this.imageKnifeOption
@ -361,72 +493,4 @@ struct ImageTransformation {
.height('100%')
.width('100%')
}
updateImageKnifeOption() {
let transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>()
if (this.isBlur) {
transformations.push(new BlurTransformation(5));
}
if (this.isBrightness) {
transformations.push(new BrightnessTransformation(0.2));
}
if (this.isGrayScale) {
transformations.push(new GrayScaleTransformation());
}
if (this.isInvert) {
transformations.push(new InvertTransformation());
}
if (this.isToon) {
transformations.push(new ToonTransformation(0.3, 10.0));
}
if (this.isKuwahara) {
transformations.push(new KuwaharaTransformation(10));
}
if (this.isPixelation) {
transformations.push(new PixelationTransformation(5.0));
}
if (this.isSketch) {
transformations.push(new SketchTransformation());
}
if (this.isSwirl) {
transformations.push(new SwirlTransformation(200, 1.0, [0.5, 0.5]));
}
if (this.isVignetter) {
transformations.push(new VignetterTransformation([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]));
}
if (this.isCropSquare) {
transformations.push(new CropSquareTransformation());
}
if (this.isCropTop) {
transformations.push(new CropTransformation(25, 25, 0));
}
if (this.isCropCenter) {
transformations.push(new CropTransformation(25, 25, 1));
}
if (this.isCropBottom) {
transformations.push(new CropTransformation(25, 25, 2));
}
if (this.isSepia) {
transformations.push(new SepiaTransformation());
}
if (this.isMask) {
transformations.push(new MaskTransformation($r('app.media.mask_starfish')));
}
this.imageKnifeOption = {
loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain,
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 };
}
}
}