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

js 复制代码
/**
 * 根据比例混合两个十六进制颜色值。
 * @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
@Component
struct 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值来设置颜色的透明度。
js 复制代码
Text('测试1').backgroundColor('rgba(0, 0, 0, 0.5)')
  1. 使用十六进制颜色值:通过在颜色值前加上表示透明度的十六进制数来设置透明度。
js 复制代码
Text('测试2').backgroundColor('#80000000')

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

二、颜色混合方案

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

js 复制代码
/**
 * 根据比例混合两个十六进制颜色值。
 * @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",这样预览器也能正确显示颜色

相关推荐
万少2 小时前
03-自然壁纸实战教程-项目结构介绍
harmonyos
前端世界5 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
android·安全·harmonyos
长弓三石7 小时前
鸿蒙网络编程系列57-仓颉版固定包头可变包体解决TCP粘包问题
网络·tcp/ip·harmonyos
zhanshuo8 小时前
HarmonyOS 隐私安全机制实战:动态权限、沙箱隔离与分布式授权
harmonyos
zhanshuo8 小时前
鸿蒙系统防黑秘籍:如何彻底防止恶意应用窃取用户数据?
harmonyos
财经三剑客11 小时前
鸿蒙智行6月交付新车52747辆 单日交付量3651辆
华为·harmonyos
睿麒12 小时前
鸿蒙app 开发中的 map 映射方式和用法
华为·harmonyos
zhanshuo14 小时前
鸿蒙 Secure Boot 全流程解析:从 BootROM 到内核签名验证的实战指南
harmonyos
zhanshuo14 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
harmonyos
塞尔维亚大汉14 小时前
鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)
harmonyos·源码阅读