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