docs/source/Color2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-draw-Color'>/**
  19 </span> * @class Ext.draw.Color
  20  * @extends Object
  21  *
  22  * Represents an RGB color and provides helper functions get
  23  * color components in HSL color space.
  24  */
  25 Ext.define('Ext.draw.Color', {
  26
  27     /* Begin Definitions */
  28
  29     /* End Definitions */
  30
  31     colorToHexRe: /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
  32     rgbRe: /\s*rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)\s*/,
  33     hexRe: /\s*#([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/,
  34
  35 <span id='Ext-draw-Color-cfg-lightnessFactor'>    /**
  36 </span>     * @cfg {Number} lightnessFactor
  37      *
  38      * The default factor to compute the lighter or darker color. Defaults to 0.2.
  39      */
  40     lightnessFactor: 0.2,
  41
  42 <span id='Ext-draw-Color-method-constructor'>    /**
  43 </span>     * @constructor
  44      * @param {Number} red Red component (0..255)
  45      * @param {Number} green Green component (0..255)
  46      * @param {Number} blue Blue component (0..255)
  47      */
  48     constructor : function(red, green, blue) {
  49         var me = this,
  50             clamp = Ext.Number.constrain;
  51         me.r = clamp(red, 0, 255);
  52         me.g = clamp(green, 0, 255);
  53         me.b = clamp(blue, 0, 255);
  54     },
  55
  56 <span id='Ext-draw-Color-method-getRed'>    /**
  57 </span>     * Get the red component of the color, in the range 0..255.
  58      * @return {Number}
  59      */
  60     getRed: function() {
  61         return this.r;
  62     },
  63
  64 <span id='Ext-draw-Color-method-getGreen'>    /**
  65 </span>     * Get the green component of the color, in the range 0..255.
  66      * @return {Number}
  67      */
  68     getGreen: function() {
  69         return this.g;
  70     },
  71
  72 <span id='Ext-draw-Color-method-getBlue'>    /**
  73 </span>     * Get the blue component of the color, in the range 0..255.
  74      * @return {Number}
  75      */
  76     getBlue: function() {
  77         return this.b;
  78     },
  79
  80 <span id='Ext-draw-Color-method-getRGB'>    /**
  81 </span>     * Get the RGB values.
  82      * @return {Array}
  83      */
  84     getRGB: function() {
  85         var me = this;
  86         return [me.r, me.g, me.b];
  87     },
  88
  89 <span id='Ext-draw-Color-method-getHSL'>    /**
  90 </span>     * Get the equivalent HSL components of the color.
  91      * @return {Array}
  92      */
  93     getHSL: function() {
  94         var me = this,
  95             r = me.r / 255,
  96             g = me.g / 255,
  97             b = me.b / 255,
  98             max = Math.max(r, g, b),
  99             min = Math.min(r, g, b),
 100             delta = max - min,
 101             h,
 102             s = 0,
 103             l = 0.5 * (max + min);
 104
 105         // min==max means achromatic (hue is undefined)
 106         if (min != max) {
 107             s = (l &lt; 0.5) ? delta / (max + min) : delta / (2 - max - min);
 108             if (r == max) {
 109                 h = 60 * (g - b) / delta;
 110             } else if (g == max) {
 111                 h = 120 + 60 * (b - r) / delta;
 112             } else {
 113                 h = 240 + 60 * (r - g) / delta;
 114             }
 115             if (h &lt; 0) {
 116                 h += 360;
 117             }
 118             if (h &gt;= 360) {
 119                 h -= 360;
 120             }
 121         }
 122         return [h, s, l];
 123     },
 124
 125 <span id='Ext-draw-Color-method-getLighter'>    /**
 126 </span>     * Return a new color that is lighter than this color.
 127      * @param {Number} factor Lighter factor (0..1), default to 0.2
 128      * @return Ext.draw.Color
 129      */
 130     getLighter: function(factor) {
 131         var hsl = this.getHSL();
 132         factor = factor || this.lightnessFactor;
 133         hsl[2] = Ext.Number.constrain(hsl[2] + factor, 0, 1);
 134         return this.fromHSL(hsl[0], hsl[1], hsl[2]);
 135     },
 136
 137 <span id='Ext-draw-Color-method-getDarker'>    /**
 138 </span>     * Return a new color that is darker than this color.
 139      * @param {Number} factor Darker factor (0..1), default to 0.2
 140      * @return Ext.draw.Color
 141      */
 142     getDarker: function(factor) {
 143         factor = factor || this.lightnessFactor;
 144         return this.getLighter(-factor);
 145     },
 146
 147 <span id='Ext-draw-Color-method-toString'>    /**
 148 </span>     * Return the color in the hex format, i.e. '#rrggbb'.
 149      * @return {String}
 150      */
 151     toString: function() {
 152         var me = this,
 153             round = Math.round,
 154             r = round(me.r).toString(16),
 155             g = round(me.g).toString(16),
 156             b = round(me.b).toString(16);
 157         r = (r.length == 1) ? '0' + r : r;
 158         g = (g.length == 1) ? '0' + g : g;
 159         b = (b.length == 1) ? '0' + b : b;
 160         return ['#', r, g, b].join('');
 161     },
 162
 163 <span id='Ext-draw-Color-method-toHex'>    /**
 164 </span>     * Convert a color to hexadecimal format.
 165      *
 166      * @param {String|Array} color The color value (i.e 'rgb(255, 255, 255)', 'color: #ffffff').
 167      * Can also be an Array, in this case the function handles the first member.
 168      * @returns {String} The color in hexadecimal format.
 169      */
 170     toHex: function(color) {
 171         if (Ext.isArray(color)) {
 172             color = color[0];
 173         }
 174         if (!Ext.isString(color)) {
 175             return '';
 176         }
 177         if (color.substr(0, 1) === '#') {
 178             return color;
 179         }
 180         var digits = this.colorToHexRe.exec(color);
 181
 182         if (Ext.isArray(digits)) {
 183             var red = parseInt(digits[2], 10),
 184                 green = parseInt(digits[3], 10),
 185                 blue = parseInt(digits[4], 10),
 186                 rgb = blue | (green &lt;&lt; 8) | (red &lt;&lt; 16);
 187             return digits[1] + '#' + (&quot;000000&quot; + rgb.toString(16)).slice(-6);
 188         }
 189         else {
 190             return '';
 191         }
 192     },
 193
 194 <span id='Ext-draw-Color-method-fromString'>    /**
 195 </span>     * Parse the string and create a new color.
 196      *
 197      * Supported formats: '#rrggbb', '#rgb', and 'rgb(r,g,b)'.
 198      *
 199      * If the string is not recognized, an undefined will be returned instead.
 200      *
 201      * @param {String} str Color in string.
 202      * @returns Ext.draw.Color
 203      */
 204     fromString: function(str) {
 205         var values, r, g, b,
 206             parse = parseInt;
 207
 208         if ((str.length == 4 || str.length == 7) &amp;&amp; str.substr(0, 1) === '#') {
 209             values = str.match(this.hexRe);
 210             if (values) {
 211                 r = parse(values[1], 16) &gt;&gt; 0;
 212                 g = parse(values[2], 16) &gt;&gt; 0;
 213                 b = parse(values[3], 16) &gt;&gt; 0;
 214                 if (str.length == 4) {
 215                     r += (r * 16);
 216                     g += (g * 16);
 217                     b += (b * 16);
 218                 }
 219             }
 220         }
 221         else {
 222             values = str.match(this.rgbRe);
 223             if (values) {
 224                 r = values[1];
 225                 g = values[2];
 226                 b = values[3];
 227             }
 228         }
 229
 230         return (typeof r == 'undefined') ? undefined : Ext.create('Ext.draw.Color', r, g, b);
 231     },
 232
 233 <span id='Ext-draw-Color-method-getGrayscale'>    /**
 234 </span>     * Returns the gray value (0 to 255) of the color.
 235      *
 236      * The gray value is calculated using the formula r*0.3 + g*0.59 + b*0.11.
 237      *
 238      * @returns {Number}
 239      */
 240     getGrayscale: function() {
 241         // http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
 242         return this.r * 0.3 + this.g * 0.59 + this.b * 0.11;
 243     },
 244
 245 <span id='Ext-draw-Color-method-fromHSL'>    /**
 246 </span>     * Create a new color based on the specified HSL values.
 247      *
 248      * @param {Number} h Hue component (0..359)
 249      * @param {Number} s Saturation component (0..1)
 250      * @param {Number} l Lightness component (0..1)
 251      * @returns Ext.draw.Color
 252      */
 253     fromHSL: function(h, s, l) {
 254         var C, X, m, i, rgb = [],
 255             abs = Math.abs,
 256             floor = Math.floor;
 257
 258         if (s == 0 || h == null) {
 259             // achromatic
 260             rgb = [l, l, l];
 261         }
 262         else {
 263             // http://en.wikipedia.org/wiki/HSL_and_HSV#From_HSL
 264             // C is the chroma
 265             // X is the second largest component
 266             // m is the lightness adjustment
 267             h /= 60;
 268             C = s * (1 - abs(2 * l - 1));
 269             X = C * (1 - abs(h - 2 * floor(h / 2) - 1));
 270             m = l - C / 2;
 271             switch (floor(h)) {
 272                 case 0:
 273                     rgb = [C, X, 0];
 274                     break;
 275                 case 1:
 276                     rgb = [X, C, 0];
 277                     break;
 278                 case 2:
 279                     rgb = [0, C, X];
 280                     break;
 281                 case 3:
 282                     rgb = [0, X, C];
 283                     break;
 284                 case 4:
 285                     rgb = [X, 0, C];
 286                     break;
 287                 case 5:
 288                     rgb = [C, 0, X];
 289                     break;
 290             }
 291             rgb = [rgb[0] + m, rgb[1] + m, rgb[2] + m];
 292         }
 293         return Ext.create('Ext.draw.Color', rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
 294     }
 295 }, function() {
 296     var prototype = this.prototype;
 297
 298     //These functions are both static and instance. TODO: find a more elegant way of copying them
 299     this.addStatics({
 300         fromHSL: function() {
 301             return prototype.fromHSL.apply(prototype, arguments);
 302         },
 303         fromString: function() {
 304             return prototype.fromString.apply(prototype, arguments);
 305         },
 306         toHex: function() {
 307             return prototype.toHex.apply(prototype, arguments);
 308         }
 309     });
 310 });
 311 </pre>
 312 </body>
 313 </html>