diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/.npmignore b/.npmignore index 3c3629e..57165cc 100644 --- a/.npmignore +++ b/.npmignore @@ -1 +1,3 @@ node_modules +examples +bower.json diff --git a/examples/css/reset.css b/examples/css/reset.css deleted file mode 100644 index 5b3efe4..0000000 --- a/examples/css/reset.css +++ /dev/null @@ -1,48 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/examples/css/styles.css b/examples/css/styles.css deleted file mode 100644 index 89a3bae..0000000 --- a/examples/css/styles.css +++ /dev/null @@ -1,136 +0,0 @@ -body { - width: 960px; - margin: auto; - font-family: 'Open Sans', sans-serif; - color: #fff; -} - -div, header, footer, article { - box-sizing: border-box; -} - -header, footer, article { - width: 930px; - margin: auto; - background-color: #0D9F69; - padding: 20px; -} - -header { - font-size: 60px; - font-weight: 700; -} - -.description { - width: 800px; - margin-top: 20px; - font-size: 22px; - font-weight: normal; -} - -footer { - margin-top: 40px; -} - -a { - font-size: 20px; - font-weight: normal; - color: #fff; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -article { - border-top: 1px solid #fff; -} - -.white-block { - display: table-cell; - height: 30px; - padding: 20px; - vertical-align: middle; - background-color: #fff; - font-weight: 100; - color: #0D9F69; - line-height: 120%; -} - -p { - margin: 10px 0; - line-height: 120%; -} - -h2 { - font-size: 30px; -} - -h6 { - font-weight: 700; - text-decoration: underline; - display: inline; -} - -.syntax { - padding: 10px 10px 0 20px; -} - -.syntax > li { - list-style: none; - margin-bottom: 15px; -} - -.values li { - text-indent: 20px; - list-style: inside circle; - line-height: 120%; -} - -section { - margin-top: 40px; -} - -section > div { - display: inline-block; - position: relative; - width: 450px; - margin: 15px; - border: 1px solid #0D9F69; - overflow: hidden; -} - -section h2 { - color: #0D9F69; - text-indent: 30px; - margin-bottom: 20px; -} - -section > div div { - width: 100%; - height: 200px; - background-color: #0D9F69; - margin-top: 250px; - padding: 20px; -} - -canvas, img { - position: absolute; - top: 0; - left: 0; -} - -img { - width: 100%; - z-index: -1; -} - -span { - margin-left: 20px; -} - -span, .emph { - font-weight: 600; - display: inline; -} diff --git a/examples/img/bg.jpg b/examples/img/bg.jpg deleted file mode 100644 index 697e9c3..0000000 Binary files a/examples/img/bg.jpg and /dev/null differ diff --git a/examples/index.html b/examples/index.html deleted file mode 100644 index fcdcacb..0000000 --- a/examples/index.html +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - - - - - - CanvasTextWrapper.js - - -
-

CanvasTextWrapper.js

- -

- JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with - optional alignments and padding. -

-
-
-

Syntax:


- -

new CanvasTextWrapper(HTMLCanvasElement, String [, Options]);


- -
-
OPTIONS
- - is a JavaScript object with the following available properties and values: -
- -
-
-

Defaults & Usage:


- -

The default options object which values will be used if a property is not specified or no object is passed:

- -

- { font: "18px Arial, sans-serif",
-    textAlign: "left",
-    verticalAlign: "top",
-    paddingX: 0,
-    paddingY: 0,
-    fitParent: false,
-    lineBreak: "auto" } -

-
- -

- Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before - using CanvasTextWrapper like so: -

- -

- var canvas = document.createElement('canvas');
- canvas.width = 300;
- canvas.height = 250;
- context = canvas.getContext("2d");
- context.fillStyle = "rgb(255, 255, 255)";
- context.fillRect(0, 0, canvas.width, canvas.height);

- context.globalCompositeOperation = "destination-out";
- var wrapper = new CanvasTextWrapper(canvas, 'Hello'); // default options will apply
-

-
-
-

Examples:

-
- - - \ No newline at end of file diff --git a/examples/js/CanvasTextWrapper.js b/examples/js/CanvasTextWrapper.js deleted file mode 100644 index a974aa6..0000000 --- a/examples/js/CanvasTextWrapper.js +++ /dev/null @@ -1,171 +0,0 @@ -/*! CanvasTextWrapper (https://github.com/namniak/CanvasTextWrapper) - * Version: 0.1.0 - * - * MIT License (http://www.opensource.org/licenses/mit-license.html) - * Copyright (c) 2014 Vadim Namniak - */ - -(function() { - '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 - }; - - window.CanvasTextWrapper = function(canvas, text, opts) { - if (!(this instanceof CanvasTextWrapper)) { - throw new TypeError('CanvasTextWrapper constructor failed. Use "new" keyword when instantiating.'); - } - - this.canvas = canvas; - this.text = text; - - // set options to specified or default values - for (var property in defaultOptions) { - this[property] = (opts && opts[property]) ? opts[property] : defaultOptions[property]; - } - - // extract font size - this.lineHeight = parseInt(this.font.replace(/^\D+/g, ''), 10); - - // validate all set properties - this.validate(); - - // basic context settings - this.context = this.canvas.getContext('2d'); - this.context.font = this.font; - this.context.textBaseline = 'bottom'; - - this.drawText(); - }; - - CanvasTextWrapper.prototype = { - - drawText: function() { - var canvas = this.canvas; - var context = canvas.getContext('2d'); - - var elementWidth = (this.fitParent === false) ? canvas.width : canvas.parentNode.clientWidth; - var maxTextLength = elementWidth - (this.paddingX * 2); - - var words = this.text.split(/\s+/); - var lines = []; - var textPos = { - x: 0, - y: 0 - }; - - this.checkWordsLength(context, words, maxTextLength); - this.breakTextIntoLines(context, lines, words, maxTextLength); - - // height of the broken down into lines text - var textBlockHeight = lines.length * this.lineHeight; - - // set vertical align for the whole text block - this.setTextVerticalAlign(textPos, textBlockHeight); - - for (var i = 0; i < lines.length; i++) { - this.setTextHorizontalAlign(context, textPos, elementWidth, lines[i]); - - textPos.y = parseInt(textPos.y) + parseInt(this.lineHeight); - context.fillText(lines[i], textPos.x, textPos.y); - } - }, - - checkWordsLength: function(context, words, maxTextLength) { - for (var i = 0; i < words.length; i++) { - var testString = ''; - var tokenLen = context.measureText(words[i]).width; - - // 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]; - } - - // 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); - } - } - }, - - breakTextIntoLines: function(context, lines, words, maxTextLength) { - for (var i = 0, j = 0; i < words.length; j++) { - lines[j] = ''; - - 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++; - } - } - }, - - 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; - } - }, - - setTextVerticalAlign: function(textPos, textBlockHeight) { - var elementHeight = (this.fitParent === false) ? this.canvas.height : this.canvas.parentNode.clientHeight; - - 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; - } - }, - - 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".'); - } - } - }; -})(); \ No newline at end of file diff --git a/examples/js/examples.js b/examples/js/examples.js deleted file mode 100644 index 9610094..0000000 --- a/examples/js/examples.js +++ /dev/null @@ -1,76 +0,0 @@ -document.onreadystatechange = function() { - if (document.readyState === 'complete') { - - (function() { - var container = document.getElementsByTagName('section')[0]; - var w = 448; - var h = 250; - var aspectRatio = 0; - var text = 'Canvas text wrapping example'; - - var img = new Image(); - img.src = 'img/bg.jpg'; - img.onload = function() { - aspectRatio = img.naturalWidth / img.naturalHeight; - createExamples(); - }; - - // use options.js file - var options = optionsArr; - - function createExamples() { - var fragment = new DocumentFragment(); - var context; - - for (var i = 0; i < options.length; i++) { - var exampleItem = document.createElement('div'); - fragment.appendChild(exampleItem); - - // 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); - - // 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); - - // create text to be cut out mask layer - context.fillStyle = '#212121'; - context.globalCompositeOperation = 'destination-out'; - - // 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') ? '' : '"'; - optionsData += ' ' + property + ': ' + - stringWrapper + options[i][property] + stringWrapper + ',
'; - } - - // print example code - hint.innerHTML = '
CODE:

' + - 'new CanvasTextWrapper(canvasEl, textStr, {
' + optionsData + '});' + - '

'; - } - - // inject document fragment into actual DOM - container.appendChild(fragment); - } - })(); - } -}; \ No newline at end of file diff --git a/examples/js/options.js b/examples/js/options.js deleted file mode 100644 index 77f6e69..0000000 --- a/examples/js/options.js +++ /dev/null @@ -1,54 +0,0 @@ -(function() { - window.optionsArr = [ - { - font: 'bold 55px Open Sans, sans-serif', - paddingX: 0, - paddingY: 0, - fitParent: false, - lineBreak: 'auto' - }, - { - font: 'normal 40px Open Sans, sans-serif', - textAlign: 'center', - verticalAlign: 'top', - paddingY: 10, - lineBreak: 'word' - }, - { - font: 'bold 55px Open Sans, sans-serif', - textAlign: 'right', - verticalAlign: 'bottom', - paddingX: 30 - }, - { - font: 'bold 35px Open Sans, sans-serif', - textAlign: 'center', - verticalAlign: 'middle' - }, - { - font: 'bold 55px Open Sans, sans-serif', - textAlign: 'right', - verticalAlign: 'top', - paddingX: 15, - paddingY: 5 - }, - { - font: 'bold 45px Open Sans, sans-serif', - textAlign: 'center', - verticalAlign: 'middle', - lineBreak: 'word' - }, - { - font: 'bold 25px Open Sans, sans-serif', - verticalAlign: 'bottom', - paddingX: 10, - paddingY: 60 - }, - { - font: '50px Open Sans, sans-serif', - textAlign: 'right', - verticalAlign: 'middle', - paddingX: 15 - } - ]; -})(); diff --git a/package.json b/package.json index ad55756..64f3dbd 100755 --- a/package.json +++ b/package.json @@ -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.0", + "version": "0.1.1", "license": "MIT", "main": "CanvasTextWrapper.min.js", "homepage": "http://namniak.github.io/CanvasTextWrapper/",