diff --git a/deploy.config.js b/deploy.config.js
index e373f04..bc592bb 100644
--- a/deploy.config.js
+++ b/deploy.config.js
@@ -16,8 +16,8 @@ module.exports = {
// },
test: {
// 环境对象
- name: 'szxgl测试环境', // 环境名称
- script: 'npm run build:dev', // 打包命令
+ name: 'szxgl测试环境:pro', // 环境名称
+ script: 'npm run build:pro', // 打包命令
host: '39.108.110.167', // 服务器地址
port: 22, // 服务器端口号
username: 'front', // 服务器登录用户名
diff --git a/package.json b/package.json
index 77ba00f..f8913a3 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
"jsmpeg": "^1.0.0",
"meshline": "^2.0.3",
"qrcode": "^1.4.4",
+ "snapsvg-cjs": "^0.0.6",
"stats.js": "^0.17.0",
"style-resources-loader": "^1.3.2",
"three": "^0.133.0",
diff --git a/src/assets/css/global.less b/src/assets/css/global.less
index d30881c..f951b88 100644
--- a/src/assets/css/global.less
+++ b/src/assets/css/global.less
@@ -1,6 +1,5 @@
@charset "utf-8";
-@import "~@/assets/font/project_iconfont.css";
/*--------------------
通用
--------------------*/
diff --git a/src/assets/css/reset.less b/src/assets/css/reset.less
index 656d664..32481f1 100644
--- a/src/assets/css/reset.less
+++ b/src/assets/css/reset.less
@@ -177,6 +177,7 @@ html,body{
color: rgba(0,0,0,0.8);
text-align: center;
animation: hide .5s ease 3s both;
+ font-size: 0.3rem;
}
#svg{
animation: hide .5s ease 3s both;
diff --git a/src/page/index/colorSort/index.vue b/src/page/index/colorSort/index.vue
index f24eb46..9d020f6 100644
--- a/src/page/index/colorSort/index.vue
+++ b/src/page/index/colorSort/index.vue
@@ -31,42 +31,21 @@
>
-
-
-
-
根据Hue色调分组
-
-
-
-
+
根据Hue色调分组
+
+
+
-
+
-
- 根据饱和度排序
-
- 根据明度排序
-
-
再次点击排序按钮
可重复计算优化排序`,
+ });
+
+ setTimeout(() => {
+ if (this.hideOrigin) {
+ // 分组
+ this.newColorArr.forEach((item, index) => {
+ // 灰度区分
+ // item = this.sortColor(item);
+ // console.log(item)
+ // item.forEach((t, i) => {
+ // let rgb = t.rgb;
+ // t.grey = rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
+ // });
+ // item.sort((a, b) => {
+ // let deltaGrey = b.grey - a.grey;
+ // let result = deltaGrey;
+ // return (
+ // // Math.random() > 0.5 ? 1 : -1
+ // result
+ // );
+ // });
+
+ this.newColorArr[index] = [];
+ let sortedArr = this.sortColors(item);
+ this.newColorArr[index].push(...sortedArr);
});
- });
- } else {
- this.hlsColorArr.sort((a, b) => {
- return b.l - a.l;
- });
- }
+ } else {
+ // this.hlsColorArr.sort((a, b) => {
+ // return b.hsl.l - a.hsl.l;
+ // });
+ this.hlsColorArr = this.sortColors(this.hlsColorArr);
+ }
+
+ this.active2 = false;
+ }, 1000);
// console.log(this.newColorArr);
},
- // 计算颜色距离
- colorDistance(color1, color2) {
- const x =
- Math.pow(color1.r - color2.r, 2) +
- Math.pow(color1.g - color2.g, 2) +
- Math.pow(color1.b - color2.b, 2);
- return x; //Math.sqrt(x)
- },
- // 一维排序
- oneDimensionSorting(colors, dim) {
- return colors.sort((colorA, colorB) => {
- if (colorA.hsl[dim] < colorB.hsl[dim]) {
- return -1;
- } else if (colorA.hsl[dim] > colorB.hsl[dim]) {
- return 1;
- } else {
- return 0;
+ // 计算hsl颜色距离
+ colorDistanceHsl(_color1, _color2) {
+ let color1 = _color1;
+ let color2 = _color2;
+ let result = 0;
+ color1 = color1.hsl;
+ color2 = color2.hsl;
+ Object.keys(color1).forEach((key, index) => {
+ if (key != "a") {
+ result +=
+ (color1[key] - color2[key]) *
+ (color1[key] - color2[key]) *
+ this.balance2[index];
}
});
+ if (Math.floor(color1.r / 30) !== Math.floor(color2.r / 30)) {
+ return 0;
+ }
+ return result;
},
- // 根据明度
- blendRgbaWithWhite(rgba) {
- const color = colorUtil.color(rgba);
- const a = color.rgb.a / 255;
- const r = Math.floor(color.rgb.r * a + 0xff * (1 - a));
- const g = Math.floor(color.rgb.g * a + 0xff * (1 - a));
- const b = Math.floor(color.rgb.b * a + 0xff * (1 - a));
- return "#" + ((r << 16) | (g << 8) | b).toString(16);
- },
- sortWithClusters(colorsToSort) {
- const mappedColors = colorsToSort
- // .map((color) => {
- // console.log(color);
- // const isRgba = color.includes("rgba");
- // if (isRgba) {
- // return blendRgbaWithWhite(color);
- // } else {
- // return color;
- // }
- // })
- .map(colorUtil.color);
-
- mappedColors.forEach((color) => {
- let minDistance;
- let minDistanceClusterIndex;
-
- this.clusters.forEach((cluster, clusterIndex) => {
- const colorRgbArr = [color.rgb.r, color.rgb.g, color.rgb.b];
- const distance = this.colorDistance(
- colorRgbArr,
- cluster.leadColor
- );
- if (
- typeof minDistance === "undefined" ||
- minDistance > distance
- ) {
- minDistance = distance;
- minDistanceClusterIndex = clusterIndex;
- }
- });
-
- this.clusters[minDistanceClusterIndex].colors.push(color);
+ // 计算rgb颜色距离
+ colorDistanceRgb(_color1, _color2) {
+ let color1 = _color1;
+ let color2 = _color2;
+ let result = 0;
+ color1 = color1.rgb;
+ color2 = color2.rgb;
+ Object.keys(color1).forEach((key, index) => {
+ if (key != "a") {
+ result +=
+ (color1[key] - color2[key]) *
+ (color1[key] - color2[key]) *
+ this.balance3[index];
+ }
});
-
- this.clusters.forEach((cluster) => {
- const dim = ["white", "grey", "black"].includes(cluster.name)
- ? "l"
- : "s";
- cluster.colors = this.oneDimensionSorting(cluster.colors, dim);
- });
-
- return this.clusters;
+ return result;
},
- sortColor(colors){
+ // 计算hsv颜色距离 然后和rgb 以及 hsl 距离相加
+ colorDistance(_color1, _color2) {
+ let color1 = _color1;
+ let color2 = _color2;
+ let result = 0;
+ result += this.colorDistanceRgb(color1, color2);
+ result += this.colorDistanceHsl(color1, color2);
+ color1 = color1.hsv;
+ color2 = color2.hsv;
+ Object.keys(color1).forEach((key, index) => {
+ if (key != "a") {
+ result +=
+ (color1[key] - color2[key]) *
+ (color1[key] - color2[key]) *
+ this.balance[index];
+ }
+ });
+ return result;
+ },
+ // 根据根据颜色距离排序
+ sortColors(colors) {
// Calculate distance between each color
- var distances = [];
- for (var i = 0; i < colors.length; i++) {
+ console.log("origin length =", colors.length);
+ if (colors.length === 0) return colors;
+ const distances = [];
+ for (let 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)]);
+ for (let j = 0; j < i; j++) {
+ distances.push([
+ colors[i],
+ colors[j],
+ this.colorDistance(colors[i], colors[j]),
+ ]);
}
}
- distances.sort(function(a, b) {
- return a[2] - b[2];
- });
+ distances.sort((a, b) => a[2] - b[2]);
+
+ // console.log(distances.length);
// Put each color into separate cluster initially
- var colorToCluster = {};
- for (var i = 0; i < colors.length; i++)
- colorToCluster[colors[i]] = [colors[i]];
+ const colorToCluster = {};
+ for (let i = 0; i < colors.length; i++) {
+ colorToCluster[colors[i].int] = [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)
+ let lastCluster;
+ for (let i = 0; i < distances.length; i++) {
+ const color1 = distances[i][0];
+ const color2 = distances[i][1];
+
+ const cluster1 = colorToCluster[color1 && color1.int];
+ const cluster2 = colorToCluster[color2 && color2.int];
+
+ 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])
+ if (color1 !== cluster1[cluster1.length - 1]) {
+ // cluster1 = this.colorReverse(cluster1);
cluster1.reverse();
- if (color2 != cluster2[0])
+ }
+ if (color2 !== cluster2[0]) {
cluster2.reverse();
-
+ // cluster2 = this.colorReverse(cluster2);
+ }
+
// 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;
+ cluster1.push(...cluster2);
+ delete colorToCluster[color1.int];
+ delete colorToCluster[color2.int];
+ colorToCluster[cluster1[0].int] = cluster1;
+ colorToCluster[cluster1[cluster1.length - 1].int] = cluster1;
lastCluster = cluster1;
}
- console.log(lastCluster)
+ console.log("sorted length =", lastCluster.length);
// By now all colors should be in one cluster
return lastCluster;
- }
+ },
},
};
@@ -509,8 +427,8 @@ export default {
.prLayout(30px,30px);
}
}
- &::nth-first{
- .header{
+ &::nth-first {
+ .header {
margin-top: 0;
}
}
@@ -527,7 +445,7 @@ export default {
align-items: center;
flex-wrap: wrap;
color: rgba(0, 0, 0, 0.8);
- .first{
+ .first {
width: 100%;
display: flex;
flex-direction: row;
@@ -545,9 +463,10 @@ export default {
text-align: center;
border-radius: 20px;
padding: 0 20px;
- margin: 10px;
+ margin: 40px;
background: linear-gradient(315deg, #ec7070, #c75f5f);
box-shadow: -14px -14px 28px #b15454, 14px 14px 28px #ff7e7e;
+ cursor: pointer;
&.active {
color: rgba(255, 255, 255, 1);
background: linear-gradient(315deg, #c75f5f, #ec7070);