From 7b9da8d9fa756f0d78cf559ee249b6d959b88b3d Mon Sep 17 00:00:00 2001 From: tyBrave Date: Wed, 16 Oct 2024 10:40:22 +0800 Subject: [PATCH] add change color of image in lib Signed-off-by: tyBrave --- entry/src/main/ets/pages/Index.ets | 6 ++ .../main/ets/pages/TestChangeColorPage.ets | 97 ++++++++++++++++++ entry/src/main/resources/base/media/test.png | Bin 0 -> 9714 bytes .../main/resources/base/media/test_svg.svg | 9 ++ .../resources/base/profile/main_pages.json | 3 +- 5 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 entry/src/main/ets/pages/TestChangeColorPage.ets create mode 100644 entry/src/main/resources/base/media/test.png create mode 100644 entry/src/main/resources/base/media/test_svg.svg diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 6cbb7a6..aa6c080 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -164,6 +164,12 @@ struct Index { uri: 'pages/TestCacheDataPage', }); }) + Button("测试颜色变换").margin({top:10}).onClick(()=>{ + router.push({ + uri: 'pages/TestChangeColorPage', + }); + }) + } } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/TestChangeColorPage.ets b/entry/src/main/ets/pages/TestChangeColorPage.ets new file mode 100644 index 0000000..87349bb --- /dev/null +++ b/entry/src/main/ets/pages/TestChangeColorPage.ets @@ -0,0 +1,97 @@ +import { drawing, common2D } from '@kit.ArkGraphics2D'; +import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'; + +@Entry +@Component +struct TestChangeColorPage { + private imageOne: Resource = $r('app.media.test'); + private imageTwo: Resource = $r('app.media.test'); + @State src: Resource = this.imageOne + @State src2: Resource = this.imageTwo + @State color: common2D.Color = { + alpha: 255, + red: 255, + green: 1, + blue: 1 + }; + @State DrawingColorFilterFirst: ColorFilter | undefined = undefined + + build() { + Column() { + Text("点击选择要更改的颜色").margin({ top: 20 }) + Row() { + Button("红色").backgroundColor(Color.Red).margin(5).onClick(() => { + this.color = { + alpha: 255, + red: 255, + green: 1, + blue: 1 + }; + }) + Button("黄色").backgroundColor(Color.Yellow).margin(5).onClick(() => { + this.color = { + alpha: 255, + red: 255, + green: 255, + blue: 1 + }; + }) + Button("绿色").backgroundColor(Color.Green).margin(5).onClick(() => { + this.color = { + alpha: 255, + red: 1, + green: 255, + blue: 1 + }; + }) + Button("蓝色").backgroundColor(Color.Blue).margin(5).onClick(() => { + this.color = { + alpha: 255, + red: 1, + green: 1, + blue: 255 + }; + }) + } + .width('100%') + .height(50) + .justifyContent(FlexAlign.Center) + + Text("原图：").margin({ top: 20 }) + ImageKnifeComponent({ + imageKnifeOption: new ImageKnifeOption({ + loadSrc: this.src + }) + }).width(110).height(110) + + Text("点击图片更改图片颜色：").margin({ top: 30 }) + ImageKnifeComponent({ + imageKnifeOption: new ImageKnifeOption({ + loadSrc: this.src, + drawingColorFilter: this.DrawingColorFilterFirst + }) + }) + .onClick(() => { + this.DrawingColorFilterFirst = + drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN); + }).width(110).height(110) + + Text("测试非svg图片变色").margin({ top: 30 }) + ImageKnifeComponent({ + imageKnifeOption: new ImageKnifeOption({ + loadSrc: $r('app.media.test'), + drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN) + }) + }).width(110).height(110) + + Text("测试svg图片变色").margin({ top: 30 }) + ImageKnifeComponent({ + imageKnifeOption: new ImageKnifeOption({ + loadSrc: $r("app.media.test_svg"), + drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN) + }) + }).width(110).height(110) + + }.width('100%').height('100%') + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/media/test.png b/entry/src/main/resources/base/media/test.png new file mode 100644 index 0000000000000000000000000000000000000000..b0d65d0fa431513655312e60e316a49675bdba52 GIT binary patch literal 9714 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 literal 0 HcmV?d00001 diff --git a/entry/src/main/resources/base/media/test_svg.svg b/entry/src/main/resources/base/media/test_svg.svg new file mode 100644 index 0000000..9910b1d --- /dev/null +++ b/entry/src/main/resources/base/media/test_svg.svg @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 7b16f4e..e553510 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -23,6 +23,7 @@ "pages/TestSetCustomImagePage", "pages/TestErrorHolderPage", "pages/TestTaskResourcePage", - "pages/TestCacheDataPage" + "pages/TestCacheDataPage", + "pages/TestChangeColorPage" ] } \ No newline at end of file