HarmonyOS 应用开发-根据icon自适应背景颜色

news/2024/7/21 11:20:27 标签: harmonyos, 华为, 鸿蒙开发, 移动开发, 前端框架

介绍

本示例将介绍如何根据图片设置自适应的背景色。

效果图预览

使用说明

  1. 转换图片为PixelMap，取出所有像素值
  2. 遍历所有像素值，查找到出现次数最多的像素，即为图片的主要颜色
  3. 适当修改图片的主要颜色，作为自适应的背景色

实现思路

实现步骤

  1. 解码图片，转换为PixelMap对象，便于提取像素值
  2. 提取所有像素值，转换为整数，放入数组中
  3. 遍历数组，将所有像素值放入一个Map中，key为像素值，value为个数
  4. 遍历Map，找出出现次数最多的像素值
  5. 将整数格式的像素值转换为RGB格式，再转换为HSV格式，参考hue(色调)修改saturation(饱和度)和value(明度)
  6. 将HSV格式转换为RGB格式，就得到了背景色

具体实现

  1. 将图片转换为PixelMap
    ...
    let pixelMap: image.PixelMap = await image2PixelMap(item.icon);
    ...
    export async function image2PixelMap(icon: string): Promise<image.PixelMap> {
      let rawFileDescriptor: resourceManager.RawFileDescriptor = resourceMgs.getRawFdSync(icon);
      let imageSource: image.ImageSource = image.createImageSource(rawFileDescriptor);
      let pixelMap: image.PixelMap = await imageSource.createPixelMap({
        editable: false,
        desiredPixelFormat: image.PixelMapFormat.BGRA_8888,
        desiredSize: { width: 40, height: 40 }
      })
      return pixelMap;
    }
  1. 遍历PixelMap中的所有像素，放到一个数组中
    ...
    let allPixels: number[] = await traverseAllPixel(pixelMap);
    ...
    export async function traverseAllPixel(pixelMap: image.PixelMap): Promise<number[]> {
      const pixelArrayBuffer: ArrayBuffer = new ArrayBuffer(40 * 40 * 4);
      await pixelMap.readPixelsToBuffer(pixelArrayBuffer);
      const allPixels: number[] = [];
      const unit8Pixels: Uint8Array = new Uint8Array(pixelArrayBuffer);
      for (let i = 0; i < unit8Pixels.length; i += 4) {
        const rgb: ColorRgb = {
          red: unit8Pixels[i+2],
          green: unit8Pixels[i+1],
          blue: unit8Pixels[i],
          alpha:unit8Pixels[i+3]
      }
      if (rgb.red === 0 && rgb.green === 0 && rgb.blue === 0 && rgb.alpha === 0) {
        continue;
      }
      allPixels.push(ColorUtils.rgbToNumber(rgb));
      }
      return allPixels;
    }
  1. 遍历数组，找到出现次数最多的像素
    ...
    let maxPixel: number = findMaxPixel(allPixels);
    ...
    export function findMaxPixel(allPixels: number[]): number {
      let map: Map<number, number> = new Map();
      allPixels.forEach((pixel: number) => {
        if (map.has(pixel)) {
          map.set(pixel, map.get(pixel)! + 1);
        } else {
          map.set(pixel, 1);
        }
      })
      let maxPixel: number = 0;
      let maxTimes: number = 0;
      map.forEach((value: number, key: number) => {
        if (value >= maxTimes) {
          maxTimes = value;
          maxPixel = key;
        }
      })
      return maxPixel;
    }
  1. 将出现次数最多的像素值转换为RGB颜色格式
   ...
   let rgb: ColorRgb = ColorUtils.numberToRgb(maxPixel);
   ...
   public static numberToRgb(color: number): ColorRgb {
     return {
       red: (color & 0xFF0000) >> 16,
       green: (color & 0xFF00) >> 8,
       blue: (color & 0xFF),
       alpha:(color & 0xFF000000)>>24
     }
   }
  1. 将RGB颜色格式转换为HSV格式，转换公式如图所示。

    ...
    let hsv: ColorHsv = ColorUtils.rgb2hsv(rgb);
    ...
    public static rgb2hsv(color: ColorRgb): ColorHsv {
      const red: number = color.red / MAX_RGB_VALUE;
      const green: number = color.green / MAX_RGB_VALUE;
      const blue: number = color.blue / MAX_RGB_VALUE;

      const max: number = Math.max(red, green, blue);
      const min: number = Math.min(red, green, blue);
      const delta: number = max - min;

      let hue: number = 0;
      let saturation: number = 0;
      let value: number = 0;
      if (max === min) {
        hue = 0;
      } else if (max === red) {
        hue = (green >= blue ? ((green - blue) / delta) * 60 : ((green - blue) / delta) * 60 + 360);
      } else if (max === green) {
        hue = (((blue - red) / delta) + 2) * 60;
      } else if (max === blue) {
        hue = (((red - green) / delta) + 4) * 60;
      }
      saturation = (max === 0 ? 0 : delta / max);
      value = max;

      return {
        hue: hue,
        saturation: saturation,
        value: value,
        alpha:color.alpha
      }
    }
  1. 修改HSV格式中的S和V值，使背景色和图标颜色有明显区分
    ...
    modifySVValue(hsv);
    ...
    export function modifySVValue(color: ColorHsv): void {
      if (color.hue > 20 && color.hue <= 60) {
        color.saturation = 0.12;
        color.value = 0.93;
      } else if (color.hue > 60 && color.hue <= 190) {
        color.saturation = 0.08;
        color.value = 0.91;
      } else if (color.hue > 190 && color.hue <= 270) {
        color.saturation = 0.1;
        color.value = 0.93;
      } else {
        color.saturation = 0.08;
        color.value = 0.93;
      }
    }
  1. 将HSV格式转换为RGB格式，转换公式如图所示。

    ...
    rgb = ColorUtils.hsv2rgb(hsv);
    ...
    public static hsv2rgb(color: ColorHsv): ColorRgb {
      const h60: number = color.hue / 60;
      const h60f: number = Math.floor(h60);
      const hi: number = h60f % 6;
      const f: number = h60 - h60f;
      const p: number = color.value * (1 - color.saturation);
      const q: number = color.value * (1 - f * color.saturation);
      const t: number = color.value * (1 - (1 - f) * color.saturation);

      let red: number = 0.0;
      let green: number = 0.0;
      let blue: number = 0.0;
      if (hi === 0) {
        red = color.value;
        green = t;
        blue = p;
      } else if (hi === 1) {
        red = q;
        green = color.value;
        blue = p;
      } else if (hi === 2) {
        red = p;
        green = color.value;
        blue = t;
      } else if (hi === 3) {
        red = p;
        green = q;
        blue = color.value;
      } else if (hi === 4) {
        red = t;
        green = p;
        blue = color.value;
      } else if (hi === 5) {
        red = color.value;
        green = p;
        blue = q;
      }
      return {
        red: Math.floor(red * MAX_RGB_VALUE),
        green: Math.floor(green * MAX_RGB_VALUE),
        blue: Math.floor(blue * MAX_RGB_VALUE),
        alpha:color.alpha
      }
    }
  1. 将rgb转换为数字，放入AppInfo对象中
    ...
    item.backgroundColor = ColorUtils.rgbToNumber(rgb);
    ...
    public static rgbToNumber(color: ColorRgb): number {
      return ((0xFF << 24) | (color.red << 16) | (color.green << 8) | color.blue);
    }
  1. 通过组件的backgroundColor属性设置背景色
    Row() {
    ...
    }
    .backgroundColor(this.item.backgroundColor === '' ? Color.White : this.item.backgroundColor)

高性能知识点

  1. 解码图片时，分辨率设为40*40，既可以加快计算背景颜色的速度，又可以保证准确性
  2. 提取像素时，由于鸿蒙中的颜色是用{red,green,blue,alpha}来表示，直接放入数组或者Map中会影响计算出现次数最多的像素的速度，所以需要使用rgbToNumber方法转换为整数

工程结构&模块类型

   iconmaincolor                                   // har类型
   |---mainpage
   |   |---MainPage.ets                            // 视图层，主要页面
   |---utils
   |   |---ColorUtils.ets                          // 颜色处理工具类
   |   |---ImageUtils.ets                          // 图片处理工具类

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向


http://www.niftyadmin.cn/n/5477579.html

相关文章

AI 创业指难（一） ：Stable Diffusion AI 绘画怎么用

AI 创业指难（一） ：Stable Diffusion AI 绘画怎么用

一. 前言 一年不到&#xff0c;AI对生活和工作的影响已经逐步体现。所以千万别掉队了&#xff0c;也许 AI 不能成为我们的主要工作&#xff0c;但是如何借助 AI 实现副业的扩展同样值得思考。 这一篇就来讲一个 AI 绘画工具&#xff0c;这个工具我也是才上手不久&#xff0c;…
阅读更多...
GIT fatal: The remote end hung up unexpectedly

GIT fatal: The remote end hung up unexpectedly

error: RPC failed; result18, HTTP code 200 MiB | 226.00 KiB/s fatal: The remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed 错误&#xff1a; error: RPC failed; result18, HTTP code 200 MiB | 226.00 KiB/s fatal: The remote …
阅读更多...
[C语言]——动态内存管理

[C语言]——动态内存管理

目录 一.为什么要有动态内存分配 二.malloc和free 1.malloc 2.free 三.calloc和realloc 1.calloc 2.realloc 3.空间的释放​编辑 四.常见的动态内存的错误 1.对NULL指针的解引用操作 2.对动态开辟空间的越界访问 3.对非动态开辟内存使用free释放 4.使用free释放⼀块…
阅读更多...
python教程(4更新中)

python教程(4更新中)

单元测试 如果你听说过“测试驱动开发”&#xff08;TDD&#xff1a;Test-Driven Development&#xff09;&#xff0c;单元测试就不陌生。 单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。 比如对函数abs()&#xff0c;我们可以编写出以下几个测…
阅读更多...
WKWebView的使用

WKWebView的使用

一、简介 在iOS中&#xff0c;WKWebView是WebKit框架提供的一个用于展示网页内容的控件&#xff0c;相比UIWebView有更好的性能和功能。 以下是在iOS中使用WKWebView的基本步骤&#xff1a; 1.1 导入WebKit框架 import WebKit1.2 创建WKWebView实例 let webView WKWebVie…
阅读更多...
如何给MySQL数据库的所有表统一加上字段

如何给MySQL数据库的所有表统一加上字段

在开发过程中&#xff0c;有时候慢慢的建了很多数据库表&#xff0c;但是后来发现需要统一增加某些字段的时候&#xff0c;可以通过alter语句 ALTER TABLE 表名 ADD 列名 数据类型;比如我要给t_user表增加gmt_create与gmt_modified字段&#xff0c;用作记录新增记录时间与更新…
阅读更多...
一款轻量、干净的 Laravel 后台管理框架

一款轻量、干净的 Laravel 后台管理框架

系统简介 ModStart 是一个基于 Laravel 的模块化快速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议&#xff0c;免费且不限制商业使用。 系统特性 …
阅读更多...
k8s_入门_命令详解

k8s_入门_命令详解

命令详解 kubectl是官方的CLI命令行工具&#xff0c;用于与 apiserver进行通信&#xff0c;将用户在命令行输入的命令&#xff0c;组织并转化为 apiserver能识别的信息&#xff0c;进而实现管理k8s各种资源的一种有效途径 1. 帮助 2. 查看版本信息 3. 查看资源对象等 查看No…
阅读更多...
最新文章

Copyright @ 2022~2023