diff --git a/src/page/index/colorSort/index.vue b/src/page/index/colorSort/index.vue
index 9d020f6..8cb5f59 100644
--- a/src/page/index/colorSort/index.vue
+++ b/src/page/index/colorSort/index.vue
@@ -22,13 +22,30 @@
v-for="(item, index) in newColorArr"
:key="index"
>
-
-
+
+
+
+
+
+
+
平均值: {{item.average}}
+
+
+
+
@@ -83,10 +100,95 @@ export default {
return {
hideOrigin: false,
colorArr: colors,
+ sortedStatus: false,
active1: false,
active2: false,
hlsColorArr: [],
- newColorArr: [[], [], [], [], [], [], [], [], [], [], [], []],
+ newColorArr: [
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },{
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ {
+ name: '',
+ data: [],
+ average: '',
+ min: '',
+ max: '',
+ },
+ ],
sortedColorArr: [],
// 1-12 对应 hue 每30度 | 13 - 黑 | 14 - 白 | 15 - 灰
balance: [0.9, 0, 0.01],
@@ -103,7 +205,7 @@ export default {
},
rennderCssHex() {
return function (item) {
- return `background-color: ${item.csshsl};`;
+ return `background-color: ${item};`;
};
},
rennderHeaderCss() {
@@ -123,13 +225,6 @@ export default {
x: this.hideOrigin ? 0 : "100%",
zIndex: this.hideOrigin ? 2 : 10,
onStart: () => {
- this.active2 = false;
- // if (this.active1) {
- // this.sortColorSaturation();
- // }
- // if (this.active2) {
- // this.sortColorLight();
- // }
},
});
},
@@ -186,36 +281,17 @@ export default {
if (color.l > 0.75 && color.s < 0.15) {
_index = 10;
}
- this.newColorArr[_index].push(item);
+ this.newColorArr[_index].data.push(item);
}
});
// console.log(this.newColorArr);
},
- // 根据饱和度排序
- sortColorSaturation() {
- this.active1 = true;
- this.active2 = false;
- if (this.hideOrigin) {
- // 分组
- this.newColorArr.forEach((item, index) => {
- item.sort((a, b) => {
- return b.hsl.s - a.hsl.s;
- });
- });
- } else {
- this.hlsColorArr.sort((a, b) => {
- return b.hsl.s - a.hsl.s;
- });
- }
-
- console.log(this.newColorArr);
- },
// 根据亮度
sortColorLight() {
this.active2 = true;
this.caclulTime++;
this.$Utils.showTips({
- message: `正在第${this.caclulTime}次计算，请稍等...
再次点击排序按钮
可重复计算优化排序`,
+ message: `正在计算，请稍等...`,
});
setTimeout(() => {
@@ -238,9 +314,16 @@ export default {
// );
// });
- this.newColorArr[index] = [];
- let sortedArr = this.sortColors(item);
- this.newColorArr[index].push(...sortedArr);
+ let sortedArr = this.sortColors(item.data);
+ this.newColorArr[index].data = [];
+ this.newColorArr[index].data.push(...sortedArr);
+
+ // let other = this.getOtherInfo(sortedArr);
+ console.log(sortedArr[0])
+ this.newColorArr[index].min = sortedArr[0].hex;
+ this.newColorArr[index].max = sortedArr[sortedArr.length-1].hex;
+ this.newColorArr[index].average = sortedArr[Math.ceil(sortedArr.length/2)].hex;
+ this.newColorArr[index].name = this.newColorArr[index].average
});
} else {
// this.hlsColorArr.sort((a, b) => {
@@ -250,6 +333,7 @@ export default {
}
this.active2 = false;
+ this.sortedStatus = true;
}, 1000);
// console.log(this.newColorArr);
@@ -319,6 +403,9 @@ export default {
for (let i = 0; i < colors.length; i++) {
distances[i] = [];
for (let j = 0; j < i; j++) {
+ // if (colors[i].hex === colors[j].hex){
+ // console.log('相同',colors[i].hex)
+ // }
distances.push([
colors[i],
colors[j],
@@ -333,7 +420,7 @@ export default {
// Put each color into separate cluster initially
const colorToCluster = {};
for (let i = 0; i < colors.length; i++) {
- colorToCluster[colors[i].int] = [colors[i]];
+ colorToCluster[colors[i].hex] = [colors[i]];
}
// Merge clusters, starting with lowest distances
@@ -342,8 +429,8 @@ export default {
const color1 = distances[i][0];
const color2 = distances[i][1];
- const cluster1 = colorToCluster[color1 && color1.int];
- const cluster2 = colorToCluster[color2 && color2.int];
+ const cluster1 = colorToCluster[color1 && color1.hex];
+ const cluster2 = colorToCluster[color2 && color2.hex];
if (!cluster1 || !cluster2 || cluster1 === cluster2) {
continue;
@@ -362,10 +449,10 @@ export default {
// Merge cluster2 into cluster1
cluster1.push(...cluster2);
- delete colorToCluster[color1.int];
- delete colorToCluster[color2.int];
- colorToCluster[cluster1[0].int] = cluster1;
- colorToCluster[cluster1[cluster1.length - 1].int] = cluster1;
+ delete colorToCluster[color1.hex];
+ delete colorToCluster[color2.hex];
+ colorToCluster[cluster1[0].hex] = cluster1;
+ colorToCluster[cluster1[cluster1.length - 1].hex] = cluster1;
lastCluster = cluster1;
}
console.log("sorted length =", lastCluster.length);
@@ -411,7 +498,7 @@ export default {
flex-wrap: wrap;
.header {
.prLayout(100%,60px);
- margin: 100px 0 50px 0;
+ margin: 0 0 0px 0;
line-height: 50px;
text-indent: 10px;
font-size: 30px;
@@ -427,6 +514,34 @@ export default {
.prLayout(30px,30px);
}
}
+ .spans{
+ .prLayout(100%,auto);
+ display: flex;
+ flex-direction: row;
+ align-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+ .desc{
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ .row{
+ .prLayout(100%,60px);
+ line-height: 60px;
+ display: flex;
+ flex-direction: row;
+ align-content: center;
+ align-items: center;
+ p{
+ width: 200px;
+ margin-right: 20px;
+ }
+ }
+ }
&::nth-first {
.header {
margin-top: 0;
diff --git a/src/page/index/router/index.js b/src/page/index/router/index.js
index 870121f..aa85dcb 100644
--- a/src/page/index/router/index.js
+++ b/src/page/index/router/index.js
@@ -119,7 +119,7 @@ const routes = [
name: "ColorSort",
component: ColorSort,
meta: {
- title: "Color Sort", // 标题
+ title: "Color Sorting", // 标题
keepAlive: false, // 是否保持活跃
},
},