├── .gitignore ├── CanvasText-0.4.1.js ├── LICENSE ├── README.md ├── bookmarklet.js ├── bootstrap.min.css ├── icons ├── change.png ├── download.png ├── facebook.png └── x.png ├── images ├── classic-background.png ├── musica-logo-cinza.png ├── quote-1.png ├── quote-3.png └── quote-white.png ├── index.html ├── intro.gif ├── intro.mov ├── jquery-1.11.1.js ├── letrilizar-icons.css ├── letrilizar-share.js ├── letrilizar-styles.js ├── letrilizar-utils.js ├── letrilizar.css └── letrilizar.js /.gitignore: -------------------------------------------------------------------------------- 1 | .project -------------------------------------------------------------------------------- /CanvasText-0.4.1.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2011 Pere Monfort Pàmies (http://www.pmphp.net) 3 | * Official site: http://www.canvastext.com 4 | * 5 | * Permission is hereby granted, free of charge, to any person obtaining a 6 | * copy of this software and associated documentation files (the 7 | * "Software"), to deal in the Software without restriction, including 8 | * without limitation the rights to use, copy, modify, merge, publish, 9 | * distribute, sublicense, and/or sell copies of the Software, and to permit 10 | * persons to whom the Software is furnished to do so, subject to the 11 | * following conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be included 14 | * in all copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 17 | * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN 19 | * NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 20 | * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 21 | * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 22 | * USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | */ 24 | function CanvasText() { 25 | // The property that will contain the ID attribute value. 26 | this.canvasId = null; 27 | // The property that will contain the Canvas element. 28 | this.canvas = null; 29 | // The property that will contain the canvas context. 30 | this.context = null; 31 | // The property that will contain the buffer/cache canvas. 32 | this.bufferCanvas = null; 33 | // The property that will contain the cacheCanvas context. 34 | this.bufferContext = null; 35 | // The property that will contain all cached canvas. 36 | this.cacheCanvas = []; 37 | // The property that will contain all cached contexts. 38 | this.cacheContext = []; 39 | // The property that will contain the created style class. 40 | this.savedClasses = []; 41 | 42 | /* 43 | * Default values. 44 | */ 45 | this.fontFamily = "Verdana"; 46 | this.fontWeight = "normal"; 47 | this.fontSize = "12px"; 48 | this.fontColor = "#000"; 49 | this.fontStyle = "normal"; 50 | this.textAlign = "start"; 51 | this.textBaseline = "alphabetic"; 52 | this.lineHeight = "16"; 53 | this.textShadow = null; 54 | 55 | /** 56 | * Benckmark variables. 57 | */ 58 | this.initTime = null; 59 | this.endTime = null; 60 | 61 | /** 62 | * Set the main values. 63 | * @param object config Text properties. 64 | */ 65 | this.config = function (config) { 66 | var property; 67 | /* 68 | * A simple check. If config is not an object popup an alert. 69 | */ 70 | if (typeof (config) !== "object") { 71 | alert("¡Invalid configuration!"); 72 | return false; 73 | } 74 | /* 75 | * Loop the config properties. 76 | */ 77 | for (property in config) { 78 | // If it's a valid property, save it. 79 | if (this[property] !== undefined) { 80 | this[property] = config[property]; 81 | } 82 | } 83 | }; 84 | 85 | /** 86 | * @param object textInfo Contains the Text string, axis X value and axis Y value. 87 | */ 88 | this.drawText = function (textInfo) { 89 | this.initTime = new Date().getTime(); 90 | /* 91 | * If this.canvas doesn't exist we will try to set it. 92 | * This will be done the first execution time. 93 | */ 94 | if (this.canvas == null) { 95 | if (!this.getCanvas()) { 96 | alert("Incorrect canvas ID!"); 97 | return false; 98 | } 99 | } 100 | /** 101 | * 102 | */ 103 | if (this.bufferCanvas == null) { 104 | this.getBufferCanvas(); 105 | } 106 | /** 107 | * Get or set the cache if a cacheId exist. 108 | */ 109 | if (textInfo.cacheId !== undefined) { 110 | // We add a prefix to avoid name conflicts. 111 | textInfo.cacheId = "ct" + textInfo.cacheId; 112 | // If cache exists: draw text and stop script execution. 113 | if (this.getCache(textInfo.cacheId)) { 114 | if (!textInfo.returnImage) { 115 | this.context.drawImage(this.cacheCanvas[textInfo.cacheId], 0, 0); 116 | } else if (textInfo.returnImage) { 117 | return this.cacheCanvas[textInfo.cacheId]; 118 | } 119 | 120 | this.endTime = new Date().getTime(); 121 | //console.log("cache",(this.endTime-this.initTime)/1000); 122 | return false; 123 | } 124 | } 125 | // A simple check. 126 | if (typeof (textInfo) != "object") { 127 | alert("Invalid text format!"); 128 | return false; 129 | } 130 | // Another simple check 131 | if (!this.isNumber(textInfo.x) || !this.isNumber(textInfo.y)) { 132 | alert("You should specify a correct \"x\" & \"y\" axis value."); 133 | return false; 134 | } 135 | // Reset our cacheCanvas. 136 | this.bufferCanvas.width = this.bufferCanvas.width; 137 | // Set the color. 138 | this.bufferContext.fillStyle = this.fontColor; 139 | // Set the size & font family. 140 | this.bufferContext.font = this.fontWeight + ' ' + this.fontSize + ' ' + this.fontFamily; 141 | // Parse and draw the styled text. 142 | this.drawStyledText(textInfo); 143 | // Cache the result. 144 | if (textInfo.cacheId != undefined) { 145 | this.setCache(textInfo.cacheId); 146 | } 147 | 148 | this.endTime = new Date().getTime(); 149 | //console.log((this.endTime-this.initTime)/1000); 150 | // Draw or return the final image. 151 | if (!textInfo.returnImage) { 152 | this.context.drawImage(this.bufferCanvas, 0, 0); 153 | } else if (textInfo.returnImage) { 154 | return this.bufferCanvas; 155 | } 156 | }; 157 | 158 | /** 159 | * The "painter". This will draw the styled text. 160 | */ 161 | this.drawStyledText = function (textInfo) { 162 | // Save the textInfo into separated vars to work more comfortably. 163 | var text = textInfo.text, x = textInfo.x, y = textInfo.y; 164 | // Needed vars for automatic line break; 165 | var splittedText, xAux, textLines = [], boxWidth = textInfo.boxWidth; 166 | // Declaration of needed vars. 167 | var proFont = [], properties, property, propertyName, propertyValue, atribute; 168 | var classDefinition, proColor, proText, proShadow; 169 | // Loop vars 170 | var i, j, k, n; 171 | 172 | // The main regex. Looks for