|
|
|
@ -1,53 +1,51 @@
|
|
|
|
|
import { parseInt, parseFloat, isNull, isKey } from "../2.base"; |
|
|
|
|
import * as DOMUtils from "../platform/web/dom"; |
|
|
|
|
|
|
|
|
|
export const DOM = { |
|
|
|
|
isColor(color) { |
|
|
|
|
return color && (this.isRGBColor(color) || this.isHexColor(color)); |
|
|
|
|
}, |
|
|
|
|
export function isColor(color) { |
|
|
|
|
return color && (isRGBColor(color) || isHexColor(color)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
isRGBColor(color) { |
|
|
|
|
export function isRGBColor(color) { |
|
|
|
|
if (!color) { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return color.substr(0, 3) === "rgb"; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
isHexColor(color) { |
|
|
|
|
export function isHexColor(color) { |
|
|
|
|
if (!color) { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return color[0] === "#" && color.length === 7; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
isDarkColor(hex) { |
|
|
|
|
if (!hex || !this.isHexColor(hex)) { |
|
|
|
|
export function isDarkColor(hex) { |
|
|
|
|
if (!hex || !isHexColor(hex)) { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
const rgb = this.rgb2json(this.hex2rgb(hex)); |
|
|
|
|
const rgb = rgb2json(hex2rgb(hex)); |
|
|
|
|
const grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); |
|
|
|
|
if (grayLevel < 192/** 网上给的是140**/) { |
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return false; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 获取对比颜色
|
|
|
|
|
getContrastColor(color) { |
|
|
|
|
if (!color || !this.isColor(color)) { |
|
|
|
|
// 获取对比颜色
|
|
|
|
|
export function getContrastColor(color) { |
|
|
|
|
if (!color || !isColor(color)) { |
|
|
|
|
return ""; |
|
|
|
|
} |
|
|
|
|
if (this.isDarkColor(color)) { |
|
|
|
|
if (isDarkColor(color)) { |
|
|
|
|
return "#FFFFFF"; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return "#3D4D66"; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
rgb2hex(rgbColour) { |
|
|
|
|
export function rgb2hex(rgbColour) { |
|
|
|
|
if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { |
|
|
|
|
return ""; |
|
|
|
|
} |
|
|
|
@ -56,31 +54,33 @@ export const DOM = {
|
|
|
|
|
const green = parseInt(rgbValues[1]); |
|
|
|
|
const blue = parseInt(rgbValues[2]); |
|
|
|
|
|
|
|
|
|
const hexColour = `#${this.int2hex(red)}${this.int2hex(green)}${this.int2hex(blue)}`; |
|
|
|
|
const hexColour = `#${int2hex(red)}${int2hex(green)}${int2hex(blue)}`; |
|
|
|
|
|
|
|
|
|
return hexColour; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_hue2rgb(m1, m2, h) { |
|
|
|
|
function _hue2rgb(m1, m2, h) { |
|
|
|
|
h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
|
|
|
|
if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
|
|
|
|
if (h * 2 < 1) return m2; |
|
|
|
|
if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
|
|
|
|
|
|
|
|
|
return m1; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
hsl2rgb(hsl) { |
|
|
|
|
export function hsl2rgb(hsl) { |
|
|
|
|
const h = hsl[0], s = hsl[1], l = hsl[2]; |
|
|
|
|
const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; |
|
|
|
|
const m1 = l * 2 - m2; |
|
|
|
|
|
|
|
|
|
return [this._hue2rgb(m1, m2, h + 0.33333), |
|
|
|
|
this._hue2rgb(m1, m2, h), |
|
|
|
|
this._hue2rgb(m1, m2, h - 0.33333)]; |
|
|
|
|
}, |
|
|
|
|
return [ |
|
|
|
|
_hue2rgb(m1, m2, h + 0.33333), |
|
|
|
|
_hue2rgb(m1, m2, h), |
|
|
|
|
_hue2rgb(m1, m2, h - 0.33333) |
|
|
|
|
]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
rgb2hsl(rgb) { |
|
|
|
|
export function rgb2hsl(rgb) { |
|
|
|
|
let h, s; |
|
|
|
|
const r = rgb[0], g = rgb[1], b = rgb[2]; |
|
|
|
|
const min = Math.min(r, Math.min(g, b)); |
|
|
|
@ -100,13 +100,13 @@ export const DOM = {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return [h, s, l]; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
rgb2json(rgbColour) { |
|
|
|
|
export function rgb2json(rgbColour) { |
|
|
|
|
if (!rgbColour) { |
|
|
|
|
return {}; |
|
|
|
|
} |
|
|
|
|
if (!this.isRGBColor(rgbColour)) { |
|
|
|
|
if (!isRGBColor(rgbColour)) { |
|
|
|
|
return {}; |
|
|
|
|
} |
|
|
|
|
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
|
|
|
@ -116,9 +116,9 @@ export const DOM = {
|
|
|
|
|
g: parseInt(rgbValues[1]), |
|
|
|
|
b: parseInt(rgbValues[2]), |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
rgba2json(rgbColour) { |
|
|
|
|
export function rgba2json(rgbColour) { |
|
|
|
|
if (!rgbColour) { |
|
|
|
|
return {}; |
|
|
|
|
} |
|
|
|
@ -130,56 +130,60 @@ export const DOM = {
|
|
|
|
|
b: parseInt(rgbValues[2]), |
|
|
|
|
a: parseFloat(rgbValues[3]), |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
json2rgb(rgb) { |
|
|
|
|
export function json2rgb(rgb) { |
|
|
|
|
if (!isKey(rgb.r) || !isKey(rgb.g) || !isKey(rgb.b)) { |
|
|
|
|
return ""; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return `rgb(${rgb.r},${rgb.g},${rgb.b})`; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
json2rgba(rgba) { |
|
|
|
|
export function json2rgba(rgba) { |
|
|
|
|
if (!isKey(rgba.r) || !isKey(rgba.g) || !isKey(rgba.b)) { |
|
|
|
|
return ""; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
int2hex(strNum) { |
|
|
|
|
export function int2hex(strNum) { |
|
|
|
|
const hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; |
|
|
|
|
|
|
|
|
|
return `${hexdig[strNum >>> 4]}${hexdig[strNum & 15]}`; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
hex2rgb(color) { |
|
|
|
|
export function hex2rgb(color) { |
|
|
|
|
if (!color) { |
|
|
|
|
return ""; |
|
|
|
|
} |
|
|
|
|
if (!this.isHexColor(color)) { |
|
|
|
|
if (!isHexColor(color)) { |
|
|
|
|
return color; |
|
|
|
|
} |
|
|
|
|
let tempValue = "rgb(", colorArray; |
|
|
|
|
|
|
|
|
|
if (color.length === 7) { |
|
|
|
|
colorArray = [parseInt(`0x${color.substring(1, 3)}`), |
|
|
|
|
colorArray = [ |
|
|
|
|
parseInt(`0x${color.substring(1, 3)}`), |
|
|
|
|
parseInt(`0x${color.substring(3, 5)}`), |
|
|
|
|
parseInt(`0x${color.substring(5, 7)}`)]; |
|
|
|
|
parseInt(`0x${color.substring(5, 7)}`) |
|
|
|
|
]; |
|
|
|
|
} else if (color.length === 4) { |
|
|
|
|
colorArray = [parseInt(`0x${color.substring(1, 2)}`), |
|
|
|
|
colorArray = [ |
|
|
|
|
parseInt(`0x${color.substring(1, 2)}`), |
|
|
|
|
parseInt(`0x${color.substring(2, 3)}`), |
|
|
|
|
parseInt(`0x${color.substring(3, 4)}`)]; |
|
|
|
|
parseInt(`0x${color.substring(3, 4)}`) |
|
|
|
|
]; |
|
|
|
|
} |
|
|
|
|
tempValue += `${colorArray[0]},`; |
|
|
|
|
tempValue += `${colorArray[1]},`; |
|
|
|
|
tempValue += `${colorArray[2]})`; |
|
|
|
|
|
|
|
|
|
return tempValue; |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
rgba2rgb(rgbColor, bgColor) { |
|
|
|
|
export function rgba2rgb(rgbColor, bgColor) { |
|
|
|
|
if (isNull(bgColor)) { |
|
|
|
|
bgColor = 1; |
|
|
|
|
} |
|
|
|
@ -198,7 +202,5 @@ export const DOM = {
|
|
|
|
|
return `rgb(${Math.floor(255 * (bgColor * (1 - A)) + R * A)},${ |
|
|
|
|
Math.floor(255 * (bgColor * (1 - A)) + G * A)},${ |
|
|
|
|
Math.floor(255 * (bgColor * (1 - A)) + B * A)})`;
|
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
...DOMUtils, |
|
|
|
|
}; |
|
|
|
|