1 /*global one*/ 2 one.include('js:one/color.js'); 3 4 one.include('js:one/color-installColorSpace.js'); 5 6 /** 7 * @name one.color.RGB 8 * @class 9 * <p>A color in the RGB colorspace with an optional alpha value.</p> 10 * <p>one.color.(RGB|HSL|HSV|CMYK) objects are designed to be 11 * immutable; all the conversion, set, and adjust methods return new 12 * objects.</p> 13 * <p>one.color.(RGB|HSL|HSV|CMYK) objects automatically get the set 14 * and adjust methods from all other installed colorspaces, so 15 * although you can use the explicit conversion methods ({@link 16 * one.color.RGB#toHSL}, {@link one.color.RGB#toCMYK}...), the below 17 * will work just fine:</p><pre><code> 18 one.include('jslib:one/color/RGB.js'); 19 one.include('jslib:one/color/HSL.js'); 20 21 new one.color.RGB(.4, .3, .9). 22 adjustLightness(+.2). // Implicit conversion to HSL 23 setRed(-.1). // Implicit conversion back to RGB 24 toHex(); // "#00a6f2" 25 </code></pre> 26 * 27 * @constructor 28 * Create a new one.color.RGB object. Values outside the supported 29 * range, [0..1], will be adjusted automatically. 30 * @param {Number} r The red component, range: [0..1] 31 * @param {Number} g The green component, range: [0..1] 32 * @param {Number} b The blue component, range: [0..1] 33 * @param {Number} [a] The alpha value, range: [0..1], 34 * defaults to 1 35 */ 36 37 one.color.installColorSpace('RGB', ['Red', 'Green', 'Blue', 'Alpha'], { 38 /** 39 * Get the standard RGB hex representation of the color. 40 * @return {String} The hex string, e.g. "#f681df" 41 */ 42 toHex: function () { 43 var hexString = (Math.round(255 * this.r) * 0x10000 + Math.round(255 * this.g) * 0x100 + Math.round(255 * this.b)).toString(16); 44 return '#' + ('00000'.substr(0, 6 - hexString.length)) + hexString; 45 }, 46 47 /** 48 * Get a valid CSS color representation of the color without an 49 * alpha value. 50 * @return {String} The CSS color string, e.g. "rgb(123, 2, 202)" 51 */ 52 toCSS: function () { 53 return "rgb(" + Math.round(255 * this.r) + "," + Math.round(255 * this.g) + "," + Math.round(255 * this.b) + ")"; 54 }, 55 56 /** 57 * Get a valid CSS color representation of the color, including 58 * the alpha value. 59 * @return {String} The CSS color string, e.g. "rgba(123, 2, 202, 0.253)" 60 */ 61 toCSSWithAlpha: function () { 62 return "rgba(" + Math.round(255 * this.r) + "," + Math.round(255 * this.g) + "," + Math.round(255 * this.b) + "," + this.a + ")"; 63 } 64 }); 65 66 /** 67 * @name one.color.RGB.prototype.r 68 * @property 69 * @type Number 70 * @description The red component, range: [0..1] 71 */ 72 73 /** 74 * @name one.color.RGB.prototype.g 75 * @property 76 * @type Number 77 * @description The green component, range: [0..1] 78 */ 79 80 /** 81 * @name one.color.RGB.prototype.b 82 * @property 83 * @type Number 84 * @description The blue component, range: [0..1] 85 */ 86 87 /** 88 * @name one.color.RGB.prototype.a 89 * @property 90 * @type Number 91 * @description The alpha value, range: [0..1] 92 */ 93 94 /** 95 * @name one.color.RGB.prototype.setRed 96 * @function 97 * @param {Number} r The new red component, range: [0..1] 98 * @return {one.color.RGB} New color object with the changed value. 99 */ 100 101 /** 102 * @name one.color.RGB.prototype.setGreen 103 * @function 104 * @param {Number} g The new green component, range: [0..1] 105 * @return {one.color.RGB} New color object with the changed value. 106 */ 107 108 /** 109 * @name one.color.RGB.prototype.setBlue 110 * @function 111 * @param {Number} b The new blue component, range: [0..1] 112 * @return {one.color.RGB} New color object with the changed value. 113 */ 114 115 /** 116 * @name one.color.RGB.prototype.setAlpha 117 * @function 118 * @param {Number} a The new alpha value, range: [0..1] 119 * @return {one.color.RGB} New color object with the changed value. 120 */ 121 122 /** 123 * @name one.color.RGB.prototype.adjustRed 124 * @function 125 * @param {Number} r The value to add to the red component. If the resulting 126 * value falls outside the supported range, [0..1], it will be 127 * adjusted automatically. 128 * @return {one.color.RGB} New color object with the changed value. 129 */ 130 131 /** 132 * @name one.color.RGB.prototype.adjustGreen 133 * @function 134 * @param {Number} g The value to add to the green component. If the resulting 135 * value falls outside the supported range, [0..1], it will be 136 * adjusted automatically. 137 * @return {one.color.RGB} New color object with the changed value. 138 */ 139 140 /** 141 * @name one.color.RGB.prototype.adjustBlue 142 * @function 143 * @param {Number} b The value to add to the blue component. If the resulting 144 * value falls outside the supported range, [0..1], it will be 145 * adjusted automatically. 146 * @return {one.color.RGB} New color object with the changed value. 147 */ 148 149 /** 150 * @name one.color.RGB.prototype.adjustAlpha 151 * @function 152 * @param {Number} a The value to add to the alpha value. If the resulting 153 * value falls outside the supported range, [0..1], it will be 154 * adjusted automatically. 155 * @return {one.color.RGB} New color object with the changed value. 156 */ 157 158 /** 159 * @name one.color.RGB.prototype.toJSON 160 * @description Convert the color to a JSON representation. 161 * @function 162 * @return {Array} 163 */ 164 165 /** 166 * @name one.color.RGB.prototype.toRGB 167 * @description Convert the color to a {@link one.color.RGB} object, ie. return the 168 * object itself. 169 * @function 170 * @return {one.color.RGB} 171 */ 172 173 /** 174 * @name one.color.RGB.prototype.toHSV 175 * @description Convert the color to a {@link one.color.HSV} object. 176 * @function 177 * @requires one.color.HSV 178 * @return {one.color.HSV} 179 */ 180 181 /** 182 * @name one.color.RGB.prototype.toHSL 183 * @description Convert the color to a {@link one.color.HSL} object. 184 * @function 185 * @requires one.color.HSL 186 * @return {one.color.HSL} 187 */ 188 189 /** 190 * @name one.color.RGB.prototype.toCMYK 191 * @description Convert the color to a {@link one.color.CMYK} object. 192 * @function 193 * @requires one.color.CMYK 194 * @return {one.color.CMYK} 195 */ 196