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