修改颜色区分，只能加黑灰白
This commit is contained in:
parent
3ae20438f4
commit
145fc58de7
@ -51,21 +51,23 @@
|
||||
</div>
|
||||
<div class="btn-groups">
|
||||
<!-- <div class="btn" @click="sortColor">颜色归类</div> -->
|
||||
|
||||
<div class="p">根据Hue色调分组</div>
|
||||
<div class="ios-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="ios-checkbox"
|
||||
name="emulate-ios-button"
|
||||
class="raw-checkbox"
|
||||
v-model="hideOrigin"
|
||||
@change="showGroup"
|
||||
hidden
|
||||
/>
|
||||
<label for="ios-checkbox" class="emulate-ios-button"></label>
|
||||
<div class="first">
|
||||
<div class="p">根据Hue色调分组</div>
|
||||
<div class="ios-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="ios-checkbox"
|
||||
name="emulate-ios-button"
|
||||
class="raw-checkbox"
|
||||
v-model="hideOrigin"
|
||||
@change="showGroup"
|
||||
hidden
|
||||
/>
|
||||
<label for="ios-checkbox" class="emulate-ios-button"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p">根据固定颜色分组</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 (_index > 11) {
|
||||
// _index = 11;
|
||||
// }
|
||||
// 灰
|
||||
if (
|
||||
// 当饱和度为0时
|
||||
item.s <= 0.15 && item.l <= 0.75 && item.l >= 0.2
|
||||
) {
|
||||
_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
|
||||
// b.hsl[0] * b.hsl[1] * b.hsl[2] -
|
||||
// a.hsl[0] * a.hsl[1] * a.hsl[2]
|
||||
// Math.random() > 0.5 ? 1 : -1
|
||||
deltaL
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -315,10 +335,10 @@ export default {
|
||||
// 计算颜色距离
|
||||
colorDistance(color1, color2) {
|
||||
const x =
|
||||
Math.pow(color1[0] - color2[0], 2) +
|
||||
Math.pow(color1[1] - color2[1], 2) +
|
||||
Math.pow(color1[2] - color2[2], 2);
|
||||
return Math.sqrt(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) {
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user