当前位置: 首页 > news >正文

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 = 1let 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)

相关文章:

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

图示&#xff1a; 核心代码&#xff1a; //将0x格式的颜色转换为Hex格式&#xff0c;并计算插值返回rgb颜色 Vue.prototype.$convertToHex function (colorCode1, colorCode2, amount) {// 确保输入是字符串&#xff0c;并检查是否以0x开头let newCode1 let newCode2 if (t…...

Unity 窗口化设置

在Unity中要实现窗口化&#xff0c;具体设置如下&#xff1a; 在编辑器中&#xff0c;选择File -> Build Settings。在Player Settings中&#xff0c;找到Resolution and Presentation部分。取消勾选"Fullscreen Mode"&#xff0c;并选择"Windowed"。设…...

Android14之深入理解sp模板类(二百零二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

.NET core 5.0 及以上的Windows Service开发

首先&#xff0c;一定要和.NET Framework区分开&#xff0c; 详细请看微软的2023年的最新官方文档 Create Windows Service using BackgroundService - .NET | Microsoft Learn Create a Windows Service installer - .NET | Microsoft Learn 同样微软的官方微博给出了开发…...

Nginx配置文件解释

Nginx可以作为静态页面的web服务器&#xff0c;同时还支持CGI协议的动态语言&#xff0c;比如perl、php等。但是不支持java。Java程序只能通过与tomcat配合完成。Nginx专为性能优化而开发&#xff0c;性能是其最重要的考量,实现上非常注重效率 &#xff0c;能经受高负载的考验,…...

R语言赋值符号<-、=、->、<<-、->>的使用与区别

R语言的赋值符号有&#xff1c;-、、-&#xff1e;、&#xff1c;&#xff1c;-、-&#xff1e;&#xff1e;六种&#xff0c;它们的使用与区别如下: <-’&#xff1a;最常用的赋值符号。它将右侧表达式的值赋给左侧的变量&#xff0c;像一个向左的箭头。例如&#xff0c;x …...

ffmpeg重点之时间戳,PTS、DTS、time_base

PTS和DTS和时间基time_base 首先我们知道PTS是一帧音频或视频显示的时间&#xff0c;DTS是解码时间戳 既然是时间&#xff0c;PST和DTS的单位是什么呢?秒还是毫秒&#xff0c;抑或是纳秒&#xff1f; 先说结论—都不是 先引入FFmpeg中时间基的概念&#xff0c;也就是time_bas…...

OpenGL 实现“人像背景虚化“效果

手机上的人像模式,也被人们称作“背景虚化”或 ”双摄虚化“ 模式,也称为 Bokeh 模式,能够在保持画面中指定的人或物体清晰的同时,将其他的背景模糊掉。突出画面的主体部分,主观上美感更强烈。 人像模式的一般实现原理是,利用双摄系统获取景深信息,并通过深度传感器和图…...

基于springboot实现校园周边美食探索及分享平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现园周边美食探索及分享平台系统演示 摘要 美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起&#xff0c;互联网日益成为提供信息的最佳俱渠道和逐步走向传统的流通领域&#xff0c;传统的…...

AUTOSAR关于内存栈的分层及描述

首先关于关于内存栈的分层&#xff1a;如下图所示&#xff0c;Nvm靠近RTE的&#xff1b;MemIf居中&#xff0c;EA和FEE被包含其中。 其次关于这三层的缩写&#xff1a;可以看到EEPROM的模拟和EEPROM的抽象层。 我们可以看到 大概的数据流&#xff1a; 和大致的结构分层作用&am…...

windows powershell连接linux 上传下载文件

连接&#xff1a;输入下面命令&#xff0c;回车 输入密码进入linux系统 ssh root192.168.188.128退出linux logoutwindow上传文件到Linux服务器 把桌面的123.txt 上传到linux home文件夹下 scp C:\Users\pzx\Desktop\123.txt root192.168.188.128:/homelinux下载文件到windo…...

Vue生命周期,从听说到深入理解(全面分析)

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听&#xff0c;编译模板&#xff0c;挂载实例到 DOM&#xff0c;以及在数据改变时更新 DOM。在此过程中&#xff0c;它也会运行被称为生命周期钩子的函数&#xff0c;让开发者有机会在特定阶…...

故障诊断 | 一文解决,CNN-BiLSTM卷积神经网络-双向长短期记忆神经网络组合模型的故障诊断(Matlab)

效果一览 文章概述 故障诊断 | 一文解决,CNN-BiLSTM卷积神经网络-双向长短期记忆神经网络组合模型的故障诊断(Matlab) 模型描述 CNN-BiLSTM卷积神经网络-双向长短期记忆神经网络组合模型是一种深度学习模型,结合了卷积神经网络(CNN)和双向长短期记忆网络(BiLSTM)的优点…...

iOS library not found for -lMBProgressHUD

0x00 前因 一开始是使用 CocoaPods 管理 MBProgressHUD&#xff0c;后来直接导入 MBProgressHUD 源码&#xff0c;就出现了这个错误&#xff1a;library not found for -lMBProgressHUD 0x01 后果 在 Xcode 工程目录中找到文件夹&#xff1a;Frameworks 看看里面是否有个红色…...

Paper Digest|基于在线聚类的自监督自蒸馏序列推荐模型

论文标题&#xff1a; Leave No One Behind: Online Self-Supervised Self-Distillation for Sequential Recommendation 作者姓名&#xff1a; 韦绍玮、吴郑伟、李欣、吴沁桐、张志强、周俊、顾立宏、顾进杰 组织单位&#xff1a; 蚂蚁集团 录用会议&#xff1a; WWW 2024 …...

【CTFshow 电子取证】套的签到题

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…...

SpringBoot集成Solr全文检索

SrpingBoot 集成 Solr 实现全文检索 一、核心路线 使用 Docker 镜像部署 Solr 8.11.3 版本服务使用 ik 分词器用于处理中文分词使用 spring-boot-starter-data-solr 实现增删改查配置用户名密码认证使用 poi 和 pdfbox 组件进行文本内容读取文章最上方有源码和 ik 分词器资源…...

厨余垃圾处理设备工业监控PLC连接APP小程序智能软硬件开发之功能原理篇

接着上一篇《厨余垃圾处理设备工业监控PLC连接APP小程序智能软硬件开发之功能结构篇》继续总结一下厨余垃圾处理设备智能软硬件统的原理。所有的软硬件系统全是自己一人独自开发&#xff0c;看法和角度难免有局限性。希望抛砖引玉&#xff0c;将该智能软硬件系统分享给更多有类…...

google浏览器网站不安全与网站的连接不安全怎么办?

使用google谷歌浏览器访问某些网站打开时google谷歌浏览器提示网站不安全,与网站的连接不安全,您之所以会看到此警告,是因为该网站不支持https造成的怎么办? 目录 1、打开谷歌google浏览器点击右上角【┇】找到设置...

基于Axios封装请求---防止接口重复请求解决方案

一、引言 前端接口防止重复请求的实现方案主要基于以下几个原因&#xff1a; 用户体验&#xff1a;重复发送请求可能导致页面长时间无响应或加载缓慢&#xff0c;从而影响用户的体验。特别是在网络不稳定或请求处理时间较长的情况下&#xff0c;这个问题尤为突出。 服务器压力…...

Linux内核进程创建与调度机制详解

Linux内核进程创建机制深度解析&#xff1a;从fork到进程调度1. 进程创建概述在Linux操作系统中&#xff0c;进程创建是通过fork系统调用实现的。fork系统调用会创建一个与父进程几乎完全相同的子进程&#xff0c;包括代码段、数据段、堆栈等内存空间的复制。本文将深入分析Lin…...

SAP EWM开发实战:手把手教你用ABAP OO类 /SCWM/CL_SP_PRD_INB 创建内向交货单

SAP EWM开发实战&#xff1a;基于ABAP OO类实现内向交货单自动化创建 1. 理解内向交货单创建的技术背景 在SAP扩展仓库管理(EWM)系统中&#xff0c;内向交货单(Inbound Delivery)是管理入库流程的核心凭证。与传统的SAP ERP系统不同&#xff0c;EWM模块在设计上采用了更加灵活的…...

LeagueAkari终极指南:智能游戏辅助工具快速上手与深度配置

LeagueAkari终极指南&#xff1a;智能游戏辅助工具快速上手与深度配置 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾在…...

别再傻傻分不清了!用Simulink手把手带你搞懂导纳控制与阻抗控制的本质区别

导纳控制 vs 阻抗控制&#xff1a;从理论到Simulink实战的深度解析 在机器人控制领域&#xff0c;柔性交互是一个永恒的话题。想象一下&#xff0c;当机械臂需要完成精密装配任务时&#xff0c;既要有足够的刚性保证定位精度&#xff0c;又要在意外碰撞时表现出适当的柔顺性——…...

基于单周期控制的交错并联无桥Boost PFC变换器:宽电压范围与高效率转换技术实现高效电源管理

基于单周期控制的两相交错并联无桥Boost型 PFC 变换器 采用两路 Boost PFC 交错并联实现的&#xff0c;每一路的控制方式和结构都是相同的&#xff0c;由此推出控制方法相同&#xff0c;都为单周期控制&#xff0c;所以只分析一路的结果就可以类比 1、输入电压&#xff1a;150V…...

新手福音:用快马平台生成Anaconda环境下的Python数据分析示例代码

作为一名刚接触Python数据分析的新手&#xff0c;我最近在学习Anaconda环境下的数据处理和可视化。刚开始配置环境和写代码时&#xff0c;经常被各种报错搞得手忙脚乱。后来发现了InsCode(快马)平台&#xff0c;它帮我快速生成了一个完整的示例项目&#xff0c;让我对数据分析流…...

ChatGPT文档上传安全指南:如何避免敏感信息泄露

ChatGPT文档上传安全指南&#xff1a;如何避免敏感信息泄露 在当今AI应用开发热潮中&#xff0c;将文档上传至ChatGPT等大语言模型进行内容分析、总结或问答&#xff0c;已成为提升工作效率的常见场景。然而&#xff0c;许多开发者在兴奋地集成这一强大功能时&#xff0c;往往…...

国际大牌入门之选

这些品牌是轻奢饰品界的常青树&#xff0c;设计经典&#xff0c;辨识度高&#xff0c;是很多人的入门首选。卡地亚 27%人推荐猎豹为图腾&#xff0c;工艺精湛&#xff0c;是轻奢界的经典与传奇。宝格丽 24%人推荐跃马徽记是其标志&#xff0c;珠宝设计性感矜贵&#xff0c;灵蛇…...

别再只用M法了!手把手教你用Arduino和旋转编码器实现M/T法测速(附代码)

别再只用M法了&#xff01;手把手教你用Arduino和旋转编码器实现M/T法测速&#xff08;附代码&#xff09; 在电机控制项目中&#xff0c;精确的速度测量往往是实现闭环控制的第一步。许多初学者会直接采用简单的M法&#xff08;频率测量法&#xff09;&#xff0c;但在实际测试…...

AI 创作者指南:04.AI写作:从草稿到润色的全流程协作

第4篇AI写作:从草稿到润色的全流程协作 第一部分创意引擎学完,你现在灵感满池、选题稳稳、观点锋利,是不是已经跃跃欲试想动笔了?😊 来,正式进入第二部分:AI作为写作与表达助手! 今天第4篇——AI写作:从草稿到润色的全流程协作。 咱们还是老朋友喝茶模式:AI不是让你…...