colorGradient.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /**
  2. * 求两个颜色之间的渐变值
  3. * @param {string} startColor 开始的颜色
  4. * @param {string} endColor 结束的颜色
  5. * @param {number} step 颜色等分的份额
  6. * */
  7. function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
  8. let startRGB = hexToRgb(startColor, false); //转换为rgb数组模式
  9. let startR = startRGB[0];
  10. let startG = startRGB[1];
  11. let startB = startRGB[2];
  12. let endRGB = hexToRgb(endColor, false);
  13. let endR = endRGB[0];
  14. let endG = endRGB[1];
  15. let endB = endRGB[2];
  16. let sR = (endR - startR) / step; //总差值
  17. let sG = (endG - startG) / step;
  18. let sB = (endB - startB) / step;
  19. let colorArr = [];
  20. for (let i = 0; i < step; i++) {
  21. //计算每一步的hex值
  22. let hex = rgbToHex('rgb(' + Math.round((sR * i + startR)) + ',' + Math.round((sG * i + startG)) + ',' + Math.round((sB *
  23. i + startB)) + ')');
  24. colorArr.push(hex);
  25. }
  26. return colorArr;
  27. }
  28. // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
  29. function hexToRgb(sColor, str = true) {
  30. let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  31. sColor = sColor.toLowerCase();
  32. if (sColor && reg.test(sColor)) {
  33. if (sColor.length === 4) {
  34. let sColorNew = "#";
  35. for (let i = 1; i < 4; i += 1) {
  36. sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
  37. }
  38. sColor = sColorNew;
  39. }
  40. //处理六位的颜色值
  41. let sColorChange = [];
  42. for (let i = 1; i < 7; i += 2) {
  43. sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
  44. }
  45. if(!str) {
  46. return sColorChange;
  47. } else {
  48. return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;
  49. }
  50. } else if (/^(rgb|RGB)/.test(sColor)) {
  51. let arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",")
  52. return arr.map(val => Number(val));
  53. } else {
  54. return sColor;
  55. }
  56. };
  57. // 将rgb表示方式转换为hex表示方式
  58. function rgbToHex(rgb) {
  59. let _this = rgb;
  60. let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  61. if (/^(rgb|RGB)/.test(_this)) {
  62. let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
  63. let strHex = "#";
  64. for (let i = 0; i < aColor.length; i++) {
  65. let hex = Number(aColor[i]).toString(16);
  66. hex = String(hex).length == 1 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
  67. if (hex === "0") {
  68. hex += hex;
  69. }
  70. strHex += hex;
  71. }
  72. if (strHex.length !== 7) {
  73. strHex = _this;
  74. }
  75. return strHex;
  76. } else if (reg.test(_this)) {
  77. let aNum = _this.replace(/#/, "").split("");
  78. if (aNum.length === 6) {
  79. return _this;
  80. } else if (aNum.length === 3) {
  81. let numHex = "#";
  82. for (let i = 0; i < aNum.length; i += 1) {
  83. numHex += (aNum[i] + aNum[i]);
  84. }
  85. return numHex;
  86. }
  87. } else {
  88. return _this;
  89. }
  90. }
  91. /**
  92. * JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba(255,255,255,0.5)字符串
  93. * sHex为传入的十六进制的色值
  94. * alpha为rgba的透明度
  95. */
  96. function colorToRgba(color, alpha = 0.3) {
  97. color = rgbToHex(color)
  98. // 十六进制颜色值的正则表达式
  99. var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  100. /* 16进制颜色转为RGB格式 */
  101. let sColor = color.toLowerCase()
  102. if (sColor && reg.test(sColor)) {
  103. if (sColor.length === 4) {
  104. var sColorNew = '#'
  105. for (let i = 1; i < 4; i += 1) {
  106. sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
  107. }
  108. sColor = sColorNew
  109. }
  110. // 处理六位的颜色值
  111. var sColorChange = []
  112. for (let i = 1; i < 7; i += 2) {
  113. sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
  114. }
  115. // return sColorChange.join(',')
  116. return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
  117. }
  118. else {
  119. return sColor
  120. }
  121. }
  122. export default {
  123. colorGradient,
  124. hexToRgb,
  125. rgbToHex,
  126. colorToRgba
  127. }