/**
* 求两个颜色之间的渐变值
* @param {string} startColor 开始的颜色
* @param {string} endColor 结束的颜色
* @param {number} step 颜色等分的份额
* */
function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
let startRGB = hexToRgb(startColor, false)
let startR = startRGB[0]
let startG = startRGB[1]
let startB = startRGB[2]
let endRGB = hexToRgb(endColor, false)
let endR = endRGB[0]
let endG = endRGB[1]
let endB = endRGB[2]
let sR = (endR - startR) / step
let sG = (endG - startG) / step
let sB = (endB - startB) / step
let colorArr = []
for (let i = 0
//计算每一步的hex值
let hex = rgbToHex('rgb(' + Math.round((sR * i + startR)) + ',' + Math.round((sG * i + startG)) + ',' + Math.round((sB *
i + startB)) + ')')
colorArr.push(hex)
}
return colorArr
}
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
function hexToRgb(sColor, str = true) {
let reg = /^
sColor = sColor.toLowerCase()
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
let sColorNew = "#"
for (let i = 1
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
}
sColor = sColorNew
}
//处理六位的颜色值
let sColorChange = []
for (let i = 1
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)))
}
if(!str) {
return sColorChange
} else {
return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`
}
} else if (/^(rgb|RGB)/.test(sColor)) {
let arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",")
return arr.map(val => Number(val))
} else {
return sColor
}
}
// 将rgb表示方式转换为hex表示方式
function rgbToHex(rgb) {
let _this = rgb
let reg = /^
if (/^(rgb|RGB)/.test(_this)) {
let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",")
let strHex = "#"
for (let i = 0
let hex = Number(aColor[i]).toString(16)
hex = String(hex).length == 1 ? 0 + '' + hex : hex
if (hex === "0") {
hex += hex
}
strHex += hex
}
if (strHex.length !== 7) {
strHex = _this
}
return strHex
} else if (reg.test(_this)) {
let aNum = _this.replace(/
if (aNum.length === 6) {
return _this
} else if (aNum.length === 3) {
let numHex = "#"
for (let i = 0
numHex += (aNum[i] + aNum[i])
}
return numHex
}
} else {
return _this
}
}
/**
* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba(255,255,255,0.5)字符串
* sHex为传入的十六进制的色值
* alpha为rgba的透明度
*/
function colorToRgba(color, alpha = 0.3) {
color = rgbToHex(color)
// 十六进制颜色值的正则表达式
var reg = /^
/* 16进制颜色转为RGB格式 */
let sColor = color.toLowerCase()
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = '#'
for (let i = 1
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
}
sColor = sColorNew
}
// 处理六位的颜色值
var sColorChange = []
for (let i = 1
sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
}
// return sColorChange.join(',')
return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
}
else {
return sColor
}
}
export default {
colorGradient,
hexToRgb,
rgbToHex,
colorToRgba
}