index.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. class RGB {
  2. #r = 0
  3. #g = 0
  4. #b = 0
  5. constructor(){
  6. console.log(this.#r, this.#g, this.#b)
  7. }
  8. checkRange(value){
  9. return value >= 0 && value <= 255
  10. }
  11. get r(){
  12. return this.#r
  13. }
  14. set r(newR){
  15. this.#r = this.checkRange(newR) ? newR : this.#r
  16. }
  17. get g(){
  18. return this.#g
  19. }
  20. set g(newG){
  21. this.#g = this.checkRange(newG) ? newG : this.#g
  22. }
  23. get b(){
  24. return this.#b
  25. }
  26. set b(newB){
  27. this.#b = this.checkRange(newB) ? newB : this.#b
  28. }
  29. get hex(){
  30. const t = a => (a < 16 ? '0' : '') + a.toString(16).toUpperCase()
  31. return `#${t(this.#r)}${t(this.#g)}${t(this.#b)}`
  32. }
  33. set hex(newHex){
  34. const hexRegexp = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/
  35. let parsed;
  36. if (parsed = newHex.match(hexRegexp)){
  37. //console.log(parsed)
  38. const [,r,g,b] = parsed
  39. this.r = parseInt(r, 16)
  40. this.g = parseInt(g, 16)
  41. this.b = parseInt(b, 16)
  42. }
  43. else {
  44. throw SyntaxError('wrong hex color')
  45. }
  46. }
  47. get rgb(){
  48. const {r,g,b} = this
  49. return `rgb(${r},${g},${b})`
  50. }
  51. set rgb(newRGB) {
  52. const rgbRegexp = /^\s*rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)\s*$/
  53. let parsed;
  54. if (parsed = newRGB.match(rgbRegexp)){
  55. const [,r,g,b] = parsed
  56. this.#r = +r;
  57. this.#g = +g;
  58. this.#b = +b;
  59. }
  60. else {
  61. throw SyntaxError('wrong rgb color')
  62. }
  63. }
  64. }
  65. class RGBA extends RGB {
  66. #a = 0;
  67. constructor() {
  68. super();
  69. console.log(this.r, this.g, this.b, this.#a)
  70. }
  71. checkAlphaRange(value){
  72. return value >= 0 && value <= 1
  73. }
  74. get a(){
  75. return this.#a
  76. }
  77. set a(newA){
  78. this.#a = this.checkAlphaRange(newA) ? newA : this.#a
  79. }
  80. get rgba(){
  81. const {r,g,b,a} = this
  82. return `rgba(${r},${g},${b},${a})`
  83. }
  84. set rgba(newRGBA) {
  85. const rgbRegexp = /^\s*rgba\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*((0\.\d+)|1|0)\s*\)\s*$/
  86. let parsed;
  87. if (parsed = newRGBA.match(rgbRegexp)){
  88. const [,r,g,b,a] = parsed
  89. this.r = +r
  90. this.g = +g
  91. this.b = +b
  92. this.a = +a
  93. }
  94. else {
  95. throw SyntaxError('wrong rgba color')
  96. }
  97. }
  98. set color(color) {
  99. if(color.includes('#')) {
  100. this.hex = color;
  101. } else if(color.includes('rgba')) {
  102. this.rgba = color;
  103. } else if(color.includes('rgb')) {
  104. this.rgb = color;
  105. }
  106. }
  107. }
  108. let rgb = new RGB;
  109. let rgb2 = new RGB;
  110. let rgba = new RGBA;
  111. let rgba2 = new RGBA;
  112. let rgba3 = new RGBA;
  113. let rgba4 = new RGBA;
  114. rgb.hex = '#eeccee';
  115. console.log('rgb', rgb);
  116. rgb2.rgb = 'rgb(238, 204, 238)';
  117. console.log('rgb2', rgb2);
  118. console.log('get rgba', rgba.rgba)
  119. rgba2.color = 'rgb(200, 45, 255)';
  120. rgba3.color = '#eeeccc';
  121. rgba4.color = 'rgba(102, 45, 255, 0.7)';
  122. console.log(rgba2)
  123. console.log(rgba3)
  124. console.log(rgba4)