@搁浅被注册了7年前
最近一段时间在折腾一个微信在线编辑器的项目,使用 UEditor 进行二次开发。
关于 UEditor 的定制,用到的都太粗浅,官方文档上都能找得到。主题使用的样式表是 ueditor.css 而不是ueditor.min.css,定制主题要注意这一点。而对整个项目来讲,感觉难度最大的,应该是素材换色的功能。
牵扯到 RGB 颜色 和 HEX 颜色的互转这都还好说,毕竟只是进制转换的算法问题。
网上找到了 张鑫旭 大神以前写的代码,改了bug 稍微改写了一下。
// HEX 颜色正则 var hexReg = /^\#([0-9a-f]{3}|[0-9a-f]{6})$/gi; // RGB 转 HEX String.prototype.colorHex = function () { var that = this; if (/^(rgb|RGB)/.test(that)) { var aColor = that.replace(/(?:\(|\)|rgb)*/gi,'').split(','); var strHex = '#'; for (var i = 0; i < aColor.length; i++) { var hex = Number(aColor[i]).toString(16); hex = hex.length == 1 ? "0" + hex : hex strHex += hex } return strHex.toUpperCase(); } else if (hexReg.test(that)) { var aNum = that.replace(/#/, '').split(''); if (aNum.length === 6) { return that.toUpperCase(); } else if (aNum.length === 3) { var numHex = '#'; for (var i = 0; i < aNum.length; i += 1) { numHex += (aNum[i] + aNum[i]) } return numHex.toUpperCase(); } } } // HEX 转 RGB String.prototype.colorRgb = function () { var sColor = this.toLowerCase(); if (sColor && hexReg.test(sColor)) { if (sColor.length === 4) { var sColorNew = '#'; for (var i = 1; i < 4; i += 1) { sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)); } sColor = sColorNew } //处理六位的颜色值 var sColorChange = []; for (var i = 1; i < 7; i += 2) { sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2))) } return 'rgb(' + sColorChange.join(', ') + ')'; } else { return sColor; } }
关于色彩空间中的HSL、HSV、HSB
概念问题我就不说太多了,HSB 与 HSV 是同一个概念,只是叫法不同。PhotoShop 的调色板里看到的就是HSB颜色模型。
在 CSS 中,使用的是 HSL 颜色模型,这个对前端来说才是我们最关心的。
两个模型中,H (Hue) 都是色相的意思,取值范围为 0 – 360 指的是圆心角,每个角度代表一种颜色;
S (Saturation) 代表饱和度,但在两种模型中两个饱和度的定义并不一样,但可以相互转换,取值范围都是 0 – 1 (在 CSS 中,要写成百分数形式 ;
在 HSL 颜色模型中,L (Lightness) 代表 亮度,是作为“白的量”来理解的;
而在 HSB 模型中,B (Brightness) 指的是 明度,被认为是“光的量”,可以是任何颜色。
拓展阅读请戳这里:HSL和HSV色彩空间
下面的代码统一用原型链改写了一下,RGB 颜色 与 HSL 颜色的相互转换。
// HSL 颜色正则 var hslReg = /^hsl\(.+?\)$/gi; // RGB 转 HSL String.prototype.rgb2Hsl = function () { var c = this.colorHex(); var r = parseInt(c.substring(1, 3), 16) / 255; var g = parseInt(c.substring(3, 5), 16) / 255; var b = parseInt(c.substring(5, 7), 16) / 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } h = Math.round(h * 360) s = Math.round(s * 100) l = Math.round(l * 100) return 'hsl(' + h + ', ' + s + '%, ' + l +'%)'; } // HSL 转 RGB String.prototype.hsl2Rgb = function () { var r, g, b; var o = this.replace(/hsl\(|\)|\s/gi, '').split(','); h = parseInt(o[0]) / 360; s = parseInt(o[1]) / 100; l = parseInt(o[2]) / 100; if (hslReg.test(this)) { if (s == 0) { r = g = b = l; // achromatic } else { var hue2rgb = function hue2rgb(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } return 'rgb(' + Math.round(r * 255) + ', ' + Math.round(g * 255) + ', ' + Math.round(b * 255) + ')'; }
END.
关于 RGB,HEX,HSL 颜色相互转换
-
Unknown
Unknown
-
Unknown
Unknown
我觉得RGB转HEX的部分,可以用阮一峰写的左移运算符运算色值
// RGB to HEX
var rgb2hex = function(r, g, b) {
return ‘#’ + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).substr(1);
}
我有做一个颜色毒 转的网页,也可以下到你们本地用,随便做的,还请指点 。。http://ktangel.github.io/rgb2hex.html