text-canvas
Version:
Renders wrapped text to a 2D canvas element.
10 lines (9 loc) • 3.78 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.TextCanvas=e()}(this,function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}/**
* @name TextCanas
* @desc Renders wrapped text to a 2D canvas element.
* @author Luis Rodrigues (http://www.luisrodriguesweb.com)
* @version 0.1.3-alpha
* @license MIT
*/
var e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},i=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),n=function(){function n(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments[2];t(this,n),this._style={fontFamily:"sans-serif",fontStyle:"normal",fontWeight:"normal",fontVariant:"normal",fontSize:16,textAlign:"left",textBaseline:"bottom",textColor:"black",wordWrap:!1},this.text=e,this.style=i,this.resolution=r,this.createCanvas()}return i(n,[{key:"createCanvas",value:function(){return this._canvas=document.createElement("canvas"),this._ctx=this._canvas.getContext("2d"),this._canvas}},{key:"applyStyles",value:function(){this._ctx.scale(this._resolution,this._resolution);var t=this._style;this._ctx.font=t.fontStyle+" "+t.fontVariant+" "+t.fontWeight+" "+t.fontSize+"px "+t.fontFamily,this._ctx.textAlign=t.textAlign,this._ctx.textBaseline=t.textBaseline,this._ctx.fillStyle=t.textColor}},{key:"createLines",value:function(){for(var t=this._text.split("\n"),e=this._ctx.measureText(" "),i=[],n=this._style.lineHeight||1.2*this._style.fontSize,r={text:"",width:0,height:n},s=void 0,o=void 0,h=0;h<t.length;h++){s=t[h].split(" ");for(var a=0;a<s.length;a++)o=this._ctx.measureText(s[a]),this._style.wordWrap&&r.text&&r.width+o.width>this._style.wordWrap&&(r.text=r.text.trim(),r.width-=e.width,i.push(r),r={text:"",width:0,height:n}),r.width+=o.width+e.width,r.text+=s[a]+" ";i.push(r),r={text:"",width:0,height:n}}return i}},{key:"getCanvasDimensions",value:function(t){for(var e=0,i=0,n=0;n<t.length;n++)e=Math.max(e,t[n].width),i+=t[n].height;return{width:Math.ceil(e),height:Math.ceil(i)}}},{key:"render",value:function(){this.applyStyles();var t=this.createLines(),e=this.getCanvasDimensions(t);this._canvas.width=e.width*this._resolution,this._canvas.height=e.height*this._resolution,this.applyStyles(),this._ctx.clearRect(0,0,e.width,e.height);var i=0,n=0;"center"===this._style.textAlign?i=e.width/2:"right"===this._style.textAlign&&(i=e.width);for(var r=0;r<t.length;r++)n+=t[r].height,this._ctx.fillText(t[r].text,i,n);return this._canvas}},{key:"text",get:function(){return this._text},set:function(t){if("string"!=typeof t)throw new TypeError(this.constructor.name+": 'text' must be a string.");if(t=t.trim(),!t)throw new RangeError(this.constructor.name+": 'text' is empty.");return this._text=t,this._text}},{key:"style",get:function(){return this._style},set:function(t){return this._style=e(this._style,t),this._style}},{key:"resolution",get:function(){return this._resolution},set:function(t){if(void 0!==t&&Number.isNaN(t))throw new TypeError(this.constructor.name+": 'resolution' must be a number.");if(0===t)throw new RangeError(this.constructor.name+": 'resolution' must be greater than 0.");if(t=t||window.devicePixelRatio||1,t=parseFloat(t),Math.sign(t)===-1)throw new RangeError(this.constructor.name+": 'resolution' must be a positive number.");return this._resolution=t,this._resolution}}]),n}();return n});
//# sourceMappingURL=text-canvas.min.js.map