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

news2024/10/8 22:10:54

图示:

在这里插入图片描述

核心代码:

//将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.coloradmin.cn/o/1554868.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python统计分析——假设概念、错误、p值和样本量

参考资料&#xff1a;python统计分析【托马斯】 1、例子 假设你在经营一家私立教育机构&#xff0c;你的合同显示&#xff1a;如果全国平均水平时100分时&#xff0c;你的学生在期末考试中得了110分&#xff0c;你就能获得奖金&#xff1b;若结果明显降低&#xff0c;你就会失…

听了中国电信关闭Wi-Fi双频合一功能之后,到底该连接2.4GHz还是5GHz频段?

前言 前段时间沸沸扬扬的关闭双频合一建议&#xff0c;小白也尝试关闭了一下&#xff0c;网络确实是好了不少。 有小伙伴还是有点疑虑&#xff0c;中国电信说的关闭Wi-Fi双频合一功能真的有用吗&#xff1f;点击下方蓝字一探究竟&#xff01; 中国电信建议关闭路由器的双频合一…

【Go】四、包名、访问范围控制、标识符、运算符

文章目录 1、_2、包名3、命名大小影响可访问范围4、运算符5、获取终端输入 1、_ 下划线"_"本身在Go中是一个特殊的标识符&#xff0c;称为空标识符用于忽略某个值 1&#xff09;忽略导入的没使用的包 2&#xff09;忽略某个返回值 2、包名 main包是程序的入口包&a…

2024最新华为OD机试试题库全 -【两个字符串间的最短路径问题】- C卷

1. 🌈题目详情 1.1 ⚠️题目 给定两个字符串,分别为字符串 A 与字符串 B。 例如 A字符串为 “ABCABBA”,B字符串为 “CBABAC” 可以得到下图 m * n 的二维数组,定义原点为(0,0),终点为(m,n),水平与垂直的每一条边距离为1,映射成坐标系如下图。 从原点 (0,0) 到 (0,…

Matlab与数学计算

原文地址&#xff1a;Matlab与数学计算 - Pleasure的博客 下面是正文内容&#xff1a; 前言 这是一篇笔记。主要用于介绍MatLab的作用以及其作为数学工具的使用方法。 目的是总结学校课件复习自用&#xff0c;但是不可能像相关的书籍那么系统全面&#xff0c;力求简单明了。都…

VsCode正确解决vue3+Eslint+prettier+Vetur的配置冲突

手把手教你VsCode正确解决vue3EslintprettierVetur的配置冲突 VsCode正确解决vue3EslintprettierVetur的配置冲突Eslint文档查看和修改规则&#xff1a;step1&#xff1a;首先快速浏览下规则简要setp2: ctrlF 搜索你要配置规则的英文名&#xff0c;例如attributesetp3: 修改配置…

LeetCode 热题 100 题解(一):哈希部分

《LeetCode热题 100》 经过了两个多月&#xff0c;终于刷完了代码随想录的题目&#xff0c;现在准备开始挑战热题一百了&#xff0c;接下来我会将自己的题解以博客的形式同步发到力扣和 c 站&#xff0c;希望在接下来的征程中与大家共勉&#xff01; 题组一&#xff1a;哈希 题…

OSCP靶场--RubyDome

OSCP靶场–RubyDome 考点(CVE-2022-25765 suid ruby提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap -Pn -sC -sV 192.168.249.22 --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-03-29 00:28 EDT Nmap scan report for 192.168.249.22 Hos…

基于Spring Boot 3 + Spring Security6 + JWT + Redis实现接口资源鉴权

紧接上一篇文章&#xff0c;基于Spring Boot 3 Spring Security6 JWT Redis实现接口资源鉴权 系列文章指路&#x1f449; 系列文章-基于SpringBoot3创建项目并配置常用的工具和一些常用的类 项目源码&#x1f449; /shijizhe/boot-test 文章目录 1. 修改 UserDetailsServic…

【解決|三方工具】Obi Rope 编辑器运行即崩溃问题

开发平台&#xff1a;Unity 2021.3.7 三方工具&#xff1a;Unity资产工具 - Obi Rope   问题背景 使用Unity三方开发工具 - Obi Rope 模拟绳索效果。配置后运行 Unity 出现报错并崩溃。通过崩溃日志反馈得到如下图所示 这是一个序列化问题造成的崩溃&#xff0c;指向性为 Obi…

CentOS VNC

VNC服务选择 先来说说Linux上的VNC服务端&#xff0c;比较常用的就是tigervnc和x11vnc。x11vnc可以让远程访问者控制本地的实际显示器&#xff0c;而tigervnc既可以远程控制实际显示器&#xff0c;还可以控制平行独立于当前物理显示器的虚拟显示器。 1、安装 tigervnc yum i…

docker--部署 (超详版) (五)

环境准备&#xff1a;docker&#xff0c;mysql&#xff0c;redis&#xff0c;镜像&#xff0c;nginx 把虚拟机打开&#xff0c;连接xshell&#xff0c;参考博客&#xff1a; https://blog.csdn.net/m0_74229802/article/details/136965820?spm1001.2014.3001.5501 一&#x…

使用anime.js实现列表滚动轮播

官网&#xff1a;https://animejs.com/ html <div id"slide1"><div class"weather-item" v-for"item in weatherList"><div><img src"../../images/hdft/position.png" alt"">{{item.body.cityInf…

SpringBoot分布式锁自定义注解处理幂等性

SpringBoot分布式锁自定义注解处理幂等性 注解简介 注解&#xff08;Annotation&#xff09;是Java SE 5.0 版本开始引入的概念&#xff0c;它是对 Java 源代码的说明&#xff0c;是一种元数据&#xff08;描述数据的数据&#xff09;。 Java中的注解主要分为以下三类: JDK…

HTML5 和 CSS3 提高

一、HTML5 的新特性 HTML5 的新增特性主要是针对于以前的不足&#xff0c;增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题&#xff0c;基本是 IE9 以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量使用这些新特性。 声明…

账号微服务短信验证码发送工具单元测试

账号微服务短信验证码发送工具单元测试 注意sms的 app-code #----------sms短信配置-------------- sms:app-code: dd7829bedfaf4373875aa91abba82523template-id: JM1000372package net.xdclass.config;import org.springframework.context.annotation.Bean; import org.spri…

人工智能|推荐系统——搜索引擎广告

原文题目 Dark sides of artificial intelligence: The dangers of automated decision-making in search engine advertising(JASIST,2023) 人工智能的阴暗面:搜索引擎广告自动决策的危险 摘要 随着人工智能应用的日益广泛,搜索引擎供应商越来越多地要求广告商使用基于机…

Clickhouse-表引擎探索之MergeTree

引言 前文曾说过&#xff0c;Clickhouse是一个强大的数据库Clickhouse-一个潜力无限的大数据分析数据库系统 其中一个强大的点就在于支持各类表引擎以用于不同的业务场景。 MergeTree MergeTree系列的引擎被设计用于插入极大量的数据到一张表当中。数据可以以数据片段的形式一…

OpenHarmony实战:Vmware虚拟机和Ubuntu安装

避坑指南 1. 虚拟机命名、用户名称、路径不能有汉字 名称或者路径有汉字&#xff0c;导致输入失败或者安装失败 2. 虚拟机处理器内核总数&#xff08;处理器数量 X 每个处理器的内核数量&#xff09;不得超过电脑逻辑处理器总个数 太少时&#xff0c;下载代码和编译非常缓慢…

YOLOv9解读

论文地址&#xff1a;https://arxiv.org/abs/2402.13616 Github地址&#xff1a;https://github.com/WongKinYiu/yolov9 一、引言 作者认为当前深度学习方法忽略了一个事实&#xff0c;即当输入数据经过逐层特征提取和空间变换时&#xff0c;大量信息将会丢失。本文基于深入研…