美文网首页
颜色区间设置

颜色区间设置

作者: 游民_cd31 | 来源:发表于2020-08-10 11:06 被阅读0次

实现功能:在两个色值之间设置n段,计算出每段色值是多少。

// rgb to hex
function rgbToHex(r, g, b) {
    let hex = ((r << 16) | (g << 8) | b).toString(16);
    return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;
}
// hex to rgb
function hexToRgb(hex) {
    let rgb = [];
    for (let i = 1; i < 7; i += 2) {
        rgb.push(parseInt('0x' + hex.slice(i, i + 2)));
    }
    return rgb;
}
// 计算渐变过渡色
export const gradient = function(startColor, endColor, step) {
    // 将hex转换为rgb
    let sColor = hexToRgb(startColor);
    let eColor = hexToRgb(endColor);

    // 计算R\G\B每一步的差值
    const rStep = (eColor[0] - sColor[0]) / step;
    const gStep = (eColor[1] - sColor[1]) / step;
    const bStep = (eColor[2] - sColor[2]) / step;

    let gradientColorArr = [];
    for (let i = 0; i < step; i++) {
        // 计算每一步的hex值
        gradientColorArr.push(
            rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2]))
        );
    }
    return gradientColorArr;
};

来源知乎用户:我爱你如鲸向海
侵删

相关文章

  • 颜色区间设置

    实现功能:在两个色值之间设置n段,计算出每段色值是多少。 来源知乎用户:我爱你如鲸向海侵删

  • iOS 屏幕亮度设置

    [[UIScreen mainScreen] setBrightness:1]; brightness 设置值区间...

  • 合并区间 + 颜色分类

    合并区间[https://leetcode-cn.com/problems/merge-intervals/] 重...

  • Swift开发技巧:UIColor

    整数RGB设置颜色 16进制设置颜色 字符串设置颜色 整个封装 应用

  • 改变图片颜色

    xml设置图片颜色 代码设置图片颜色

  • html、css学习笔记(六)

    颜色设置:有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置...

  • 设置颜色

    此处以文本框为例,还可用于窗体,按钮和标签。 颜色属性分为前景色和背景色。 前景色:TextBox1.ForeCo...

  • 颜色设置

    1、不想每次都除255.0 + (UIColor *)colorWithR:(CGFloat)red G:(CGF...

  • Swift-导航栏navigation

    设置title及title的颜色 设置导航栏颜色 设置navigation的titleView 设置navagat...

  • 淘宝区间价格设置

    发布宝贝时如何设置区间价格 发布成功后显示的价格如图所示:

网友评论

      本文标题:颜色区间设置

      本文链接:https://www.haomeiwen.com/subject/xawddktx.html