#鸿蒙通关秘籍#如何根据图片设置自适应背景色?

HarmonyOS
9天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
IoT风中琴

根据图片设置背景色的关键在于识别图片的主要颜色并进行适当的转换。具体步骤如下:

  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;
    }
    
  2. 提取所有像素并找出出现次数最多的像素值:

    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;
    }
    
  3. 将出现次数最多的像素值修改为适应的背景颜色:

    • 将RGB颜色转换为HSV,然后调整色调。
    let hsv: ColorHsv = ColorUtils.rgb2hsv(rgb);
    
    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;
      }
    }
    
  4. 最后,将新的颜色应用为背景:

    Row() {
      // 其他组件代码
    }
    .backgroundColor(this.item.backgroundColor === '' ? Color.White : this.item.backgroundColor)
    
分享
微博
QQ
微信
回复
9天前
相关问题
如何设置窗口的背景色
1886浏览 • 1回复 待解决
如何设置WebView的背景色
516浏览 • 1回复 待解决
HarmonyOS 如何设置渐变背景色
866浏览 • 1回复 待解决
Button组件如何设置渐变背景色
2510浏览 • 1回复 待解决
AlertDialog没有找到设置背景色API
365浏览 • 1回复 待解决
使用js引擎 设置dom背景色无效
804浏览 • 0回复 待解决
如何设置背景色的饱和度和亮度?
393浏览 • 1回复 待解决
TextInput按压态背景色如何修改
2467浏览 • 1回复 待解决
HarmonyOS 自定义Dialog背景色透明问题
918浏览 • 1回复 待解决