更新颜色排序 显示最大值中间值和最小值
This commit is contained in:
parent
44208b367f
commit
08fafbb06e
@ -22,13 +22,30 @@
|
||||
v-for="(item, index) in newColorArr"
|
||||
:key="index"
|
||||
>
|
||||
<div class="header">Group {{ index + 1 }}</div>
|
||||
<div
|
||||
class="color-span"
|
||||
v-for="(t, i) in item"
|
||||
:key="i"
|
||||
:style="rennderCssHSL(t)"
|
||||
></div>
|
||||
<div class="header">Group {{item.name}}</div>
|
||||
<div class="spans">
|
||||
<div
|
||||
class="color-span"
|
||||
v-for="(t, i) in item.data"
|
||||
:key="i"
|
||||
:style="rennderCssHSL(t)"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="desc" v-if="sortedStatus">
|
||||
<div class="row">
|
||||
<p>最小值: {{item.min}}</p>
|
||||
<div class="color-span" :style="rennderCssHex(item.min)"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>平均值: {{item.average}}</p>
|
||||
<div class="color-span" :style="rennderCssHex(item.average)"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>最大值: {{item.max}}</p>
|
||||
<div class="color-span" :style="rennderCssHex(item.max)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-groups">
|
||||
@ -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}次计算，请稍等...<br/>再次点击排序按钮<br/>可重复计算优化排序`,
|
||||
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;
|
||||
|
||||
@ -119,7 +119,7 @@ const routes = [
|
||||
name: "ColorSort",
|
||||
component: ColorSort,
|
||||
meta: {
|
||||
title: "Color Sort", // 标题
|
||||
title: "Color Sorting", // 标题
|
||||
keepAlive: false, // 是否保持活跃
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user