From 88fd6d1f432df745a50eb30b4a284003002c1059 Mon Sep 17 00:00:00 2001 From: chongtiantian Date: Wed, 3 Jul 2024 11:28:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87=E7=BB=84?= =?UTF-8?q?=E5=90=88=E5=8F=98=E6=8D=A2=E7=9A=84=E8=A7=A6=E5=8F=91=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=E4=B8=BA=E7=82=B9=E5=87=BB=E6=8C=89=E9=92=AE=E5=90=8E?= =?UTF-8?q?=E8=A7=A6=E5=8F=91=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=8F=98=E6=8D=A2=E9=A2=91=E7=B9=81=E5=88=87=E6=8D=A2=E6=BB=A4?= =?UTF-8?q?=E6=B3=A2=E5=99=A8=E6=95=88=E6=9E=9C=E5=AF=BC=E8=87=B4gpu?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E7=94=A8=E9=97=AA=E9=80=80=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: chongtiantian --- CHANGELOG.md | 2 +- .../main/ets/pages/ImageTransformation.ets | 354 +++++++++++------- 2 files changed, 210 insertions(+), 146 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 03d1df1..f26b35e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,5 @@ ## 3.0.0-rc.10 -- 修复图形变换的闪退问题 +- 修复图片组合变换的闪退问题 ## 3.0.0-rc.9 - 修复Resource类型$r(变量无法)加载 diff --git a/entry/src/main/ets/pages/ImageTransformation.ets b/entry/src/main/ets/pages/ImageTransformation.ets index 844ed62..bf1a32f 100644 --- a/entry/src/main/ets/pages/ImageTransformation.ets +++ b/entry/src/main/ets/pages/ImageTransformation.ets @@ -46,6 +46,7 @@ struct ImageTransformation { @State isRound: boolean = false; @State isContrast: boolean = false; @State isRotate: boolean = false; + private transformations: collections.Array = new collections.Array(); 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 = new collections.Array() - 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 }; - } - } } \ No newline at end of file