修改颜色区分，只能加黑灰白

src/page/index/colorSort/index.vue

@@ -51,7 +51,7 @@
 		</div>
 		<div class="btn-groups">
 			<!-- <div class="btn" @click="sortColor">颜色归类</div> -->
-
+			<div class="first">	
 				<div class="p">根据Hue色调分组</div>
 				<div class="ios-checkbox">
 					<input
@@ -65,7 +65,9 @@
 					/>
 					<label for="ios-checkbox" class="emulate-ios-button"></label>
 				</div>
-			<div class="p">根据固定颜色分组</div>
+			</div>
+			
+			<!-- <div class="p">根据固定颜色分组</div>
 			<div class="ios-checkbox">
 				<input
 					type="checkbox"
@@ -77,7 +79,7 @@
 					hidden
 				/>
 				<label for="ios-checkbox2" class="emulate-ios-button"></label>
-			</div>
+			</div> -->
 			<div
 				class="btn"
 				@click="sortColorSaturation"
@@ -122,7 +124,8 @@ export default {
 			active2: false,
 			hlsColorArr: [],
 			clustersColorArr: [],
-			newColorArr: [[], [], [], [], [], [], [], [], [], [], [], []],
+			newColorArr: [[], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
+			// 1-12 对应 hue 每30度  | 13 - 黑 | 14 - 白 | 15 - 灰
 			clusters: [
 				//指定颜色分类
 				{ name: "red", leadColor: [255, 0, 0], colors: [] },
@@ -195,9 +198,10 @@ export default {
 					x: 0,
 				});
 				gsap.to([this.$refs.btn1, this.$refs.btn2], { autoAlpha: 1 });
-				gsap.to(this.$refs.showColor, { autoAlpha: 0 });
+				// gsap.to(this.$refs.showColor, { autoAlpha: 0 });
 			}
 		},
+		// 显示隐藏分组2
 		showGroup2(index) {
 			let target = this.$refs.clusterCon;
 			gsap.to(target, {
@@ -241,19 +245,28 @@ export default {
 			//根据hue分组
 			this.sortColorByHue();
 			// 按照预定颜色分组
-			this.sortColorByClusters();
+			// this.sortColorByClusters();
 		},
 		// 按照色环分组
 		sortColorByHue() {
 			this.hlsColorArr.forEach((item, index) => {
 				if (item.h) {
 					let _index = 11 - Math.floor((item.h * 360) / 30); //将360度色盘区分为12个维度
-					// let _index = Math.floor(
+					// 灰
-					// 	(item.h * item.hsl[1] * item.hsl[2]) / 20
+					if (
-					// );
+						// 当饱和度为0时
-					// if (_index > 11) {
+						item.s <= 0.15 && item.l <= 0.75 && item.l >= 0.2
-					// 	_index = 11;
+					) {
-					// }
+						_index = 14;
+					}
+					// 黑色
+					if (item.l < 0.2 && item.s < 0.18) {
+						_index = 12;
+					}
+					// 白色
+					if (item.l > 0.75 && item.s < 0.15) {
+						_index = 13;
+					}
 					this.newColorArr[_index].push(item);
 				}
 			});
@@ -296,11 +309,18 @@ export default {
 			if (this.hideOrigin) {
 				// 分组
 				this.newColorArr.forEach((item, index) => {
+					// item = this.sortColor(item);
+					// console.log(item)
 					item.sort((a, b) => {
+					// 	let deltaH = b.h - a.h;
+					// 	let deltaS = b.s - a.s;
+						let deltaL = b.l - a.l;
+					// 	let aRgb = colorUtil.hsl.to.rgb({h: a.h, s: a.s, l: a.l, a: 1});
+					// 	let bRgb = colorUtil.hsl.to.rgb({h: b.h, s: b.s, l: b.l, a: 1});
+					// 	let distance = this.colorDistance(aRgb,bRgb);
 						return (
-							b.l - a.l
+							// Math.random() > 0.5 ? 1 : -1
-							// b.hsl[0] * b.hsl[1] * b.hsl[2] -
+							deltaL
-							// a.hsl[0] * a.hsl[1] * a.hsl[2]
 						);
 					});
 				});
@@ -315,10 +335,10 @@ export default {
 		// 计算颜色距离
 		colorDistance(color1, color2) {
 			const x =
-				Math.pow(color1[0] - color2[0], 2) +
+				Math.pow(color1.r - color2.r, 2) +
-				Math.pow(color1[1] - color2[1], 2) +
+				Math.pow(color1.g - color2.g, 2) +
-				Math.pow(color1[2] - color2[2], 2);
+				Math.pow(color1.b - color2.b, 2);
-			return Math.sqrt(x);
+			return x;  //Math.sqrt(x)
 		},
 		// 一维排序
 		oneDimensionSorting(colors, dim) {
@@ -385,6 +405,55 @@ export default {
 
 			return this.clusters;
 		},
+		sortColor(colors){
+			// Calculate distance between each color
+			var distances = [];
+			for (var i = 0; i < colors.length; i++) {
+				distances[i] = [];
+				for (var j = 0; j < i; j++){
+						let aRgb = colorUtil.hsl.to.rgb({h: colors[i].h, s: colors[i].s, l: colors[i].l, a: 1});
+						let bRgb = colorUtil.hsl.to.rgb({h: colors[j].h, s: colors[j].s, l: colors[j].l, a: 1});
+					distances.push([colors[i], colors[j], this.colorDistance(aRgb, bRgb)]);
+				}
+			}
+			distances.sort(function(a, b) {
+				return a[2] - b[2];
+			});
+
+			// Put each color into separate cluster initially
+			var colorToCluster = {};
+			for (var i = 0; i < colors.length; i++)
+				colorToCluster[colors[i]] = [colors[i]];
+
+			// Merge clusters, starting with lowest distances
+			var lastCluster=[];
+			for (var i = 0; i < distances.length; i++) {
+				var color1 = distances[i][0];
+				var color2 = distances[i][1];
+				var cluster1 = colorToCluster[color1];
+				var cluster2 = colorToCluster[color2];
+				if (!cluster1 || !cluster2 || cluster1 == cluster2)
+					continue;
+
+				// Make sure color1 is at the end of its cluster and
+				// color2 at the beginning.
+				if (color1 != cluster1[cluster1.length - 1])
+					cluster1.reverse();
+				if (color2 != cluster2[0])
+					cluster2.reverse();
+		
+				// Merge cluster2 into cluster1
+				cluster1.push.apply(cluster1, cluster2);
+				delete colorToCluster[color1];
+				delete colorToCluster[color2];
+				colorToCluster[cluster1[0]] = cluster1;
+				colorToCluster[cluster1[cluster1.length - 1]] = cluster1;
+				lastCluster = cluster1;
+			}
+			console.log(lastCluster)
+			// By now all colors should be in one cluster
+			return lastCluster;
+		}
 	},
 };
 </script>
@@ -403,7 +472,8 @@ export default {
 		flex-direction: row;
 		flex-wrap: wrap;
 		padding-bottom: 260px;
-		background: #e3e7e8;
+		// background: #e3e7e8;
+		background: rgb(84, 83, 83);
 		.color-span {
 			.prLayout(25px,25px);
 		}
@@ -423,7 +493,7 @@ export default {
 				flex-wrap: wrap;
 				.header {
 					.prLayout(100%,60px);
-					margin: 140px 0 40px 0;
+					margin: 100px 0 50px 0;
 					line-height: 50px;
 					text-indent: 10px;
 					font-size: 30px;
@@ -434,10 +504,16 @@ export default {
 					align-items: center;
 					border-top: 2px solid #333;
 					border-bottom: 2px solid #333;
+					background: #e3e7e8;
 					.span {
 						.prLayout(30px,30px);
 					}
 				}
+				&::nth-first{
+					.header{
+						margin-top: 0;
+					}
+				}
 			}
 		}
 	}
@@ -451,6 +527,15 @@ export default {
 		align-items: center;
 		flex-wrap: wrap;
 		color: rgba(0, 0, 0, 0.8);
+		.first{
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-content: center;
+			align-items: center;
+			flex-wrap: wrap;
+		}
 		.p {
 			line-height: 26px;
 		}