From 08fafbb06e9161933828e67fb91fc4179cc5e771 Mon Sep 17 00:00:00 2001 From: rucky Date: Thu, 17 Feb 2022 01:48:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A2=9C=E8=89=B2=E6=8E=92?= =?UTF-8?q?=E5=BA=8F=20=E6=98=BE=E7=A4=BA=E6=9C=80=E5=A4=A7=E5=80=BC?= =?UTF-8?q?=E4=B8=AD=E9=97=B4=E5=80=BC=E5=92=8C=E6=9C=80=E5=B0=8F=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/index/colorSort/index.vue | 211 ++++++++++++++++++++++------- src/page/index/router/index.js | 2 +- 2 files changed, 164 insertions(+), 49 deletions(-) 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" > -
Group {{ index + 1 }}
-
+
Group {{item.name}}
+
+
+
+ +
+
+

最小值: {{item.min}}

+
+
+
+

平均值: {{item.average}}

+
+
+
+

最大值: {{item.max}}

+
+
+
@@ -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, // 是否保持活跃 }, },