颜色区间值转换：根据两个起止颜色，进行渐变色生成（我的成长之路No.8）

1.需求：根据页面选色板（选色板用的input type = color），选中起止颜色，并根据表格条目数，进行等分生成区间颜色，并赋值给表格固定属性。

1）功能初始：既功能实现前页面展示样式

2）功能实现：既进行相关操作后页面所呈现的样式

2.HTML页面代码

<div nz-row class="box-location">
    <div nz-col nzSpan="24">
        <nz-form-item>
            <nz-form-label nzSpan="">颜色配置：</nz-form-label>
            <nz-form-control nzSpan="19" class="color-layout-group" >
                <div class="color-layout-box">
                    <input class="color-input" type="text" nz-input placeholder="请输入" [(ngModel)]="colorLayoutStart" >
                    <input type="color" class="color-layout-input" [(ngModel)]="colorLayoutStart" >
                </div>
                <span class="color-span">——</span>
                <div class="color-layout-box">
                    <input class="color-input" type="text" nz-input placeholder="请输入" [(ngModel)]="colorLayoutEnd">
                    <input type="color" class="color-layout-input" [(ngModel)]="colorLayoutEnd" (change)="onEndColorSelectedChange()">
                </div>
            </nz-form-control>
        </nz-form-item>
    </div>
</div>
<div nz-row class="box-location">
    <div nz-col nzSpan="24">
        <nz-form-item>
            <nz-form-control nzSpan="24">
                <nz-table #basicTable [nzData]="listOfRevampData" nzTableLayout="fixed" [nzPageSize]="listOfRevampData.length" [nzFrontPagination]="false" [nzShowPagination]="false" nzSize="small" class="table table-overflow-y layer-deploy-list" [nzScroll]="{ y:'1px' }">
                    <thead>
                        <tr>
                        <th>参数名</th>
                        <th>填充额</th>
                        <th>填充透明</th>
                        <th>边界颜色</th>
                        <th>边界粗细</th>
                        <th>边界透明</th>
                        </tr>
                    </thead>
                    <tbody class="layer-table-body">
                        <tr *ngFor="let data of basicTable.data">
                            <td nzEllipsis>{{ data.id }}</td>
                            <td nzEllipsis>
                                <div class="editable-cell" [hidden]="editId === data.id" (click)="startEdit(data.id)">
                                    {{ data.fileColor }}
                                </div>
                                <input [hidden]="editId !== data.id" type="text" nz-input [(ngModel)]="data.fileColor" />
                            </td>
                            <td nzEllipsis>
                                <div class="editable-cell" [hidden]="editId === data.id" (click)="startEdit(data.id)">
                                    {{ data.fillOpacity }}
                                </div>
                                <input [hidden]="editId !== data.id" type="text" nz-input [(ngModel)]="data.fillOpacity" />
                            </td>
                            <td nzEllipsis>
                                <div class="editable-cell" [hidden]="editId === data.id" (click)="startEdit(data.id)">
                                    {{ data.borderColor }}
                                </div>
                                <input [hidden]="editId !== data.id" type="text" nz-input [(ngModel)]="data.borderColor"  />
                            </td>
                            <td nzEllipsis>
                                <div class="editable-cell" [hidden]="editId === data.id" (click)="startEdit(data.id)">
                                    {{ data.borderThickness }}
                                </div>
                                <input [hidden]="editId !== data.id" type="text" nz-input [(ngModel)]="data.borderThickness" />
                            </td>
                            <td nzEllipsis>
                                <div class="editable-cell" [hidden]="editId === data.id" (click)="startEdit(data.id)">
                                    {{ data.borderOpacity }}
                                </div>
                                <input [hidden]="editId !== data.id" type="text" nz-input [(ngModel)]="data.borderOpacity" (blur)="stopEdit(data)" />
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </nz-form-control>
        </nz-form-item>
    </div>
</div>

 3.CSS样式代码

.color-layout-group {
    display: flex; 
    justify-content: flex-start;
    .color-layout-box {
        flex: 43%; 
        display: flex; 
        justify-content: space-between;
        .color-input {
            width: 73%;
        }
        .color-layout-input {
            width: 25%;
            height: 30px;
            padding: 0;
            appearance: auto;
            border-image: none;
            background-color: transparent;
            border-style: solid;
            border-bottom-width: 0px;
            border-top-width: 0px;
            border-left-width: 0px;
            border-right-width: 0px;
        }
    }
    .color-span {
        display: inline-block;
        width: 14%;
        text-align: center;
        line-height: 30px;
        color: #B0B0B0;
    }
}
// 修改 鼠标经过样式
.editable-cell, input[type = color] {
    cursor: pointer;
}

 4.TS/JS代码

colorLayoutStart: any = '';
colorLayoutEnd: any = '';
this.listOfRevampData = JSON.parse(JSON.stringify(this.key)) // 弹出层传值KEY

// 颜色结束值选择完成后回调
    onEndColorSelectedChange() {
      if (this.colorLayoutStart == '') {
        this.message.error('开始颜色不能为空！！！');
        return
      }
      for (let i = 0; i < this.listOfRevampData.length; i++) {
        this.listOfRevampData[i].fileColor = this.gradientColors(this.colorLayoutStart,this.colorLayoutEnd,this.listOfRevampData.length)[i]
      }
      console.log(this.comparisonData(this.key,this.listOfRevampData));
    };

// 分解颜色值
    parseColor(hexStr: any) {
      /** 
        *substr(1) 返字符串回去除第一位保留部分
        *split('') 解析字符串返回字符串数组
        *0x11 十六进制标识
        *parseInt(字符串, 解析数字的基数（2~36）) 解析字符串返回整数
      **/
      return hexStr.length === 4 ? hexStr.substr(1).split('').map((s: any) => { return 0x11 * parseInt(s, 16); }) : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map((s: any) => { return parseInt(s, 16); })
    };

    // 填充
    pad(s: any) {
      return (s.length === 1) ? '0' + s : s;
    };

    // 颜色渐变值
    gradientColors(start: any, end: any, steps: any = 0, gamma: any = 1) { 
      /**
       *start 颜色开始值
      *end 颜色结束值
      *steps 分割次数
      *gamma 伽马值（透明度 0-1）
      **/
      let ms: any, me: any, output: any = [] , so: any = [];
      let normalize: any = (channel: any) => {
        return Math.pow(channel / 255,gamma);
      };
      start = this.parseColor(start).map(normalize); 
      end = this.parseColor(end).map(normalize); 
      for (let i = 0; i < steps; i++) {
        ms = i / (steps - 1);
        me = 1 - ms;
        for (let j = 0; j < 3; j++) {
          so[j] = this.pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16))
        }
        output.push('#' + so.join(''));
      }
      return output;
    };

    // 对比数据（判断两个数组中的值是否相等）
    comparisonData(array1: any,array2: any): any {
      let comparativeResult: boolean = true;
      if (array1.length == array2.length) {
        for (let i = 0; i < array2.length; i++) {
          if (array1[i].fileColor == array2[i].fileColor) {
            continue;
          } else {
            comparativeResult = false;
            break;
          }
        }
      } else {
        comparativeResult = false;
      }
      return comparativeResult
    };

以上为本次笔记全部内容，方便后期业务需求进行调阅。