当前位置: 首页 > 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)
http://www.lryc.cn/news/327934.html

相关文章:

  • Unity 窗口化设置
  • Android14之深入理解sp模板类(二百零二)
  • .NET core 5.0 及以上的Windows Service开发
  • Nginx配置文件解释
  • R语言赋值符号<-、=、->、<<-、->>的使用与区别
  • ffmpeg重点之时间戳,PTS、DTS、time_base
  • OpenGL 实现“人像背景虚化“效果
  • 基于springboot实现校园周边美食探索及分享平台系统项目【项目源码+论文说明】计算机毕业设计
  • AUTOSAR关于内存栈的分层及描述
  • windows powershell连接linux 上传下载文件
  • Vue生命周期,从听说到深入理解(全面分析)
  • 故障诊断 | 一文解决,CNN-BiLSTM卷积神经网络-双向长短期记忆神经网络组合模型的故障诊断(Matlab)
  • iOS library not found for -lMBProgressHUD
  • Paper Digest|基于在线聚类的自监督自蒸馏序列推荐模型
  • 【CTFshow 电子取证】套的签到题
  • SpringBoot集成Solr全文检索
  • 厨余垃圾处理设备工业监控PLC连接APP小程序智能软硬件开发之功能原理篇
  • google浏览器网站不安全与网站的连接不安全怎么办?
  • 基于Axios封装请求---防止接口重复请求解决方案
  • 深入理解指针(7)函数指针变量及函数数组(文章最后放置本文所有原码)
  • office办公技能|word中的常见使用问题解决方案2.0
  • 华为2023年年度报告启示:大学生如何把握未来科技趋势,规划个人发展路径
  • 刚刚,璞华科技、璞华易研PLM产品荣获智能制造领域两大奖项!
  • 乐维更改IP地址
  • 大话设计模式之简单工厂模式
  • 设计模式之单例模式精讲
  • 论文复现3:Stable Diffusion v1
  • Halcon与VisionMaster对比
  • 多线程的学习1
  • 警务数据仓库的实现