vue实现把Ox格式颜色值转换成rgb渐变颜色值(开箱即用)

图示:

在这里插入图片描述

核心代码:

//将0x格式的颜色转换为Hex格式,并计算插值返回rgb颜色
Vue.prototype.$convertToHex = function (colorCode1, colorCode2, amount) {
    // 确保输入是字符串,并检查是否以'0x'开头
    let newCode1 = ''
    let newCode2 = ''
    if (typeof colorCode1 === 'string' && colorCode1.startsWith('0x')) {
        // 移除'0x'前缀并返回新的十六进制字符串  // 从索引2开始取子串(跳过'0x')
        newCode1 = '#' + colorCode1.substring(2)
    }
    if (typeof colorCode2 === 'string' && colorCode2.startsWith('0x')) {
        // 移除'0x'前缀并返回新的十六进制字符串  // 从索引2开始取子串(跳过'0x')
        newCode2 = '#' + colorCode2.substring(2)
    }
    // 将颜色字符串转换为RGB对象
    let rgb1 = {
        r: parseInt(newCode1.substring(1, 3), 16),
        g: parseInt(newCode1.substring(3, 5), 16),
        b: parseInt(newCode1.substring(5, 7), 16)
    };
    let rgb2 = {
        r: parseInt(newCode2.substring(1, 3), 16),
        g: parseInt(newCode2.substring(3, 5), 16),
        b: parseInt(newCode2.substring(5, 7), 16)
    };

    // 插值计算
    let r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * amount);
    let g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * amount);
    let b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * amount);
    let colorRGB = `rgb(${r},${g},${b})`
    return colorRGB
}

使用方法:

let colorCode1 = "0x00FF2F"
let colorCode2 = "0xFEA90B"
let amount = 0.6  // 插值
console.log('获取到的rgb格式颜色值', this.$convertToHex(colorCode1,colorCode2,amount))

案例(根据温度值数字算渐变值):

//0x格式颜色值
let  gradientObj={
   16: "0x00FF2F",
    32: "0xFEA90B",
    36: "0xFF3300",
    -40: "0x061BFC",
 }
//判断数字是否小于等于对象的key值,相同就拿出对应的value值,并返回当前的rgb值
        changeBgColor(num) {
            let colorCode1 = ''
            let colorCode2 = ''
            let amount = 1
            let keys = Object.keys(this.gradientData)
            keys.sort((a, b) => {
                return a - b;
            });
            if (num <= parseInt(keys[0])) {
                colorCode1 = this.gradientData[keys[0]]
                colorCode2 = this.gradientData[keys[0]]
            } else if (num >= parseInt(keys[keys.length - 1])) {
                colorCode1 = this.gradientData[keys[keys.length - 1]]
                colorCode2 = this.gradientData[keys[keys.length - 1]]
            } else {
                for (let i = 0; i < keys.length - 1; i++) {
                    if (num >= keys[i] && num <= keys[i + 1]) {
                        colorCode1 = this.gradientData[keys[i]]
                        colorCode2 = this.gradientData[keys[i + 1]]
                        amount = (num * 1.0 - keys[i]) / (keys[i + 1] - keys[i]); // 根据温度值计算插值比例
                        break;
                    }
                }
            }

            return this.$convertToHex(colorCode1, colorCode2, amount)
        },

案例使用:

this.changeBgColor(30.25)   //输入值为:rgb(226, 178, 15)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/495211.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv9改进策略:block优化 | Transformer架构ConvNeXt 网络在检测中大放异彩

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文改进内容&#xff1a;Transformer架构 ConvNeXt 网络在图像分类和识别、分割领域大放异彩&#xff0c;同时对比 Swin-T 模型&#xff0c;在多种任务中其模型的大小和准确率均有一些提升&#xff0c;模型的 FLOPs 较大的减小且 Acc …

Solana 低至 0.4 Sol 创建OpenBook市场ID教程

Raydium上线代币之前&#xff0c;需要OpenBook ID&#xff0c;但是Raydium官方提供的链接创建需要花费 3-4 SOL。这成本使得我们对发行代币望而却步。 本篇文章介绍OpenBook的概念和教大家如何更低成本 (最低0.4 SOL) 创建 OpenBook Market ID。 目录 1、Raydium加池子创建为什…

机器学习中的 K-Means算法及其优缺点(包含Python代码样例)

一、简介 K-Means算法是一种经典的无监督学习算法&#xff0c;用于将数据集中的样本分为 K 个不同的类别。K-均值聚类算法的工作原理如下&#xff1a; 随机选择 K 个中心点作为初始聚类中心。将每个样本点分配到离其最近的聚类中心&#xff0c;形成 K 个初始聚类。通过计算每…

亮数据——让你的IP走出去,让价值返回来

亮数据——让你的IP走出去&#xff0c;让价值返回来 前言跨境电商最最最大的痛点——让IP走出去超级代理服务器加速网络免费的代理管理软件亮数据解决痛点亮数据优势介绍亮数据浏览器的使用示例总结 前言 当前社会信息的价值是不可想象的&#xff0c;今天在亮数据中看到了个【…

大话设计模式之模板方法模式

模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个算法的框架&#xff0c;将特定步骤的实现延迟到子类中。模板方法模式通过在父类中定义算法的骨架&#xff0c;而将具体步骤的实现留给子类来完成&#xff0c;从而使子类…

用搜索引擎收集信息-常用方式

1&#xff0c;site csdn.net &#xff08;下图表示只在csdn网站里搜索java&#xff09; 2&#xff0c;filetype:pdf &#xff08;表示只检索某pdf文件类型&#xff09; 表示在浏览器里面查找有关java的pdf文件 3&#xff0c;intitle:花花 &#xff08;表示搜索网页标题里面有花…

linux查找指定目录下包含指定字符串文件,包含子目录

linux查找指定目录下包含指定字符串的文件&#xff0c;包含子目录 linux查找指定目录下包含指定字符串的指定文件格式&#xff0c;包含子目录 指定目录 cd /home/www/linux查找指定目录下包含指定字符串的文件&#xff0c;包含子目录 grep -r "指定字符串"注释 gr…

微信开发者工具接入短剧播放器插件

接入短剧播放插线 申请添加插件基础接入app.jsonapp.jsplayerManager.js数据加密跳转到播放器页面运行出错示例小程序页面页面使用的方法小程序输入框绑定申请添加插件 添加插件:登录微信开发者平台 ——> 设置 ——> 第三方设置 ——> 插件管理 ——> 搜索“短剧…

操作系统导论-py2文件修改为py3文件快捷解决方法

在操作系统导论作业中&#xff0c;我们需要用到HW文件。但是这个代码包中&#xff0c;所有.py文件都是py2格式的&#xff0c;需要我们修改为py3文件后运行&#xff0c;即将.py文件开头的 #! /usr/bin/env python 修改为&#xff1a; #! /usr/bin/env python3 在前面小部分文件中…

【快捷部署】010_MySQL(5.7.27)

&#x1f4e3;【快捷部署系列】010期信息 编号选型版本操作系统部署形式部署模式复检时间010MySQL5.7.27Ubuntu 20.04Docker单机2024-03-28 一、快捷部署 #!/bin/bash ################################################################################# # 作者&#xff1a…

idea类已经存在却报错

一句话导读 在idea中导入新的项目&#xff0c;很多类都飘红报错&#xff0c;mvn compile可以通过&#xff0c;可能是因为idea缓存问题导致。 由于这个项目是由老项目复制过来后&#xff0c;再继续开发新的功能&#xff0c;很多同事导入后&#xff0c;都爆出新的类找不到。而编译…

正弦实时数据库(SinRTDB)的使用(4)-快照查询

前文已经将松果实时数据库的安装、创建点表、创建测点、接入OPC DA的数据进行了介绍&#xff0c;没有了解的可以先看如下博客&#xff1a; 正弦实时数据库(SinRTDB)的安装 正弦实时数据库(SinRTDB)的使用(1)-使用数据发生器写入数据 正弦实时数据库(SinRTDB)的使用(2)-接入O…

【吊打面试官系列】Redis篇 -怎么测试 Redis 的连通性?

大家好&#xff0c;我是锋哥。今天分享关于 【怎么测试 Redis 的连通性&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 怎么测试 Redis 的连通性&#xff1f; 使用 ping 命令。 要测试Redis的连通性&#xff0c;可以使用redis-cli命令行工具或编写代码。以下是…

Docker 哲学 - Dockerfile 指令

Dockerfile 的 entrypoint 和 cmd 书写方式一样吗&#xff0c;分别用一个node项目的 demo来举例 Dockerfile 的 entrypoint 、cmd 有什么区别&#xff0c;分别举例他们同时出现的场景和 单独出现的场景 entrypoint 和 cmd 命令&#xff1a; 同时出现&#xff1a; 1、cmd 作为 e…

格式化危机!教你轻松恢复数据!

一、遭遇格式化&#xff0c;数据恢复并非难事 当存储设备遭遇格式化后&#xff0c;许多人可能会陷入恐慌&#xff0c;担心重要数据一去不复返。但实际上&#xff0c;数据恢复并非如想象中那般困难。格式化操作主要清除了文件系统的索引信息&#xff0c;而实际的数据往往还残留…

[STM32] Keil 创建 HAL 库的工程模板

Keil 创建 HAL 库的工程模板 跟着100ASK_STM32F103_MINI用户手册V1.1.pdf的第7章步骤进行Keil工程的创建。 文章目录 1 创建相关文件夹2 创建“main.c/h”和“stm32f1xx_clk.c/h”3 复制CMSIS和HAL库4 创建新的Keil工程5 添加组文件夹和工程文件6 配置Keil设置 1 创建相关文件…

Ollama使用

当前各种大模型层出不穷&#xff0c;但想要在本地运行起来一个大模型还是有一定门槛的。 并且模型众多&#xff0c; 每个模型都有自己不同的配置和使用方法&#xff0c;使用非常不便。 Ollama就是一个非常好的工具&#xff0c; 可以让你方便在本地运行各种大模型。 1 安装 支…

【前端学习——js篇】11.元素可见区域

具体见&#xff1a;https://github.com/febobo/web-interview 11.元素可见区域 ①offsetTop、scrollTop offsetTop&#xff0c;元素的上外边框至包含元素的上内边框之间的像素距离&#xff0c;其他offset属性如下图所示&#xff1a; 下面再来了解下clientWidth、clientHeight…

报错there is no HDFS_NAMENODE_USER defined

在Hadoop安装目录下找到sbin文件夹&#xff0c;修改里面的四个文件 1、对于start-dfs.sh和stop-dfs.sh文件&#xff0c;添加下列参数&#xff1a; HDFS_DATANODE_USERroot HDFS_DATANODE_SECURE_USERhdfs HDFS_NAMENODE_USERroot HDFS_SECONDARYNAMENODE_USERroot 2、对于st…

云贝教育 |【技术文章】pg_bulkload介绍

注: 本文为云贝教育 刘峰 原创&#xff0c;请尊重知识产权&#xff0c;转发请注明出处&#xff0c;不接受任何抄袭、演绎和未经注明出处的转载。 pg_bulkload 是一个高性能的数据加载工具&#xff0c;专门为PostgreSQL数据库设计&#xff0c;用于大批量数据的快速导入。pg_bulk…
最新文章