<template>
<!-- 运行分析 -->
<div>
<div
class="box"
v-for="(item, index) in rgbArray"
:key="index"
:style="item.style"
></div>
</div>
</template>
<script>
export default {
name: "",
components: {},
data() {
return {
hslArray: [],
rgbArray: []
};
},
computed: {
// rgbArray: function() {
// var self = this;
// if (!self.hslArray.length) return [];
// var rgbArray = self.hslArray.map(function(item) {
// return self.hslToRgb.apply(this, item);
// });
// let list = rgbArray.map(function(item) {
// return {
// value: item,
// style: { background: "rgb(" + item.toString() + ")" }
// };
// });
// return list;
// }
},
created() {
this.hslArray = this.getHslArray();
this.init();
},
mounted() {},
methods: {
init() {
var self = this;
if (!self.hslArray.length) return [];
this.rgbArray = self.hslArray.map(function(item) {
return self.hslToRgb.apply(this, item);
});
this.rgbArray = this.rgbArray.map(item => {
return "rgb(" + item.toString() + ")";
});
console.log(this.rgbArray);
},
/**
* HSL颜色值转换为RGB
* H,S,L 设定在 [0, 1] 之间
* R,G,B 返回在 [0, 255] 之间
*
* @param H 色相
* @param S 饱和度
* @param L 亮度
* @returns Array RGB色值
*/
hslToRgb: function(H, S, L) {
var R, G, B;
if (+S === 0) {
R = G = B = L; // 饱和度为0 为灰色
} else {
var hue2Rgb = function(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
var Q = L < 0.5 ? L * (1 + S) : L + S - L * S;
var P = 2 * L - Q;
R = hue2Rgb(P, Q, H + 1 / 3);
G = hue2Rgb(P, Q, H);
B = hue2Rgb(P, Q, H - 1 / 3);
}
return [Math.round(R * 255), Math.round(G * 255), Math.round(B * 255)];
},
// 获取随机HSL
randomHsl: function() {
var H = Math.random();
var S = Math.random();
var L = Math.random();
return [H, S, L];
},
// 获取HSL数组
getHslArray: function() {
var HSL = [];
var hslLength = 9; // 获取数量
for (var i = 0; i < hslLength; i++) {
var ret = this.randomHsl();
// 颜色相邻颜色差异须大于 0.25
if (i > 0 && Math.abs(ret[0] - HSL[i - 1][0]) < 0.25) {
i--;
continue; // 重新获取随机色
}
ret[1] = 0.7 + ret[1] * 0.2; // [0.7 - 0.9] 排除过灰颜色
ret[2] = 0.4 + ret[2] * 0.4; // [0.4 - 0.8] 排除过亮过暗色
// 数据转化到小数点后两位
ret = ret.map(function(item) {
return parseFloat(item.toFixed(2));
});
HSL.push(ret);
}
return HSL;
}
}
};
</script>
<style lang="scss" scoped>
.box {
width: 50px;
height: 50px;
float: left;
}
</style>
// 随机生成颜色
getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
do {
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
} while (color === "#FFFFFF" || color === "#000000");
return color;
},
记录随机颜色生成,避免相近色系
最新推荐文章于 2024-09-14 18:52:56 发布
该代码段展示了一个Vue.js组件,用于将HSL颜色值转换为RGB,并动态渲染为不同背景色的方块。组件使用HSL颜色数组,通过hslToRgb方法进行转换,并确保颜色差异性。此外,还包括随机生成HSL颜色的辅助函数。
摘要由CSDN通过智能技术生成