写点什么

鸿蒙应用示例:ArkTS 中设置颜色透明度与颜色渐变方案探讨

作者:zhongcx
  • 2024-10-12
    广东
  • 本文字数:2317 字

    阅读完需:约 8 分钟


/** * 根据比例混合两个十六进制颜色值。 * @param colorA 第一个颜色的十六进制值,例如红色 '#ff0000'。 * @param colorB 第二个颜色的十六进制值,例如黑色 '#000000'。 * @param ratio 混合比例,0 表示仅返回 colorA,1 表示仅返回 colorB,介于 0 和 1 之间的值会混合两个颜色。 * @returns 混合后的颜色的十六进制值。 */function mixColors(colorA: string, colorB: string, ratio: number): string {  let mix = (a: number, b: number, ratio: number) => Math.round(a + (b - a) * ratio).toString(16).padStart(2, '0');  let a = parseInt(colorA.slice(1), 16);  let b = parseInt(colorB.slice(1), 16);  let red = mix((a >> 16) & 255, (b >> 16) & 255, ratio);  let green = mix((a >> 8) & 255, (b >> 8) & 255, ratio);  let blue = mix(a & 255, b & 255, ratio);  return `#${red}${green}${blue}`;}
function convertDecimalColorToHex(decimalColorValue: number): string { if (decimalColorValue < 0 || decimalColorValue > 0xFFFFFFFF) { throw new Error('Color value must be within the range of 0 to 0xFFFFFFFF.'); }
const paddedHexColor = ('00000000' + decimalColorValue.toString(16).toUpperCase()).slice(-8); return '#' + paddedHexColor.slice(-6);}
@Entry@Componentstruct Index { @State resourceColor: Resource | undefined = undefined @State convertedColorHex: string = "" @State displayText: string = "测试测试"
aboutToAppear(): void { this.resourceColor = $r(`app.color.start_window_background`); const colorFromResourceManager = getContext(this).resourceManager.getColorByNameSync('start_window_background'); console.info('从ResourceManager获取的颜色(十进制):', colorFromResourceManager); this.convertedColorHex = convertDecimalColorToHex(colorFromResourceManager); console.info('转换后的十六进制颜色:', this.convertedColorHex); }
build() { Column() { Text('测试1').backgroundColor('rgba(0, 0, 0, 0.5)')
Text('测试2').backgroundColor('#80000000')
Text(mixColors('#ff0000', '#000000', 0)) .fontColor(Color.White) .backgroundColor(mixColors('#ff0000', '#000000', 0)) Text(mixColors('#ff0000', '#000000', 1)) .fontColor(Color.White) .backgroundColor(mixColors('#ff0000', '#000000', 1)) Text(mixColors('#ff0000', '#000000', 0.5)) .fontColor(Color.White) .backgroundColor(mixColors('#ff0000', '#000000', 0.5)) Text(mixColors('#ff0000', '#000000', 0.8)) .fontColor(Color.White) .backgroundColor(mixColors('#ff0000', '#000000', 0.8))
Text(this.displayText) .backgroundColor($r(`app.color.start_window_background`)) .fontSize(50) .fontWeight(FontWeight.Bold) Text(this.displayText) .backgroundColor(this.resourceColor) .fontSize(50) .fontWeight(FontWeight.Bold) Text(this.displayText) .backgroundColor(this.convertedColorHex) .fontSize(50) .fontWeight(FontWeight.Bold) } .height('100%') .width('100%') .backgroundColor(Color.Orange) }}
复制代码

在 HarmonyOS 应用开发中,颜色设置是一项基本但重要的功能。本文将介绍在 ArkTS 中如何设置颜色的透明度,并探讨如何在两种颜色之间进行混合以得到新的颜色值。

一、设置颜色透明度

在 HarmonyOS 的 ArkTS 框架中,可以通过多种方式来设置颜色的透明度。以下是两种常见的方法:

1. 使用 RGBA 格式:通过直接指定 RGBA 值来设置颜色的透明度。

Text('测试1').backgroundColor('rgba(0, 0, 0, 0.5)')
复制代码

2. 使用十六进制颜色值:通过在颜色值前加上表示透明度的十六进制数来设置透明度。

Text('测试2').backgroundColor('#80000000')
复制代码

在此示例中,80 表示半透明,00 表示不透明,ff 表示完全透明。

二、颜色混合方案

在一些应用场景中,需要实现两种颜色之间的混合效果。下面是一个示例,演示如何根据给定的比例混合两种颜色:

/** * 根据比例混合两个十六进制颜色值。 * @param colorA 第一个颜色的十六进制值,例如红色 '#ff0000'。 * @param colorB 第二个颜色的十六进制值,例如黑色 '#000000'。 * @param ratio 混合比例,0 表示仅返回 colorA,1 表示仅返回 colorB,介于 0 和 1 之间的值会混合两个颜色。 * @returns 混合后的颜色的十六进制值。 */mixColors(colorA: string, colorB: string, ratio: number): string {  let mix = (a: number, b: number, ratio: number) => Math.round(a + (b - a) * ratio).toString(16).padStart(2, '0');  let a = parseInt(colorA.slice(1), 16);  let b = parseInt(colorB.slice(1), 16);  let red = mix((a >> 16) & 255, (b >> 16) & 255, ratio);  let green = mix((a >> 8) & 255, (b >> 8) & 255, ratio);  let blue = mix(a & 255, b & 255, ratio);  return `#${red}${green}${blue}`;}
复制代码

三、解决预览器颜色显示问题

在使用 resourceManager 获取颜色值时,可能会遇到在预览器中无法正确显示颜色的问题。为了避免这类问题,建议直接定义颜色常量:如果只是简单的颜色值,建议直接定义字符串类颜色值,如"#000000",这样预览器也能正确显示颜色

用户头像

zhongcx

关注

还未添加个人签名 2024-09-27 加入

还未添加个人简介

评论

发布
暂无评论
鸿蒙应用示例:ArkTS中设置颜色透明度与颜色渐变方案探讨_zhongcx_InfoQ写作社区