mirror of
https://github.com/wassname/CanvasTextWrapper.git
synced 2026-06-27 19:45:29 +08:00
context fixes + default font size added
This commit is contained in:
Vadim Namniak
@@ -1,5 +1,5 @@
|
||||
/*! CanvasTextWrapper (https://github.com/namniak/CanvasTextWrapper)
|
||||
* Version: 0.1.0
|
||||
* Version: 0.2.0
|
||||
*
|
||||
* MIT License (http://www.opensource.org/licenses/mit-license.html)
|
||||
* Copyright (c) 2014 Vadim Namniak
|
||||
@@ -16,7 +16,7 @@
|
||||
paddingY: 0, // zero px top & bottom text padding relative to canvas or parent
|
||||
fitParent: false, // text is tested to fit canvas width
|
||||
lineBreak: 'auto', // text fills the element's (canvas or parent) width going to a new line on a whole word
|
||||
sizeToFill: false // text is resized to fill the container height (given font size is ignored)
|
||||
sizeToFill: false // text is resized to fill the container (given font size is ignored)
|
||||
};
|
||||
|
||||
window.CanvasTextWrapper = function(canvas, text, opts) {
|
||||
@@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
// extract font size
|
||||
this.lineHeight = parseInt(this.font.replace(/^\D+/g, ''), 10);
|
||||
this.lineHeight = parseInt(this.font.replace(/^\D+/g, ''), 10) || 18;
|
||||
|
||||
// validate all set properties
|
||||
this.validate();
|
||||
@@ -78,10 +78,10 @@
|
||||
this.setTextVerticalAlign(textPos, textBlockHeight);
|
||||
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
this.setTextHorizontalAlign(context, textPos, elementWidth, lines[i]);
|
||||
this.setTextHorizontalAlign(this.context, textPos, elementWidth, lines[i]);
|
||||
|
||||
textPos.y = parseInt(textPos.y) + parseInt(this.lineHeight);
|
||||
context.fillText(lines[i], textPos.x, textPos.y);
|
||||
this.context.fillText(lines[i], textPos.x, textPos.y);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -196,4 +196,4 @@
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
})();
|
||||
Vendored
+2
-2
@@ -1,7 +1,7 @@
|
||||
/*! CanvasTextWrapper (https://github.com/namniak/CanvasTextWrapper)
|
||||
* Version: 0.1.0
|
||||
* Version: 0.2.0
|
||||
*
|
||||
* MIT License (http://www.opensource.org/licenses/mit-license.html)
|
||||
* Copyright (c) 2014 Vadim Namniak
|
||||
*/
|
||||
!function(){"use strict";var a={font:"18px Arial, sans-serif",textAlign:"left",verticalAlign:"top",paddingX:0,paddingY:0,fitParent:!1,lineBreak:"auto",sizeToFill:!1};window.CanvasTextWrapper=function(b,c,d){if(!(this instanceof CanvasTextWrapper))throw new TypeError('CanvasTextWrapper constructor failed. Use "new" keyword when instantiating.');this.canvas=b,this.text=c;for(var e in a)this[e]=d&&d[e]?d[e]:a[e];this.lineHeight=parseInt(this.font.replace(/^\D+/g,""),10),this.validate(),this.context=this.canvas.getContext("2d"),this.context.font=this.font,this.context.textBaseline="bottom",this.drawText()},CanvasTextWrapper.prototype={drawText:function(){var a=this.fitParent===!1?this.canvas.width:this.canvas.parentNode.clientWidth,b={x:0,y:0};if(this.sizeToFill){var c=(this.fitParent===!1?this.canvas.height:this.canvas.parentNode.clientHeight)-2*this.paddingX,d=this.text.trim().split(/\s+/).length,e=0;do{this.setFontSize(++e);var f=this.getWrappedText(a),g=f.length*this.lineHeight}while(c>g&&f.join(" ").split(/\s+/).length==d);this.setFontSize(--e)}var f=this.getWrappedText(a),g=f.length*this.lineHeight;this.setTextVerticalAlign(b,g);for(var h=0;h<f.length;h++)this.setTextHorizontalAlign(context,b,a,f[h]),b.y=parseInt(b.y)+parseInt(this.lineHeight),context.fillText(f[h],b.x,b.y)},setFontSize:function(a){var b=this.context.font.split(/\b\d+px\b/i);this.context.font=b[0]+a+"px"+b[1],this.lineHeight=a},getWrappedText:function(a){var b=a-2*this.paddingX,c=this.text.trim().split(/\s+/),d=[];return this.checkWordsLength(this.context,c,b),this.breakTextIntoLines(this.context,d,c,b),d},checkWordsLength:function(a,b,c){for(var d=0;d<b.length;d++){var e="",f=a.measureText(b[d]).width;if(f>c){for(var g=0;a.measureText(e+b[d][g]).width<=c&&g<b[d].length;g++)e+=b[d][g];var h=b[d].slice(0,g),i=b[d].slice(g);b.splice(d,1,h,i)}}},breakTextIntoLines:function(a,b,c,d){for(var e=0,f=0;e<c.length;f++)if(b[f]="","auto"===this.lineBreak){for(;a.measureText(b[f]+c[e]).width<=d&&e<c.length;)b[f]+=c[e]+" ",e++;b[f]=b[f].trim()}else"word"===this.lineBreak&&(b[f]=c[e],e++)},setTextHorizontalAlign:function(a,b,c,d){b.x="center"===this.textAlign?(c-a.measureText(d).width)/2:"right"===this.textAlign?c-a.measureText(d).width-this.paddingX:this.paddingX},setTextVerticalAlign:function(a,b){var c=this.fitParent===!1?this.canvas.height:this.canvas.parentNode.clientHeight;a.y="middle"===this.verticalAlign?(c-b)/2:"bottom"===this.verticalAlign?c-b-this.paddingY:this.paddingY},validate:function(){if(!(this.canvas instanceof HTMLCanvasElement))throw new TypeError("From CanvasTextWrapper(): Element passed as the first parameter is not an instance of HTMLCanvasElement.");if("string"!=typeof this.text)throw new TypeError("From CanvasTextWrapper(): The second, dedicated for the text, parameter must be a string.");if(isNaN(this.lineHeight))throw new TypeError('From CanvasTextWrapper(): Cannot parse font size as an Integer. Check "font" property\'s value.');if("left"!==this.textAlign&&"center"!==this.textAlign&&"right"!==this.textAlign)throw new TypeError('From CanvasTextWrapper(): Unsupported horizontal align value is used. Property "textAlign" can only be set to "left", "center", or "right".');if("top"!==this.verticalAlign&&"middle"!==this.verticalAlign&&"bottom"!==this.verticalAlign)throw new TypeError('From CanvasTextWrapper(): Unsupported vertical align value is used. Property "verticalAlign" can only be set to "top", "middle", or "bottom".');if(isNaN(this.paddingX))throw new TypeError('From CanvasTextWrapper(): Unsupported horizontal padding value is used. Property "paddingX" must be set to a number');if(isNaN(this.paddingY))throw new TypeError('From CanvasTextWrapper(): Unsupported vertical padding value is used. Property "paddingY" must be set to a number.');if("boolean"!=typeof this.fitParent)throw new TypeError('From CanvasTextWrapper(): Property "fitParent" must be set to a Boolean.');if("auto"!==this.lineBreak&&"word"!==this.lineBreak)throw new TypeError('From CanvasTextWrapper(): Unsupported line break value is used. Property "lineBreak" can only be set to "auto", or "word".');if("boolean"!=typeof this.sizeToFill)throw new TypeError('From CanvasTextWrapper(): Property "sizeToFill" must be set to a Boolean.')}}}();
|
||||
!function(){"use strict";var a={font:"18px Arial, sans-serif",textAlign:"left",verticalAlign:"top",paddingX:0,paddingY:0,fitParent:!1,lineBreak:"auto",sizeToFill:!1};window.CanvasTextWrapper=function(b,c,d){if(!(this instanceof CanvasTextWrapper))throw new TypeError('CanvasTextWrapper constructor failed. Use "new" keyword when instantiating.');this.canvas=b,this.text=c;for(var e in a)this[e]=d&&d[e]?d[e]:a[e];this.lineHeight=parseInt(this.font.replace(/^\D+/g,""),10)||18,this.validate(),this.context=this.canvas.getContext("2d"),this.context.font=this.font,this.context.textBaseline="bottom",this.drawText()},CanvasTextWrapper.prototype={drawText:function(){var a=this.fitParent===!1?this.canvas.width:this.canvas.parentNode.clientWidth,b={x:0,y:0};if(this.sizeToFill){var c=(this.fitParent===!1?this.canvas.height:this.canvas.parentNode.clientHeight)-2*this.paddingX,d=this.text.trim().split(/\s+/).length,e=0;do{this.setFontSize(++e);var f=this.getWrappedText(a),g=f.length*this.lineHeight}while(c>g&&f.join(" ").split(/\s+/).length==d);this.setFontSize(--e)}var f=this.getWrappedText(a),g=f.length*this.lineHeight;this.setTextVerticalAlign(b,g);for(var h=0;h<f.length;h++)this.setTextHorizontalAlign(this.context,b,a,f[h]),b.y=parseInt(b.y)+parseInt(this.lineHeight),this.context.fillText(f[h],b.x,b.y)},setFontSize:function(a){var b=this.context.font.split(/\b\d+px\b/i);this.context.font=b[0]+a+"px"+b[1],this.lineHeight=a},getWrappedText:function(a){var b=a-2*this.paddingX,c=this.text.trim().split(/\s+/),d=[];return this.checkWordsLength(this.context,c,b),this.breakTextIntoLines(this.context,d,c,b),d},checkWordsLength:function(a,b,c){for(var d=0;d<b.length;d++){var e="",f=a.measureText(b[d]).width;if(f>c){for(var g=0;a.measureText(e+b[d][g]).width<=c&&g<b[d].length;g++)e+=b[d][g];var h=b[d].slice(0,g),i=b[d].slice(g);b.splice(d,1,h,i)}}},breakTextIntoLines:function(a,b,c,d){for(var e=0,f=0;e<c.length;f++)if(b[f]="","auto"===this.lineBreak){for(;a.measureText(b[f]+c[e]).width<=d&&e<c.length;)b[f]+=c[e]+" ",e++;b[f]=b[f].trim()}else"word"===this.lineBreak&&(b[f]=c[e],e++)},setTextHorizontalAlign:function(a,b,c,d){b.x="center"===this.textAlign?(c-a.measureText(d).width)/2:"right"===this.textAlign?c-a.measureText(d).width-this.paddingX:this.paddingX},setTextVerticalAlign:function(a,b){var c=this.fitParent===!1?this.canvas.height:this.canvas.parentNode.clientHeight;a.y="middle"===this.verticalAlign?(c-b)/2:"bottom"===this.verticalAlign?c-b-this.paddingY:this.paddingY},validate:function(){if(!(this.canvas instanceof HTMLCanvasElement))throw new TypeError("From CanvasTextWrapper(): Element passed as the first parameter is not an instance of HTMLCanvasElement.");if("string"!=typeof this.text)throw new TypeError("From CanvasTextWrapper(): The second, dedicated for the text, parameter must be a string.");if(isNaN(this.lineHeight))throw new TypeError('From CanvasTextWrapper(): Cannot parse font size as an Integer. Check "font" property\'s value.');if("left"!==this.textAlign&&"center"!==this.textAlign&&"right"!==this.textAlign)throw new TypeError('From CanvasTextWrapper(): Unsupported horizontal align value is used. Property "textAlign" can only be set to "left", "center", or "right".');if("top"!==this.verticalAlign&&"middle"!==this.verticalAlign&&"bottom"!==this.verticalAlign)throw new TypeError('From CanvasTextWrapper(): Unsupported vertical align value is used. Property "verticalAlign" can only be set to "top", "middle", or "bottom".');if(isNaN(this.paddingX))throw new TypeError('From CanvasTextWrapper(): Unsupported horizontal padding value is used. Property "paddingX" must be set to a number');if(isNaN(this.paddingY))throw new TypeError('From CanvasTextWrapper(): Unsupported vertical padding value is used. Property "paddingY" must be set to a number.');if("boolean"!=typeof this.fitParent)throw new TypeError('From CanvasTextWrapper(): Property "fitParent" must be set to a Boolean.');if("auto"!==this.lineBreak&&"word"!==this.lineBreak)throw new TypeError('From CanvasTextWrapper(): Unsupported line break value is used. Property "lineBreak" can only be set to "auto", or "word".');if("boolean"!=typeof this.sizeToFill)throw new TypeError('From CanvasTextWrapper(): Property "sizeToFill" must be set to a Boolean.')}}}();
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "canvas-text-wrapper",
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.0",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"**/*.log",
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "canvas-text-wrapper",
|
||||
"description": "JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with optional alignments and padding.",
|
||||
"version": "0.1.1",
|
||||
"version": "0.2.0",
|
||||
"license": "MIT",
|
||||
"main": "CanvasTextWrapper.min.js",
|
||||
"homepage": "http://namniak.github.io/CanvasTextWrapper/",
|
||||
|
||||
Reference in New Issue
Block a user