function getConversionedColor(StartColor, endColor, conversionProportion){
startRGB = colorRgb(formateColor(StartColor));
startR = startRGB[0];
startG = startRGB[1];
startB = startRGB[2];
endRGB = colorRgb(formateColor(endColor));
endR = endRGB[0];
endG = endRGB[1];
endB = endRGB[2];
conversionProportion = formateConversionProportion(conversionProportion);
sR = startR + ((endR-startR) * conversionProportion);//总差值
sG = startG + ((endG-startG) * conversionProportion);
sB = startB + ((endB-startB) * conversionProportion);
return colorHex('rgb('+parseInt((sR))+','+parseInt((sG))+','+parseInt((sB))+')');;
}
function formateConversionProportion(conversionProportion) {
let result = Number(conversionProportion);
if(result.isNaN || result < 0 ){
result = 0;
}else if(result > 1){
result = 1;
}
return result;
}
function formateColor(color){
let myColor = String(color).replace("#", "");
if(isEmptyString(myColor) || myColor.length < 6 || myColor.length > 8){
myColor = "ffffff"
} else {
myColor = myColor.substring(myColor.length - 6, myColor.length);
}
return "#" + myColor;
}
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
function colorRgb(sColor){
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
let myColor = sColor.toLowerCase();
if(myColor && reg.test(myColor)){
if(myColor.length === 4){
var sColorNew = "#";
for(var i=1; i<4; i+=1){
sColorNew += myColor.slice(i,i+1).concat(myColor.slice(i,i+1));
}
myColor = sColorNew;
}
//处理六位的颜色值
let sColorChange = [];
for(var i=1; i<7; i+=2){
sColorChange.push(parseInt("0x"+myColor.slice(i,i+2)));
}
return sColorChange;
}else{
return myColor;
}
}
// 将rgb表示方式转换为hex表示方式
function colorHex(rgb){
let myRgb = rgb;
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if(/^(rgb|RGB)/.test(myRgb)){
let aColor = myRgb.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");
let strHex = "#";
for(let i=0; i<aColor.length; i++){
let hex = Number(aColor[i]).toString(16);
hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位
if(hex === "0"){
hex += hex;
}
strHex += hex;
}
if(strHex.length !== 7){
strHex = myRgb;
}
return strHex;
}else if(reg.test(myRgb)){
let aNum = myRgb.replace(/#/,"").split("");
if(aNum.length === 6){
return myRgb;
}else if(aNum.length === 3){
let numHex = "#";
for(let i=0; i<aNum.length; i+=1){
numHex += (aNum[i]+aNum[i]);
}
return numHex;
}
}else{
return myRgb;
}
}
分享到:
相关推荐
提取图片颜色生成背景渐变js代码是一款通过提取图片的两种主要颜色,然后使用这两种颜色为渐变的开始和结束颜色,应用在图片容器上。
转载自http://blog.csdn.net/u010593680/article/details/50987671,最近要搞颜色选择,找到方法因为没有demo随便弄一下,方便大家学习
android 界面 渐变背景颜色 构建完美的界面
主要介绍了C#实现winform渐变效果的方法,涉及到窗体的设计与属性的修改等技巧,需要的朋友可以参考下
颜色变化过程: 蓝 (0,0,255) 青(0,255,255) 绿(0,255,0) 黄(255,255,0) 红(255,0,0) 函数最大值对应红色,最小值对应蓝色,返回当前值对应的颜色
资源内容:透过鼠标获取多边形顶点绘制多边形,通过预先设定好的个顶点颜色,实现过度填充 语言:C++ 运行环境:Visual Studio 2013/更高版本
viewpager的使用非常的方便,不过我在使用的时候遇到一个问题,就是切换view的时候通过获取到pagerchange然后调用animation来实现北京渐变的效果不明显,最后通过调试发现viewpager已经为我们提供了相应的方法,不过...
易语言GDI多色渐变源码,GDI多色渐变,取指针,置指针,方法_置指针,new,delete,销毁,创建自窗口句柄,创建自DC,创建自图像,获取DC,释放DC,取混合模式,置混合模式,取渲染原点,置渲染原点,取混合品质,置混合品质,置平滑...
三段代码整合到一起,图片部分获取形成动画,整体颜色渐变,图片特效显示,百叶窗
本Demo使用Qt开发,获取分辨率大小,自适应测试整个屏幕,支持64阶灰阶、64阶棋盘、渐变背景颜色切换。
圆形进度条 渐变色,可以自定义,可根据服务器获取数据改变颜色
android 自定义button 支持颜色,圆角,可以简单实现button颜色,圆角
主要介绍了C#实现改变DataGrid某一行和单元格颜色的方法,主要涉及DataGrid控件的添加与使用、数据源的绑定、单元格与行的获取等操作。需要的朋友可以参考下
Swift获取三种渐变色的某一点的颜色,方法已封装,可以传入某一点的值,以及渐变色的三种颜色,直接获取到该渐变色在某一点的颜色 在colorTools中封装两个方法 1, 10进制运算,返回String类型的颜色字符串 2, 16进制...
易语言GDI预设颜色源码,GDI预设颜色,取指针,置指针,方法_置指针,new,delete,销毁,创建自窗口句柄,创建自DC,创建自图像,获取DC,释放DC,取混合模式,置混合模式,取渲染原点,置渲染原点,取混合品质,置混合品质,置平滑...
共支持148个单词,数据来源V1.2.3 2021/03/29本次更新功能点修复bug,点击渐变色色块,不拖拽就触发change事件V1.2.3 2021/03/17本次更新功能点colorpicker实例挂载到dom元素上如:获取页面所有选择器的当前颜色$("....
填充矩形 随机画矩形 鼠标绘图 色彩变换矩阵 全局变形图形 漂亮的C#登录窗口(动画效果) 路径 另存为 绘制颜色渐变图形 绘制线条 绘制椭圆 绘制扇形 绘制抛物线 绘制矩形 绘制弧线 绘制多边形和折线 ...
本案例教会大家,如何获取已登录QQ用户的好友列表以及使用权限。涉及到ClientKey的漏洞利用和空间g_tk的算法,以及一些QQ接口的运用。 功能: 1.获取本机已登录QQ(QQ号,QQ名称,万能密钥Key)。 2.获取已登录QQ的...
制作网页时,可使用此软件! 3.1 增加了拖动获取颜色方式 增加真色彩颜色条 增加可输入式的反查颜色代码功能 增加"开始"和"添加到收藏夹"热键 修正了一些Bug 增加了"正式用户码"的确认
一:先制作一个不带颜色渐变的进度条 自定义一个cycleView,在.m 中实现drawRect方法 - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext();//获取上下文 CGPoint center = ...