wassname/CanvasTextWrapper
1
0
Fork 0
mirror of https://github.com/wassname/CanvasTextWrapper.git synced 2026-06-27 19:29:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

v 0.3.0

Browse Source
This commit is contained in:
Vadim Namniak
2015-01-25 14:42:25 -05:00
parent 1bf607390f
commit 8aebf438a9
7 changed files with 416 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -0,0 +1 @@
.idea/
css/styles.css
+22 -8
View File
@@ -13,7 +13,7 @@ div, header, footer, article {
header, footer, article {
width: 930px;
margin: auto;
background-color: #0D9F69;
background-color: #3299af;
padding: 20px;
}
@@ -55,10 +55,15 @@ article {
vertical-align: middle;
background-color: #fff;
font-weight: 100;
color: #0D9F69;
color: #2E6571;
line-height: 120%;
}
pre.white-block {
padding-left: 0;
padding-bottom: 0;
}
p {
margin: 10px 0;
line-height: 120%;
@@ -66,6 +71,11 @@ p {
h2 {
font-size: 30px;
padding-top: 40px;
}
h2:first-of-type {
padding-top: 10px;
}
h6 {
@@ -83,6 +93,10 @@ h6 {
margin-bottom: 15px;
}
.syntax p {
margin-bottom: 0;
}
.values li {
text-indent: 20px;
list-style: inside circle;
@@ -98,20 +112,20 @@ section > div {
position: relative;
width: 450px;
margin: 15px;
border: 1px solid #0D9F69;
border: 1px solid #3299af;
overflow: hidden;
}
section h2 {
color: #0D9F69;
color: #3299af;
text-indent: 30px;
margin-bottom: 20px;
}
section > div div {
width: 100%;
height: 200px;
background-color: #0D9F69;
height: 240px;
background-color: #3299af;
margin-top: 250px;
padding: 20px;
}
@@ -139,7 +153,7 @@ span, .emph {
strong {
background: #fff;
color: #0D9F69;
color: #3299af;
font-weight: bold;
padding: 0 5px;
}
}
img/bg.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 58 KiB

index.html
+59 -53
View File
@@ -8,35 +8,44 @@
<script src="js/CanvasTextWrapper.js"></script>
<script src="js/options.js"></script>
<script src="js/examples.js"></script>
<title>CanvasTextWrapper.js</title>
<title>CanvasTextWrapper</title>
</head>
<body>
<header>
<p>CanvasTextWrapper.js</p>
<p>CanvasTextWrapper</p>
<p class="description">
JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with
optional alignments and padding.
Pure JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with
alignment and padding.
</p>
</header>
<article>
<h2>Syntax</h2><br/>
<p class="white-block">new CanvasTextWrapper(HTMLCanvasElement, String [, Options]);</p><br/>
<p class="white-block">CanvasTextWrapper(HTMLCanvasElement, String [, Options]);</p><br/>
<div>
<div class="emph">OPTIONS</div>
- is a JavaScript object with the following available properties and values:
<div class="emph">Options</div>
- is an object with the following available properties and values:
</div>
<ul class="syntax">
<li>
<div class="emph">font</div>
(String) - text style that includes font size in px (REQUIRED), weight & family, etc. specified similarly to CSS
font shorthand property
(String) - text style that includes font size in px, weight, font family, etc. Similar to CSS font shorthand
property
</li>
<li>
<div class="emph">lineHeight</div>
(Number or String)
<ul class="values">
<li>number - n times font size where 1 is equivalent to '100%'</li>
<li>"%"</li>
<li>"px"</li>
</ul>
</li>
<li>
<div class="emph">textAlign</div>
(String) - horizontal alignment that applies for each line
(String) - horizontal alignment of each line
<ul class="values">
<li>"left"</li>
<li>"center"</li>
@@ -45,7 +54,7 @@
</li>
<li>
<div class="emph">verticalAlign</div>
(String) - vertical alignment that applies on a whole block of text
(String) - vertical alignment of the whole block of text
<ul class="values">
<li>"top"</li>
<li>"middle"</li>
@@ -54,12 +63,11 @@
</li>
<li>
<div class="emph">paddingX</div>
(Number) - horizontal padding in pixels set equally on both, left and right sides of
the element
(Number) - horizontal padding (in px) set equally on both, left and right sides of the container
</li>
<li>
<div class="emph">paddingY</div>
(Number) - vertical padding in pixels set equally on both, top and bottom sides of the element
(Number) - vertical padding (in px) set equally on both, top and bottom sides of the container
</li>
<li>
<div class="emph">fitParent</div>
@@ -73,7 +81,7 @@
<div class="emph">lineBreak</div>
(String) - text split rule
<ul class="values">
<li>"auto" - text fills the element's width going to a new line on a whole word when no more space</li>
<li>"auto" - text fills padded container going to a next line on a whole word</li>
<li>"word" - each next word will be placed on a new line</li>
</ul>
</li>
@@ -81,61 +89,59 @@
<div class="emph">sizeToFill</div>
(Boolean) - auto font size to fill text container
<ul class="values">
<li>"true" - ignore given font size and resize text to fill its padded container</li>
<li>"false" - use specified or default font size</li>
<li>true - ignore given font size/line height and resize text to fill its padded container</li>
<li>false - use specified or default font size</li>
</ul>
</li>
<li>
<div class="emph">strokeText</div>
(Boolean) - text outline based on context configuration (make sure it doesn't contradict with other context settings such as globalCompositeOperation, etc)
<ul class="values">
<li>"true" - enable text outline</li>
<li>"false" - enable text outline</li>
</ul>
(Boolean) - outline text based on context configuration
</li>
<li>
<div class="emph">justifyLines</div>
(Boolean) - flex spaces between words so all lines match the same width (one-word lines are skipped).
</li>
<p>
NOTE: if a single word is too long to fit the width with specified font size, it will be broken into as
many lines as required on any letter of the word unless <strong>sizeToFill</strong> option is used.
NOTE: if a single word is too long to fit the width with specified font size, it will break on any letter
unless "sizeToFill" option is enabled.
</p>
</ul><br/>
<h2>Defaults</h2><br/>
<p>The default options object which values will be used if a property is not specified or no object is passed:</p>
</ul>
<h2>Default Options</h2><br/>
<pre class="white-block">
{
font: "18px Arial, sans-serif",
textAlign: "left",
verticalAlign: "top",
paddingX: 0,
paddingY: 0,
fitParent: false,
lineBreak: "auto",
sizeToFill: false
<strong>font</strong>: "18px Arial, sans-serif",
<strong>lineHeight</strong>: 1,
<strong>textAlign</strong>: "left",
<strong>verticalAlign</strong>: "top",
<strong>paddingX</strong>: 0,
<strong>paddingY</strong>: 0,
<strong>fitParent</strong>: false,
<strong>lineBreak</strong>: "auto",
<strong>sizeToFill</strong>: false,
<strong>allowNewLine</strong>: true,
<strong>justifyLines</strong>: false
}
</pre>
<br/><br/>
<h2>Usage</h2><br/>
<p>
Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before
using CanvasTextWrapper like so:
Use context settings such as "fillStyle", "lineWidth" or "strokeStyle" before using CanvasTextWrapper like so:
</p>
<p class="white-block">
var canvas = document.createElement('canvas');<br/>
canvas.width = 300;<br/>
canvas.height = 250;<br/>
context = canvas.getContext("2d");<br/>
context.fillStyle = "rgb(255, 255, 255)";<br/>
context.fillRect(0, 0, canvas.width, canvas.height);<br/><br/>
context.globalCompositeOperation = "destination-out";<br/>
var wrapper = new CanvasTextWrapper(canvas, 'Hello'); // default options will apply<br/>
</p>
<br/>
<pre class="white-block">
var canvas = document.getElementById("#canvasText");
canvas.width = 200;
canvas.height = 200;
context = canvas.getContext("2d");
context.lineWidth = 2;
context.strokeStyle = "#ff0000";
CanvasTextWrapper(canvas,"Hello"); //default options will apply
</pre>
<h2>Installation</h2><br/>
<p class="white-block">
bower install canvas-text-wrapper<br/>
npm install canvas-text-wrapper
@@ -148,4 +154,4 @@
&larr;&nbsp;<a href="https://github.com/namniak/CanvasTextWrapper">View on GitHub</a>
</footer>
</body>
</html>
</html>
js/CanvasTextWrapper.js
+246 -169
View File
@@ -1,206 +1,283 @@
/*! CanvasTextWrapper (https://github.com/namniak/CanvasTextWrapper)
* Version: 0.2.0
*
/*! CanvasTextWrapper
* https://github.com/namniak/CanvasTextWrapper
* Version: 0.3.0
* MIT License (http://www.opensource.org/licenses/mit-license.html)
* Copyright (c) 2014 Vadim Namniak
*/
(function() {
'use strict';
'use strict';
var defaultOptions = {
font: '18px Arial, sans-serif',
textAlign: 'left', // each line of text is aligned left
verticalAlign: 'top', // text lines block is aligned top
paddingX: 0, // zero px left & right text padding relative to canvas or parent
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 (given font size is ignored)
strokeText: false // text is stroked according to context configuration.
};
var EL_WIDTH,EL_HEIGHT,MAX_TXT_WIDTH,MAX_TXT_HEIGHT;
window.CanvasTextWrapper = function(canvas, text, opts) {
var defaults = {
font: '18px Arial, sans-serif',
sizeToFill: false, // text is resized to fill the container (given font size is ignored)
lineHeight: 1, // default line height equivalent of '100%'
allowNewLine: true, // breaks text on every new line character '\n'
lineBreak: 'auto', // text fills the element's (canvas or parent) width going to a new line on a whole word
textAlign: 'left', // each line of text is aligned left
verticalAlign: 'top', // text lines block is aligned top
justifyLines: false, // lines are not justified
paddingX: 0, // 0px left & right text padding relatively to canvas or its container
paddingY: 0, // 0px top & bottom text padding relatively to canvas or its container
fitParent: false, // text is set to fit canvas width
strokeText: false // text is stroked according to context configuration
};
if (!(this instanceof CanvasTextWrapper)) {
throw new TypeError('CanvasTextWrapper constructor failed. Use "new" keyword when instantiating.');
}
var CanvasTextWrapper = function(canvas,text,options) {
if (!(this instanceof CanvasTextWrapper)) {
return new CanvasTextWrapper(canvas,text,options);
}
this.canvas = canvas;
this.text = text;
this.canvas = canvas;
this.text = text;
this.context = this.canvas.getContext('2d');
this.context.font = this.font;
this.context.textBaseline = 'bottom';
// set options to specified or default values
for (var property in defaultOptions) {
this[property] = (opts && opts[property]) ? opts[property] : defaultOptions[property];
}
for (var property in defaults) {
if (defaults.hasOwnProperty(property)) {
this[property] = (options && options[property]) ? options[property] : defaults[property];
}
}
// extract font size
this.lineHeight = parseInt(this.font.replace(/^\D+/g, ''), 10) || 18;
EL_WIDTH = (this.fitParent === false) ? this.canvas.width : this.canvas.parentNode.clientWidth;
EL_HEIGHT = (this.fitParent === false) ? this.canvas.height : this.canvas.parentNode.clientHeight;
MAX_TXT_WIDTH = EL_WIDTH - (this.paddingX * 2);
MAX_TXT_HEIGHT = EL_HEIGHT - (this.paddingY * 2);
// validate all set properties
this.validate();
this._init();
};
// basic context settings
this.context = this.canvas.getContext('2d');
this.context.font = this.font;
this.context.textBaseline = 'bottom';
CanvasTextWrapper.prototype = {
_init: function() {
this.fontSize = parseInt(this.font.replace(/^\D+/g,''),10) || 18;
this.textBlockHeight = 0;
this.lines = [];
this.newLineIndexes = [];
this.textPos = {x: 0,y: 0};
this.drawText();
};
this._setFont(this.fontSize);
this._setLineHeight();
this._validate();
this._render();
},
CanvasTextWrapper.prototype = {
_render: function() {
if (this.sizeToFill) {
var numWords = this.text.trim().split(/\s+/).length;
var fontSize = 0;
drawText: function() {
var elementWidth = (this.fitParent === false) ? this.canvas.width : this.canvas.parentNode.clientWidth;
var textPos = {
x: 0,
y: 0
};
do {
this._setFont(++fontSize);
this.lineHeight = this.fontSize;
this._wrap();
} while (this.textBlockHeight < MAX_TXT_HEIGHT && (this.lines.join(' ').split(/\s+/).length == numWords));
if (this.sizeToFill) {
// starting at 1px increase font size by 1px until text block exceeds the height of its padded container or until words break
var elementHeight = ((this.fitParent === false) ? this.canvas.height : this.canvas.parentNode.clientHeight) - (this.paddingX * 2);
var numWords = this.text.trim().split(/\s+/).length;
var fontSize = 0;
do {
this.setFontSize(++fontSize);
var lines = this.getWrappedText(elementWidth);
var textBlockHeight = lines.length * this.lineHeight;
} while (textBlockHeight < elementHeight && lines.join(' ').split(/\s+/).length == numWords);
this._setFont(--fontSize);
this.lineHeight = this.fontSize;
} else {
this._wrap();
}
// use previous font size, not the one that broke the while condition
this.setFontSize(--fontSize);
}
if (this.justifyLines && this.lineBreak === 'auto') {
this._justify();
}
var lines = this.getWrappedText(elementWidth);
var textBlockHeight = lines.length * this.lineHeight;
this._setAlignY();
this._drawText();
},
// set vertical align for the whole text block
this.setTextVerticalAlign(textPos, textBlockHeight);
_setFont: function(fontSize) {
var fontParts = (!this.sizeToFill) ? this.font.split(/\b\d+px\b/i) : this.context.font.split(/\b\d+px\b/i);
this.context.font = fontParts[0] + fontSize + 'px' + fontParts[1];
this.fontSize = fontSize;
},
for (var i = 0; i < lines.length; i++) {
this.setTextHorizontalAlign(this.context, textPos, elementWidth, lines[i]);
_setLineHeight: function() {
if (!isNaN(this.lineHeight)) {
this.lineHeight = this.fontSize * this.lineHeight;
} else if (this.lineHeight.toString().indexOf('px') !== -1) {
this.lineHeight = parseInt(this.lineHeight);
} else if (this.lineHeight.toString().indexOf('%') !== -1) {
this.lineHeight = (parseInt(this.lineHeight) / 100) * this.fontSize;
}
},
textPos.y = parseInt(textPos.y) + parseInt(this.lineHeight);
this.context.fillText(lines[i], textPos.x, textPos.y);
if (this.strokeText) {
this.context.strokeText(lines[i], textPos.x, textPos.y);
}
}
},
_wrap: function() {
if (this.allowNewLine) {
var newLines = this.text.trim().split('\n');
for (var i = 0,idx = 0; i < newLines.length - 1; i++) {
idx += newLines[i].trim().split(/\s+/).length;
this.newLineIndexes.push(idx)
}
}
setFontSize: function(size) {
var fontParts = this.context.font.split(/\b\d+px\b/i);
this.context.font = fontParts[0] + size + 'px' + fontParts[1];
this.lineHeight = size;
},
var words = this.text.trim().split(/\s+/);
this._checkLength(words);
this._breakText(words);
getWrappedText: function(elementWidth) {
var maxTextLength = elementWidth - (this.paddingX * 2);
this.textBlockHeight = this.lines.length * this.lineHeight;
},
var words = this.text.trim().split(/\s+/);
var lines = [];
_checkLength: function(words) {
var testString,tokenLen,sliced,leftover;
this.checkWordsLength(this.context, words, maxTextLength);
this.breakTextIntoLines(this.context, lines, words, maxTextLength);
for (var i = 0; i < words.length; i++) {
testString = '';
tokenLen = this.context.measureText(words[i]).width;
return lines;
},
if (tokenLen > MAX_TXT_WIDTH) {
for (var k = 0; (this.context.measureText(testString + words[i][k]).width <= MAX_TXT_WIDTH) && (k < words[i].length); k++) {
testString += words[i][k];
}
checkWordsLength: function(context, words, maxTextLength) {
for (var i = 0; i < words.length; i++) {
var testString = '';
var tokenLen = context.measureText(words[i]).width;
sliced = words[i].slice(0,k);
leftover = words[i].slice(k);
words.splice(i,1,sliced,leftover);
}
}
},
// check if a word exceeds the element's width
if (tokenLen > maxTextLength) {
for (var k = 0; (context.measureText(testString + words[i][k]).width <= maxTextLength) && (k < words[i].length); k++) {
testString += words[i][k];
}
_breakText: function(words) {
for (var i = 0,j = 0; i < words.length; j++) {
this.lines[j] = '';
// break the word because it's too long
var sliced = words[i].slice(0, k);
var leftover = words[i].slice(k);
words.splice(i, 1, sliced, leftover);
}
}
},
if (this.lineBreak === 'auto') {
while ((this.context.measureText(this.lines[j] + words[i]).width <= MAX_TXT_WIDTH) && (i < words.length)) {
breakTextIntoLines: function(context, lines, words, maxTextLength) {
for (var i = 0, j = 0; i < words.length; j++) {
lines[j] = '';
this.lines[j] += words[i] + ' ';
i++;
if (this.lineBreak === 'auto') {
// put as many full words in a line as can fit element
while ((context.measureText(lines[j] + words[i]).width <= maxTextLength) && (i < words.length)) {
lines[j] += words[i] + ' ';
i++;
}
lines[j] = lines[j].trim();
} else if (this.lineBreak === 'word') {
// put each next word in a new line
lines[j] = words[i];
i++;
}
}
},
if (this.allowNewLine) {
for (var k = 0; k < this.newLineIndexes.length; k++) {
if (this.newLineIndexes[k] === i) {
j++;
this.lines[j] = '';
break;
}
}
}
}
this.lines[j] = this.lines[j].trim();
} else {
this.lines[j] = words[i];
i++;
}
}
},
setTextHorizontalAlign: function(context, textPos, elementWidth, line) {
if (this.textAlign === 'center') {
textPos.x = (elementWidth - context.measureText(line).width) / 2;
} else if (this.textAlign === 'right') {
textPos.x = elementWidth - context.measureText(line).width - this.paddingX;
} else {
textPos.x = this.paddingX;
}
},
_justify: function() {
var maxLen,longestLineIndex,tokenLen;
for (var i = 0; i < this.lines.length; i++) {
tokenLen = this.context.measureText(this.lines[i]).width;
setTextVerticalAlign: function(textPos, textBlockHeight) {
var elementHeight = (this.fitParent === false) ? this.canvas.height : this.canvas.parentNode.clientHeight;
if (!maxLen || tokenLen > maxLen) {
maxLen = tokenLen;
longestLineIndex = i;
}
}
if (this.verticalAlign === 'middle') {
textPos.y = (elementHeight - textBlockHeight) / 2;
} else if (this.verticalAlign === 'bottom') {
textPos.y = elementHeight - textBlockHeight - this.paddingY;
} else {
textPos.y = this.paddingY;
}
},
// fill lines with extra spaces
var numWords,spaceLength,numOfSpaces,num,filler;
var delimiter = '\u200A';
for (i = 0; i < this.lines.length; i++) {
if (i === longestLineIndex) continue;
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 (typeof this.text !== 'string') {
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 (this.textAlign !== 'left' && this.textAlign !== 'center' && this.textAlign !== 'right') {
throw new TypeError('From CanvasTextWrapper(): Unsupported horizontal align value is used. Property "textAlign" can only be set to "left", "center", or "right".');
}
if (this.verticalAlign !== 'top' && this.verticalAlign !== 'middle' && this.verticalAlign !== 'bottom') {
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 (typeof this.fitParent !== 'boolean') {
throw new TypeError('From CanvasTextWrapper(): Property "fitParent" must be set to a Boolean.');
}
if (this.lineBreak !== 'auto' && this.lineBreak !== 'word') {
throw new TypeError('From CanvasTextWrapper(): Unsupported line break value is used. Property "lineBreak" can only be set to "auto", or "word".');
}
if (typeof this.sizeToFill !== 'boolean') {
throw new TypeError('From CanvasTextWrapper(): Property "sizeToFill" must be set to a Boolean.');
}
if (typeof this.strokeText !== 'boolean') {
throw new TypeError('From CanvasTextWrapper(): Property "strokeText" must be set to a Boolean.');
}
}
};
numWords = this.lines[i].trim().split(/\s+/).length;
if (numWords <= 1) continue;
this.lines[i] = this.lines[i].trim().split(/\s+/).join(delimiter);
spaceLength = this.context.measureText(delimiter).width;
numOfSpaces = (maxLen - this.context.measureText(this.lines[i]).width) / spaceLength;
num = numOfSpaces / (numWords - 1);
filler = '';
for (var j = 0; j < num; j++) {
filler += delimiter;
}
this.lines[i] = this.lines[i].trim().split(delimiter).join(filler);
//console.log('numWords:', numWords, 'numOfSpaces:', numOfSpaces, 'num:', num);
}
},
_drawText: function() {
for (var i = 0; i < this.lines.length; i++) {
this._setAlignX(this.lines[i]);
this.textPos.y = parseInt(this.textPos.y) + this.lineHeight;
this.context.fillText(this.lines[i],this.textPos.x,this.textPos.y);
if (this.strokeText) {
this.context.strokeText(this.lines[i],this.textPos.x,this.textPos.y);
}
}
},
_setAlignX: function(line) {
if (this.textAlign == 'center') {
this.textPos.x = (EL_WIDTH - this.context.measureText(line).width) / 2;
} else if (this.textAlign == 'right') {
this.textPos.x = EL_WIDTH - this.context.measureText(line).width - this.paddingX;
} else {
this.textPos.x = this.paddingX;
}
},
_setAlignY: function() {
if (this.verticalAlign == 'middle') {
this.textPos.y = (EL_HEIGHT - this.textBlockHeight) / 2;
} else if (this.verticalAlign == 'bottom') {
this.textPos.y = EL_HEIGHT - this.textBlockHeight - this.paddingY;
} else {
this.textPos.y = this.paddingY;
}
},
_validate: function() {
if (!(this.canvas instanceof HTMLCanvasElement))
throw new TypeError('The first parameter must be an instance of HTMLCanvasElement.');
if (typeof this.text !== 'string')
throw new TypeError('The second parameter must be a string.');
if (isNaN(this.fontSize))
throw new TypeError('Cannot parse "font".');
if (isNaN(this.lineHeight))
throw new TypeError('Cannot parse "lineHeight".');
if (this.textAlign.toLocaleLowerCase() !== 'left' && this.textAlign.toLocaleLowerCase() !== 'center' && this.textAlign.toLocaleLowerCase() !== 'right')
throw new TypeError('Property "textAlign" must be set to either "left", "center", or "right".');
if (this.verticalAlign.toLocaleLowerCase() !== 'top' && this.verticalAlign.toLocaleLowerCase() !== 'middle' && this.verticalAlign.toLocaleLowerCase() !== 'bottom')
throw new TypeError('Property "verticalAlign" must be set to either "top", "middle", or "bottom".');
if (typeof this.justifyLines !== 'boolean')
throw new TypeError('Property "justifyLines" must be set to a Boolean.');
if (isNaN(this.paddingX))
throw new TypeError('Property "paddingX" must be set to a Number.');
if (isNaN(this.paddingY))
throw new TypeError('Property "paddingY" must be set to a Number.');
if (typeof this.fitParent !== 'boolean')
throw new TypeError('Property "fitParent" must be set to a Boolean.');
if (this.lineBreak.toLocaleLowerCase() !== 'auto' && this.lineBreak.toLocaleLowerCase() !== 'word')
throw new TypeError('Property "lineBreak" must be set to either "auto" or "word".');
if (typeof this.sizeToFill !== 'boolean')
throw new TypeError('Property "sizeToFill" must be set to a Boolean.');
if (typeof this.strokeText !== 'boolean')
throw new TypeError('Property "strokeText" must be set to a Boolean.');
}
};
window.CanvasTextWrapper = CanvasTextWrapper;
})();
js/examples.js
+41 -75
View File
@@ -1,85 +1,51 @@
document.onreadystatechange = function() {
if (document.readyState === 'complete') {
'use strict';
if (document.readyState === 'complete') {
(function() {
var container = document.getElementsByTagName('section')[0];
var w = 448;
var h = 250;
var options = optionsArr;
(function() {
var container = document.getElementsByTagName('section')[0];
var w = 448;
var h = 250;
var aspectRatio = 0;
var text = 'Canvas text wrapping example';
createExamples();
var img = new Image();
img.src = 'img/bg.jpg';
img.onload = function() {
aspectRatio = img.naturalWidth / img.naturalHeight;
createExamples();
};
function createExamples() {
var fragment = new DocumentFragment();
var context;
// use options.js file
var options = optionsArr;
for (var i = 0; i < options.length; i++) {
var exampleItem = document.createElement('div');
fragment.appendChild(exampleItem);
function createExamples() {
var fragment = new DocumentFragment();
var context;
var canvas = document.createElement('canvas');
exampleItem.appendChild(canvas);
canvas.width = w;
canvas.height = h;
context = canvas.getContext('2d');
context.lineWidth = 2;
context.strokeStyle = 'red';
CanvasTextWrapper(canvas,(options[i].txt),options[i]);
for (var i = 0; i < options.length; i++) {
var exampleItem = document.createElement('div');
fragment.appendChild(exampleItem);
var hint = document.createElement('div');
exampleItem.appendChild(hint);
var optionsData = '';
// draw canvas image
var canvasImg = document.createElement('canvas');
canvasImg.width = w;
canvasImg.height = h;
context = canvasImg.getContext('2d');
context.drawImage(img, 0, 0, w, w * aspectRatio);
exampleItem.appendChild(canvasImg);
for (var property in options[i]) {
if (options[i].hasOwnProperty(property)) {
if (property == 'txt') continue;
var stringWrapper = (property == 'paddingX' || property == 'paddingY' || property == 'sizeToFill' || property === 'justifyLines' || property === 'allowNewLine' || property === 'strokeText') ? '' : '"';
optionsData += ' <span>' + property + ':</span> ' +
stringWrapper + options[i][property] + stringWrapper + ',<br/>';
}
}
// create canvas mask layer
var canvasMask = document.createElement('canvas');
canvasMask.width = w;
canvasMask.height = h;
context = canvasMask.getContext('2d');
context.fillStyle = 'rgba(255,255,255, 1)';
context.fillRect(0, 0, w, h);
exampleItem.appendChild(canvasMask);
hint.innerHTML = '<h6>CODE:</h6><p>' +
'CanvasTextWrapper(canvas, str, {<br/>' + optionsData + '});' +
'</p>';
}
if (i < options.length -1) {
// create text to be cut out mask layer
context.fillStyle = '#212121';
context.globalCompositeOperation = 'destination-out';
} else {
// make stroke gradient
var gradient=context.createLinearGradient(0,0,canvasImg.width,0);
gradient.addColorStop("0","#ffff00");
gradient.addColorStop("1.0","red");
context.strokeStyle=gradient;
context.lineWidth = 3;
}
// create wrapper
new CanvasTextWrapper(canvasMask, ('#' + (i + 1) + ' ' + text), options[i]);
// create hint code block
var hint = document.createElement('div');
exampleItem.appendChild(hint);
var optionsData = '';
// read used properties
for (var property in options[i]) {
var stringWrapper = (property == 'paddingX' || property == 'paddingY' || property == 'sizeToFill') ? '' : '"';
optionsData += ' <span>' + property + ':</span> ' +
stringWrapper + options[i][property] + stringWrapper + ',<br/>';
}
// print example code
hint.innerHTML = '<h6>CODE:</h6><p>' +
'new CanvasTextWrapper(canvasEl, textStr, {<br/>' + optionsData + '});' +
'</p>';
}
// inject document fragment into actual DOM
container.appendChild(fragment);
}
})();
}
container.appendChild(fragment);
}
})();
}
};
js/options.js
+47 -36
View File
@@ -1,36 +1,47 @@
(function() {
window.optionsArr = [
{
font: 'bold 55px Open Sans, sans-serif'
},
{
font: 'normal 40px Impact, Charcoal, sans-serif',
textAlign: 'center',
paddingY: 10,
lineBreak: 'word'
},
{
font: 'bold 55px Open Sans, sans-serif',
textAlign: 'right',
verticalAlign: 'bottom',
paddingX: 30
},
{
font: 'bold 35px Verdana, Geneva, sans-serif',
textAlign: 'center',
verticalAlign: 'middle'
},
{
textAlign: 'center',
verticalAlign: 'middle',
sizeToFill: true
},
{
font: 'bold 50px Tahoma, Geneva, sans-serif',
textAlign: 'right',
paddingX: 25,
paddingY: 25,
strokeText: true
},
];
})();
var optionsArr = [
{
txt: 'Break text on every next word',
font: 'bold 25px Arial, sans-serif',
textAlign: 'center',
lineBreak: 'word',
lineHeight: 1.6
},
{
txt: 'Center text block horizontally and vertically',
font: 'bold 35px Verdana, Geneva, sans-serif',
textAlign: 'center',
verticalAlign: 'middle'
},
{
txt: 'Resize text automatically to fill its padded container. Given "font" and "lineHeight" properties are ignored',
textAlign: 'center',
verticalAlign: 'middle',
sizeToFill: true,
paddingX: 10,
paddingY: 30
},
{
txt: 'Justify text lines takes effect only with "auto" break line. One-word lines are skipped',
font: 'bold 40px Arial, Geneva, sans-serif',
paddingX: 20,
paddingY: 20,
verticalAlign: 'middle',
textAlign: 'center',
justifyLines: true
},
{
txt: 'Apply text stroke is based on context settings',
font: 'bold 40px Tahoma, Geneva, sans-serif',
textAlign: 'right',
paddingX: 25,
strokeText: true,
lineHeight: '60px'
},
{
txt: 'Use\n new line character "\\n"\n to break lines\nwhere needed',
font: 'bold 30px Tahoma, Geneva, sans-serif',
verticalAlign: 'bottom',
allowNewLine: true,
lineHeight: '200%'
}
];