1 /* 2 *Copyright (c) 2009, TellurianRing.com 3 *All rights reserved. 4 * 5 *Redistribution and use in source and binary forms, with or without modification, 6 *are permitted provided that the following conditions are met: 7 * 8 * Redistributions of source code must retain the above copyright notice, this 9 * list of conditions and the following disclaimer. 10 * Redistributions in binary form must reproduce the above copyright notice, 11 * this list of conditions and the following disclaimer in the documentation 12 * and/or other materials provided with the distribution. 13 * Neither the name of the Organization (TellurianRing.com) nor the names of 14 * its contributors may be used to endorse or promote products derived from 15 * this software without specific prior written permission. 16 * 17 *THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 18 *ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 19 *WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 20 *DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 21 *ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 22 *(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 23 *LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 24 *ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 25 *(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 26 *SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 27 */ 28 /** 29 * @class Text Draws some text on the Stage. This implementation uses the WHATWG 30 * specifications and is only available in certain browsers. 31 * @extends SceneContent 32 * @see WHATWG Canvas and <a href="http://www.whatwg.org/specs/web-apps/current-work/#text">Text</a> 33 * @param {Object} _details An JSON object containing the following properties: 34 * <table cellpadding="0" cellspacing="1" border="0" class="constructor_details"> 35 * <tr><th>Property</th> <th>Required</th> <th>Default</th></tr> 36 * <tr><td>align</td> <td>no</td> <td>start</td></tr> 37 * <tr><td>baseline</td> <td>no</td> <td>alphabetic</td></tr> 38 * <tr><td>fill</td> <td>no</td> <td>#000000</td></tr> 39 * <tr><td>font</td> <td>no</td> <td>Font({family: ["Tahoma", "Ariel"]})</td></tr> 40 * <tr><td>stroke</td> <td>no</td> <td>transparent</td></tr> 41 * <tr><td>stroke_width</td> <td>no</td> <td>1</td></tr> 42 * <tr><td>text</td> <td>no</td> <td>""</td></tr> 43 * </table> 44 * @example // Simple example 45 * Text({ x: 10, y: 50, text: "HTML 5 Rocks!" }) 46 * <div id="text_example_1"></div> 47 * <script type="text/javascript"> 48 * var stage1 = Stage({ 49 * width: 100, height: 100, 50 * container_id: "text_example_1", 51 * scene: Scene({ 52 * content: [ 53 * Text({ x: 10, y: 50, text: "HTML 5 Rocks!" }) 54 * ] 55 * }) 56 * }); 57 * </script> 58 * @example // Centering text. 59 * Text({ x: 50, y: 50, text: "HTML 5 Rocks!", align: Text.Align.center }) 60 * <div id="text_example_2"></div> 61 * <script type="text/javascript"> 62 * var stage1 = Stage({ 63 * width: 100, height: 100, 64 * container_id: "text_example_2", 65 * scene: Scene({ 66 * content: [ 67 * Text({ x: 50, y: 50, text: "HTML 5", align: Text.Align.center }) 68 * ] 69 * }) 70 * }); 71 * </script> 72 * @example // Making it cooler. 73 * Text({ 74 * x: 50, y: 50, text: "~CooL~", align: Text.Align.center, 75 * fill: "#DFDFFF", stroke: "#413FFF", stroke_width: 2, 76 * font: Font({ size: "18px", weight: Font.Weights.bold }) 77 * }) 78 * <div id="text_example_3"></div> 79 * <script type="text/javascript"> 80 * var stage1 = Stage({ 81 * width: 100, height: 100, 82 * container_id: "text_example_3", 83 * scene: Scene({ 84 * content: [ 85 * Text({ 86 * x: 50, y: 50, text: "~CooL~", align: Text.Align.center, 87 * fill: "#DFDFFF", stroke: "#413FFF", stroke_width: 2, 88 * font: Font({ size: "20px", weight: Font.Weights.bold }) 89 * }) 90 * ] 91 * }) 92 * }); 93 * </script> 94 * @requires <a href="http://www.mozilla.com/firefox">Firefox 3.5.x</a>, <a href="http://www.apple.com/safari/download">Safari</a>, or <a href="http://www.google.com/chrome">Google Chrome</a> 95 */ 96 function Text(_details) { // {{{ 97 /** @private @constructs */ 98 function _Text(_details) { // {{{ 99 // Private Members {{{ 100 var align = check(_details.align, Text.Align.start); 101 var baseline = check(_details.baseline, Text.Baseline.alpha); 102 var fill = check(_details.fill, "#000000"); 103 var font = check(_details.font, Font({family: ["Tahoma", "Ariel"]})); 104 var stroke = check(_details.stroke, "transparent"); 105 var stroke_width = check(_details.stroke_width, 1); 106 var text = check(_details.text, ""); 107 // }}} Private Members 108 109 // Public Members {{{ 110 this.draw = function(_context) { // {{{ 111 var bounds = this.getBounds(); 112 var x = bounds.x; 113 var y = bounds.y; 114 _context.textAlign = align; 115 _context.textBaseline = baseline; 116 _context.font = font.toCss(); 117 if(exists(fill) && exists(_context.fillText)) { 118 _context.fillStyle = fill; 119 _context.fillText(text, x, y) 120 } 121 if(exists(stroke) && exists(_context.strokeText)) { 122 _context.lineWidth = stroke_width; 123 _context.strokeStyle = stroke; 124 _context.strokeText(text, x, y); 125 } 126 } // }}} draw 127 /** 128 * Sets the text of this Text object. 129 * @function 130 * @param {String} _text The text to display. 131 */ 132 this.setText = function(_text) { // {{{ 133 text = _text; 134 }// }}} setText 135 // }}} Public Members 136 137 } // }}} _Text 138 SceneContent(_details).extend(_Text); 139 var theText = new _Text(_details); 140 return theText; 141 } // }}} Text 142 143 /** 144 * @namespace Some Text Alignment Constants. 145 */ 146 Text.Align = { 147 /** @property */ 148 center: "center", 149 /** @property */ 150 end: "end", 151 /** @property */ 152 left: "left", 153 /** @property */ 154 right: "right", 155 /** @property */ 156 start: "start" 157 }; 158 159 /** 160 * @namespace Some Text Baseline Constants. 161 */ 162 Text.Baseline = { 163 /** @property */ 164 alpha: "alphabetic", 165 /** @property */ 166 alphabetic: "alphabetic", 167 /** @property */ 168 bot: "bottom", 169 /** @property */ 170 bottom: "bottom", 171 /** @property */ 172 hang: "hanging", 173 /** @property */ 174 hanging: "hanging", 175 /** @property */ 176 ideo: "ideographic", 177 /** @property */ 178 ideographic: "ideographic", 179 /** @property */ 180 mid: "middle", 181 /** @property */ 182 middle: "middle", 183 /** @property */ 184 top: "top" 185 }; 186 187 // These properties are for jEdit - Programmer's Text Editor. 188 // Load this file in jEdit to see what they do. 189 // ::folding=explicit:mode=javascript:noTabs=true:collapseFolds=4:: 190