64 Commits

Author SHA1 Message Date
Vadim Namniak 77617bae67 Update bower.json 2015-09-20 20:20:17 -04:00
Vadim Namniak ab03d8fc09 Update package.json 2015-09-20 20:20:01 -04:00
Vadim Namniak 348fd5cfac Update README.md 2015-09-20 20:19:45 -04:00
Vadim ed3fa124d6 added keywords 2015-09-20 20:16:21 -04:00
Vadim 0391cacffa versions 2015-09-19 22:57:07 -04:00
Vadim Namniak 4ae38b6eb8 Update README.md 2015-09-19 22:54:46 -04:00
Vadim eaf4897b0c version updated 2015-09-19 20:18:56 -04:00
Vadim 99ed3fa2fe added license 2015-09-19 20:15:00 -04:00
Vadim Namniak cafea085fd Update README.md 2015-09-19 20:08:28 -04:00
Vadim 7ab02c5b11 fixing options 2015-09-19 20:06:07 -04:00
Vadim c596c91d8d fixed line height 2015-09-19 19:47:37 -04:00
Vadim 72870dff76 refactor 2015-09-19 19:42:34 -04:00
Vadim a5171075ba updated version 2015-09-19 18:12:06 -04:00
Vadim Namniak 5951b330a4 Merge pull request #10 from nickdesaulniers/expose
browserify
2015-09-19 18:01:13 -04:00
Nick Desaulniers ca5a835bec add a simple example, also for testing purposes
Fixes #8
2015-09-18 10:37:25 -07:00
Nick Desaulniers c722fd3520 allow this to be used w/ Browserify 2015-09-18 10:36:52 -07:00
Nick Desaulniers 6891f79753 mark all files as non executable 2015-09-18 10:16:34 -07:00
Vadim Namniak 9515466c5d updated minified file. v 0.3.2 2015-05-06 00:02:06 -04:00
Vadim Namniak 457a58a4f8 uncommitted modules 2015-05-05 23:59:41 -04:00
Vadim Namniak af8face42e got rid of node modules in repo 2015-05-05 23:57:06 -04:00
Vadim Namniak 5f12d60d12 git ignore updates 2015-05-05 23:53:15 -04:00
Vadim Namniak 66da3411c3 updated to v0.3.1 2015-05-05 17:14:54 -04:00
Vadim Namniak a1ba88647e Merge pull request #6 from steoo/master
Fixed bug with numeric value of font-weight
2015-05-05 13:28:55 -04:00
Steoo 13abe2526c Fixed bug with numeric value of font-weight 2015-05-04 22:30:48 +02:00
Vadim Namniak ffcaf3425c Update README.md 2015-01-25 15:27:49 -05:00
Vadim Namniak 365bd4e24c Update README.md 2015-01-25 15:27:19 -05:00
Vadim Namniak 96001e64df Update README.md 2015-01-25 15:26:14 -05:00
Vadim Namniak 49fea5c2bb Update README.md 2015-01-25 15:23:53 -05:00
Vadim Namniak 020d1dee52 Update README.md 2015-01-25 15:22:28 -05:00
Vadim Namniak c75fae5ea0 Update README.md 2015-01-25 15:18:39 -05:00
Vadim Namniak 9b2c460a69 v0.3.0 justifyLines, lineHeight and allowNewLine 2015-01-25 14:53:51 -05:00
Vadim Namniak 055cdaeb13 version updates 2014-10-12 11:04:53 -04:00
Vadim Namniak cfdccc0c61 version update 2014-10-12 11:03:27 -04:00
Vadim Namniak bb707cd508 Update README.md 2014-10-12 10:49:45 -04:00
Vadim Namniak 8dda2cb645 Update README.md 2014-10-12 10:37:29 -04:00
Vadim Namniak 7e3d425769 Update README.md 2014-10-12 01:57:56 -04:00
Vadim Namniak 6e03f629ce Merge pull request #3 from gmjosack/master
Add the ability to stroke text.
2014-10-12 01:32:44 -04:00
Gary M. Josack ebb8908812 Add the ability to stroke text.
This is useful in scenarios where a background is many colors.
2014-10-11 21:33:06 -07:00
Vadim Namniak 30c326ed36 Update README.md 2014-10-08 23:03:57 -04:00
Vadim Namniak f464af8c5d context fixes + default font size added 2014-10-08 22:53:50 -04:00
Vadim Namniak 5b7a7f9cfe Merge pull request #2 from peeinears/master
Added sizeToFill option for resizing text to fill its padded container
2014-10-08 21:34:52 -04:00
Ian Pearce 45a2b83782 Do not break text when sizeToFill is on 2014-10-06 12:15:49 +08:00
Ian Pearce 43c8775359 Run grunt 2014-10-06 03:07:23 +08:00
Ian Pearce 4924f6f06a Slightly DRYer 2014-10-06 03:05:27 +08:00
Ian Pearce 60c009b432 Added sizeToFill option for resizing text to fill its container 2014-10-06 03:00:53 +08:00
Vadim Namniak e5ad6e9e22 Update README.md 2014-06-27 09:11:06 -04:00
Vadim Namniak b6eb83cbbc Update README.md 2014-06-27 09:10:44 -04:00
Vadim Namniak ba409c2f9a Update README.md 2014-06-27 09:10:31 -04:00
Vadim Namniak 9b14e6bc20 Update README.md 2014-06-27 09:09:55 -04:00
namniak ab5ee97446 gitignore update 2014-06-27 02:53:02 -04:00
namniak 68f08dccf0 gitignore update 2014-06-27 02:52:23 -04:00
namniak b86396f979 v0.1.1 2014-06-27 02:48:39 -04:00
Vadim Namniak 53f765b0e8 Update README.md 2014-06-27 02:35:40 -04:00
Vadim Namniak 4d7e9ed627 Delete package.json~ 2014-06-27 02:30:41 -04:00
Vadim Namniak 68a9da4826 Delete .npmignore~ 2014-06-27 02:30:28 -04:00
namniak 9534bbbdf7 added bower & npm repositories 2014-06-27 02:29:15 -04:00
Vadim Namniak d4566c71cf Update README.md 2014-06-27 02:16:45 -04:00
Vadim Namniak c5464dab42 Update README.md 2014-06-27 02:11:03 -04:00
Vadim Namniak c18627bd6a Delete bower.json~ 2014-06-27 01:44:38 -04:00
namniak a884a840db v0.1.0 2014-06-27 01:43:51 -04:00
Vadim Namniak c53c170d5c Delete bower.json 2014-06-27 01:07:49 -04:00
Vadim Namniak 19d9b83fea Delete package.json 2014-06-27 01:07:42 -04:00
Vadim Namniak 2361b45226 Delete CanvasTextWrapper.min.js 2014-06-27 01:07:30 -04:00
Vadim Namniak f2f142e81b Delete CanvasTextWrapper.js 2014-06-27 01:07:18 -04:00
15 changed files with 187 additions and 467 deletions
+1 -1
View File
@@ -1,2 +1,2 @@
.idea/
node_modules/
node_modules/
+3
View File
@@ -0,0 +1,3 @@
node_modules
examples
bower.json
@@ -1,3 +1,10 @@
/*! CanvasTextWrapper
* https://github.com/namniak/CanvasTextWrapper
* Version: 0.4.0
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*/
(function (root) {
function CanvasTextWrapper(canvas, text, options) {
@@ -66,7 +73,6 @@
setFont(--fontSize);
lineHeight = fontSize;
wrap();
} else {
wrap();
}
+6
View File
@@ -0,0 +1,6 @@
/*! CanvasTextWrapper
* https://github.com/namniak/CanvasTextWrapper
* Version: 0.4.0
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*/
!function(a){function b(a,b,c){"use strict";function d(){t=q.font.match(/\d+(px|em|%)/g)?+q.font.match(/\d+(px|em|%)/g)[0].match(/\d+/g):18,u=0,v=[],w=[],x={x:0,y:0},f(t),g(),o(),e()}function e(){if(q.sizeToFill){var a=b.trim().split(/\s+/).length,c=0;do f(++c),y=c,h();while(C>u&&v.join(" ").split(/\s+/).length==a);f(--c),y=c}else h();q.justifyLines&&"auto"===q.lineBreak&&k(),n(),l()}function f(a){var b=q.sizeToFill?s.font.split(/\b\d+px\b/i):q.font.split(/\b\d+px\b/i);s.font=b[0]+a+"px"+b[1]}function g(){isNaN(q.lineHeight)?-1!==q.lineHeight.toString().indexOf("px")?y=parseInt(q.lineHeight):-1!==q.lineHeight.toString().indexOf("%")&&(y=parseInt(q.lineHeight)/100*t):y=t*q.lineHeight}function h(){if(q.allowNewLine)for(var a=b.trim().split("\n"),c=0,d=0;c<a.length-1;c++)d+=a[c].trim().split(/\s+/).length,w.push(d);var e=b.trim().split(/\s+/);i(e),j(e),u=v.length*y}function i(a){for(var b,c,d,e,f=0;f<a.length;f++)if(b="",c=s.measureText(a[f]).width,c>B){for(var g=0;s.measureText(b+a[f][g]).width<=B&&g<a[f].length;g++)b+=a[f][g];d=a[f].slice(0,g),e=a[f].slice(g),a.splice(f,1,d,e)}}function j(a){for(var b=0,c=0;b<a.length;c++)if(v[c]="","auto"===q.lineBreak){for(;s.measureText(v[c]+a[b]).width<=B&&b<a.length;)if(v[c]+=a[b]+" ",b++,q.allowNewLine)for(var d=0;d<w.length;d++)if(w[d]===b){c++,v[c]="";break}v[c]=v[c].trim()}else v[c]=a[b],b++}function k(){for(var a,b,c,d=0;d<v.length;d++)c=s.measureText(v[d]).width,(!a||c>a)&&(a=c,b=d);var e,f,g,h,i,j="";for(d=0;d<v.length;d++)if(d!==b&&(e=v[d].trim().split(/\s+/).length,!(1>=e))){v[d]=v[d].trim().split(/\s+/).join(j),f=s.measureText(j).width,g=(a-s.measureText(v[d]).width)/f,h=g/(e-1),i="";for(var k=0;h>k;k++)i+=j;v[d]=v[d].trim().split(j).join(i)}}function l(){for(var a=0;a<v.length;a++)m(v[a]),x.y=parseInt(x.y)+y,s.fillText(v[a],x.x,x.y),q.strokeText&&s.strokeText(v[a],x.x,x.y)}function m(a){"center"==q.textAlign?x.x=(z-s.measureText(a).width)/2:"right"==q.textAlign?x.x=z-s.measureText(a).width-q.paddingX:x.x=q.paddingX}function n(){"middle"==q.verticalAlign?x.y=(A-u)/2:"bottom"==q.verticalAlign?x.y=A-u-q.paddingY:x.y=q.paddingY}function o(){if(!(a instanceof HTMLCanvasElement))throw new TypeError("The first parameter must be an instance of HTMLCanvasElement.");if("string"!=typeof b)throw new TypeError("The second parameter must be a string.");if(isNaN(t))throw new TypeError('Cannot parse "font".');if(isNaN(y))throw new TypeError('Cannot parse "lineHeight".');if("left"!==q.textAlign.toLocaleLowerCase()&&"center"!==q.textAlign.toLocaleLowerCase()&&"right"!==q.textAlign.toLocaleLowerCase())throw new TypeError('Property "textAlign" must be set to either "left", "center", or "right".');if("top"!==q.verticalAlign.toLocaleLowerCase()&&"middle"!==q.verticalAlign.toLocaleLowerCase()&&"bottom"!==q.verticalAlign.toLocaleLowerCase())throw new TypeError('Property "verticalAlign" must be set to either "top", "middle", or "bottom".');if("boolean"!=typeof q.justifyLines)throw new TypeError('Property "justifyLines" must be set to a Boolean.');if(isNaN(q.paddingX))throw new TypeError('Property "paddingX" must be set to a Number.');if(isNaN(q.paddingY))throw new TypeError('Property "paddingY" must be set to a Number.');if("boolean"!=typeof q.fitParent)throw new TypeError('Property "fitParent" must be set to a Boolean.');if("auto"!==q.lineBreak.toLocaleLowerCase()&&"word"!==q.lineBreak.toLocaleLowerCase())throw new TypeError('Property "lineBreak" must be set to either "auto" or "word".');if("boolean"!=typeof q.sizeToFill)throw new TypeError('Property "sizeToFill" must be set to a Boolean.');if("boolean"!=typeof q.strokeText)throw new TypeError('Property "strokeText" must be set to a Boolean.')}var p={font:"18px Arial, sans-serif",sizeToFill:!1,lineHeight:1,allowNewLine:!0,lineBreak:"auto",textAlign:"left",verticalAlign:"top",justifyLines:!1,paddingX:0,paddingY:0,fitParent:!1,strokeText:!1},q={};for(var r in p)p.hasOwnProperty(r)&&(q[r]=c&&c[r]?c[r]:p[r]);var s=a.getContext("2d");s.font=q.font,s.textBaseline="bottom";var t,u,v,w,x,y,z=q.fitParent===!1?a.width:a.parentNode.clientWidth,A=q.fitParent===!1?a.height:a.parentNode.clientHeight,B=z-2*q.paddingX,C=A-2*q.paddingY;d()}"module"in a&&"exports"in module?module.exports=b:a.CanvasTextWrapper=b}(this);
+27
View File
@@ -0,0 +1,27 @@
module.exports = function (grunt) {
var saveLicense = require('uglify-save-license');
// project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
my_target: {
options: {
preserveComments: saveLicense
},
src: ['CanvasTextWrapper.js'],
dest: 'CanvasTextWrapper.min.js'
}
}
});
// load plugins
grunt.loadNpmTasks('uglify-save-license');
grunt.loadNpmTasks('grunt-contrib-uglify');
// default tasks.
grunt.registerTask('default', [
'uglify'
]);
};
+20
View File
@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2015 Vadim Namniak
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
OR OTHER DEALINGS IN THE SOFTWARE.
+66
View File
@@ -0,0 +1,66 @@
CanvasTextWrapper
=================
# Syntax
```
CanvasTextWrapper(HTMLCanvasElement, String [, options]);
```
```options``` - is an object with the following available properties and values:
- ```font:``` (String) - text style that includes font size in px, font weight, font family, etc. Similar to CSS font shorthand property
- ```lineHeight:``` (String or Number) - Number means n times font size where 1 is equivalent to '100%'. Also the property can be set in "%" or "px" using String
- ```textAlign: "left" | "center" | "right"``` - horizontal alignment of each line
- ```verticalAlign: "top" | "middle" | "bottom"``` - vertical alignment of the whole text block
- ```paddingX:``` (Number) - horizontal padding (in px) set equally on both, left and right sides
- ```paddingY:``` (Number) - vertical padding (in px) set equally on both, top and bottom sides
- ```fitParent:``` (Boolean) - if enabled, text will fit canvas container's width instead of canvas own width
- ```lineBreak: "auto" | "word"``` - text split rule. When using ```"auto"```, text goes to a next line on a whole word when there's no more room. If ```"word"``` is set as value, each next word will be placed on a new line.
- ```sizeToFill:``` (Boolean) - ignore given font size and line height and resize text to fill its padded container
- ```strokeText:``` (Boolean) - outline text based on context configuration
- ```justifyLines:``` (Boolean) - if enabled, all lines match the same width with flexed spaces between words (one-word lines are ignored).
- ```allowNewLine:``` (Boolean) if enabled, the text breaks on every new line character "\n" otherwise it'll be considered as a space
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.
# Defaults
```
{
font: "18px Arial, sans-serif",
lineHeight: 1,
textAlign: "left",
verticalAlign: "top",
paddingX: 0,
paddingY: 0,
fitParent: false,
lineBreak: "auto",
strokeText: false
sizeToFill: false,
allowNewLine: true,
justifyLines: false
}
```
# Usage
Configure context settings properties such as "fillStyle", "lineWidth" or "strokeStyle" before using CanvasTextWrapper like so:
```
var CanvasTextWrapper = require('canvas-text-wrapper').CanvasTextWrapper;
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
```
# Examples
http://namniak.github.io/CanvasTextWrapper/
# Installation
```
bower install canvas-text-wrapper
npm i canvas-text-wrapper
```
+18
View File
@@ -0,0 +1,18 @@
{
"name": "canvas-text-wrapper",
"version": "0.4.3",
"ignore": [
"**/.*",
"**/*.log",
"**/*.json",
"Gruntfile.js",
"examples",
"node_modules",
"README.md"
],
"repository": {
"type": "git",
"url": "git://github.com/namniak/CanvasTextWrapper.git"
},
"homepage": "http://namniak.github.io/CanvasTextWrapper/"
}
-48
View File
@@ -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;
}
-159
View File
@@ -1,159 +0,0 @@
body {
width: 960px;
margin: auto;
font-family: 'Open Sans', sans-serif;
color: #fff;
line-height: 140%;
}
div, header, footer, article {
box-sizing: border-box;
}
header, footer, article {
width: 930px;
margin: auto;
background-color: #3299af;
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: #2E6571;
line-height: 120%;
}
pre.white-block {
padding-left: 0;
padding-bottom: 0;
}
p {
margin: 10px 0;
line-height: 120%;
}
h2 {
font-size: 30px;
padding-top: 40px;
}
h2:first-of-type {
padding-top: 10px;
}
h6 {
font-weight: 700;
text-decoration: underline;
display: inline;
}
.syntax {
padding: 10px 10px 0 20px;
}
.syntax > li {
list-style: none;
margin-bottom: 15px;
}
.syntax p {
margin-bottom: 0;
}
.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 #3299af;
overflow: hidden;
}
section h2 {
color: #3299af;
text-indent: 30px;
margin-bottom: 20px;
}
section > div div {
width: 100%;
height: 240px;
background-color: #3299af;
margin-top: 250px;
padding: 20px;
}
canvas, img {
position: absolute;
top: 0;
left: 0;
}
img {
width: 100%;
z-index: -1;
}
span {
margin-left: 20px;
margin-right: 5px;
}
span, .emph {
font-weight: 600;
display: inline;
}
strong {
background: #fff;
color: #3299af;
font-weight: bold;
padding: 0 5px;
}
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="CanvasTextWrapper.js"></script>
<script >
var ctx = document.createElement('canvas').getContext('2d');
ctx.canvas.width = ctx.canvas.height = 200;
CanvasTextWrapper(ctx.canvas, "hello world how long can this be????");
document.addEventListener('DOMContentLoaded', function () {
document.body.appendChild(ctx.canvas);
});
</script>
</head>
<body>
</body>
</html>
-160
View File
@@ -1,160 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/CanvasTextWrapper.js"></script>
<script src="js/options.js"></script>
<script src="js/examples.js"></script>
<title>CanvasTextWrapper</title>
</head>
<body>
<header>
<p>CanvasTextWrapper</p>
<p class="description">
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">CanvasTextWrapper(HTMLCanvasElement, String [, Options]);</p><br/>
<div>
<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, 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 of each line
<ul class="values">
<li>"left"</li>
<li>"center"</li>
<li>"right"</li>
</ul>
</li>
<li>
<div class="emph">verticalAlign</div>
(String) - vertical alignment of the whole text block
<ul class="values">
<li>"top"</li>
<li>"middle"</li>
<li>"bottom"</li>
</ul>
</li>
<li>
<div class="emph">paddingX</div>
(Number) - horizontal padding (in px) set equally on both, left and right sides
</li>
<li>
<div class="emph">paddingY</div>
(Number) - vertical padding (in px) set equally on both, top and bottom sides
</li>
<li>
<div class="emph">fitParent</div>
(Boolean) - parameter that controls which element to fit
<ul class="values">
<li>true - fit canvas parent's width instead of canvas own width</li>
<li>false - fit canvas width</li>
</ul>
</li>
<li>
<div class="emph">lineBreak</div>
(String) - text split rule
<ul class="values">
<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>
<li>
<div class="emph">sizeToFill</div>
(Boolean) - auto font size to fill text container
<ul class="values">
<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) - if enabled, all lines match the same width with flexed spaces between words (one-word lines are
ignored)
</li>
<li>
<div class="emph">justifyLines</div>
(Boolean) - if enabled, text breaks on every new line character "\n"
</li>
<p>
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>
<h2>Default Options</h2><br/>
<pre class="white-block">
{
<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,
<strong>strokeText</strong>: false
}
</pre>
<h2>Usage</h2><br/>
<p>
Configure context settings properties such as "fillStyle", "lineWidth" or "strokeStyle" before using
CanvasTextWrapper like so:
</p>
<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
</p>
</article>
<section>
<h2>Examples</h2>
</section>
<footer>
&larr;&nbsp;<a href="https://github.com/namniak/CanvasTextWrapper">View on GitHub</a>
</footer>
</body>
</html>
-51
View File
@@ -1,51 +0,0 @@
document.onreadystatechange = function() {
'use strict';
if (document.readyState === 'complete') {
(function() {
var container = document.getElementsByTagName('section')[0];
var w = 448;
var h = 250;
var options = model;
createExamples();
function createExamples() {
var fragment = new DocumentFragment();
var context;
for (var i = 0; i < options.length; i++) {
var exampleItem = document.createElement('div');
fragment.appendChild(exampleItem);
var canvas = document.createElement('canvas');
exampleItem.appendChild(canvas);
canvas.width = w;
canvas.height = h;
context = canvas.getContext('2d');
context.lineWidth = 1;
context.strokeStyle = 'yellow';
CanvasTextWrapper(canvas,(options[i].txt),options[i]);
var hint = document.createElement('div');
exampleItem.appendChild(hint);
var optionsData = '';
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/>';
}
}
hint.innerHTML = '<h6>CODE:</h6><p>' +
'CanvasTextWrapper(canvas, str, {<br/>' + optionsData + '});' +
'</p>';
}
container.appendChild(fragment);
}
})();
}
};
-47
View File
@@ -1,47 +0,0 @@
var model = [
{
txt: 'Break text on every next word',
font: 'italic 800 25px Arial, sans-serif',
textAlign: 'center',
lineBreak: 'word',
lineHeight: "160%"
},
{
txt: 'Center text block horizontally and vertically',
font: 'bold 35px Arial, 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. Single word lines are skipped',
font: 'bold 40px Arial, sans-serif',
paddingX: 20,
paddingY: 20,
verticalAlign: 'middle',
textAlign: 'center',
justifyLines: true
},
{
txt: 'Apply text stroke is based on context settings',
font: 'bold 40px Arial, 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 Arial, sans-serif',
verticalAlign: 'bottom',
allowNewLine: true,
lineHeight: '200%'
}
];
+21
View File
@@ -0,0 +1,21 @@
{
"name": "canvas-text-wrapper",
"description": "Pure JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with alignment and padding.",
"version": "0.4.3",
"license": "MIT",
"main": "CanvasTextWrapper.min.js",
"keywords": ["canvas", "canvas text", " text", "split"],
"homepage": "http://namniak.github.io/CanvasTextWrapper/",
"repository": {
"type": "git",
"url": "https://github.com/namniak/CanvasTextWrapper"
},
"author": "Vadim Namniak <vnamnyak@gmail.com> (https://github.com/namniak)",
"bugs": {
"url": "https://github.com/namniak/CanvasTextWrapper/issues"
},
"devDependencies": {
"grunt-contrib-uglify": "^0.9.1",
"uglify-save-license": "^0.4.1"
}
}