自定义颜色透明度如何实现？

每次使用一个色值不同透明度时，想写一个方法，出入opacity及color，得到带有透明度的颜色，如下：

public static setColorTransparency(opacity: number, color: ResourceColor): String {  
  let colorStr = getColorStr(color); //伪代码，期望结果 '#FFFFFF'  
  
  let opacityStr = Math.max(0, Math.min(Math.round(opacity * 255), 255)).toString(16).toUpperCase()  
  
  return '#' + opacityStr + colorStr.replace('#','')  
}1.
2.
3.
4.
5.
6.
7.

希望能帮助实现，最好能将返回值也变成 ResourceColor而不用string，或者有更好的设置透明度的方案。

HarmonyOS

FengTianYa

2024-10-14 10:38:32

482浏览

回答 1

按赞同

按时间

put_get

可以参考代码：

@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World';  
  @State opacityValue: number = 1;  
  
  getColor() {  
    return `rgba(222,33,44,${this.opacityValue})`  
  }  
  
  build() {  
    Row() {  
      Column({ space: 10 }) {  
        Text(this.message)  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
          .fontColor(this.getColor())  
  
        Button('0').onClick(() => {  
          this.opacityValue = 0;  
        })  
        Button('0.5').onClick(() => {  
          this.opacityValue = 0.5;  
        })  
        Button('1').onClick(() => {  
          this.opacityValue = 1;  
        })  
  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

资源json里定义的颜色是没法修改的，编译期就会确定资源的内容和id。如果要对这里面的值进行修改，只能通过resourceManager接口先把颜色值取出来再进行处理，getColorByNameSync需要输入资源名称，对应json文件里的name字段，示例代码如下：

private getColor(colorName: string, opacity: number = 1) {  
  let opacityStr = Math.max(0, Math.min(Math.round(opacity * 255), 255)).toString(16).padStart(2, '0').toLowerCase();  
  
  const colorValue = getContext(this).resourceManager.getColorByNameSync(colorName).toString(16);  
  
  return '#' + opacityStr + colorValue.substring(2);  
}1.
2.
3.
4.
5.
6.
7.

2024-10-14 17:41:02

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

自定义颜色透明度如何实现？

订阅鸿蒙技术特刊，精选内容抢先看