mirror of
https://github.com/wassname/CanvasTextWrapper.git
synced 2026-06-27 16:13:33 +08:00
fixed 'sizeToFill' and added test
This commit is contained in:
Vadim
@@ -73,6 +73,7 @@
|
||||
|
||||
setFont(--fontSize);
|
||||
lineHeight = fontSize;
|
||||
wrap();
|
||||
} else {
|
||||
wrap();
|
||||
}
|
||||
|
||||
Vendored
+1
-1
@@ -3,4 +3,4 @@
|
||||
* 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);
|
||||
!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,h()}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);
|
||||
@@ -1,7 +1,7 @@
|
||||
CanvasTextWrapper
|
||||
=================
|
||||
|
||||
# Syntax
|
||||
## Syntax
|
||||
```
|
||||
CanvasTextWrapper(HTMLCanvasElement, String [, options]);
|
||||
```
|
||||
@@ -23,7 +23,7 @@ CanvasTextWrapper(HTMLCanvasElement, String [, options]);
|
||||
|
||||
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
|
||||
## Default options
|
||||
```
|
||||
{
|
||||
font: "18px Arial, sans-serif",
|
||||
@@ -41,9 +41,10 @@ NOTE: if a single word is too long to fit the width with specified font size, it
|
||||
}
|
||||
```
|
||||
|
||||
# Usage
|
||||
## 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");
|
||||
@@ -55,12 +56,15 @@ context.strokeStyle = "#ff0000";
|
||||
CanvasTextWrapper(canvas,"Hello"); //default options will apply
|
||||
```
|
||||
|
||||
# Examples
|
||||
http://namniak.github.io/CanvasTextWrapper/
|
||||
## Test
|
||||
In terminal go to CanvasTextWrapper folder and run ```npm t```
|
||||
|
||||
# Installation
|
||||
|
||||
## Examples
|
||||
[Demo](http://namniak.github.io/CanvasTextWrapper/)
|
||||
|
||||
## Installation
|
||||
```
|
||||
bower install canvas-text-wrapper
|
||||
npm i canvas-text-wrapper
|
||||
npm i canvas-text-wrapper --save
|
||||
```
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<!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>
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
"bugs": {
|
||||
"url": "https://github.com/namniak/CanvasTextWrapper/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "beefy test/test.js --live --open"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt-contrib-uglify": "^0.9.1",
|
||||
"uglify-save-license": "^0.4.1"
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
var CanvasTextWrapper = require('../CanvasTextWrapper').CanvasTextWrapper;
|
||||
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
body.style.margin = 0;
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = 600;
|
||||
canvas.height = 600;
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.left = '50%';
|
||||
canvas.style.top = '50%';
|
||||
canvas.style.transform = 'translateX(-50%) translateY(-50%)';
|
||||
|
||||
body.appendChild(canvas);
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
||||
gradient.addColorStop('0.2', 'magenta');
|
||||
gradient.addColorStop('0.5', 'blue');
|
||||
gradient.addColorStop('0.7', 'purple');
|
||||
ctx.fillStyle = gradient;
|
||||
|
||||
var opts = {
|
||||
sizeToFill: true,
|
||||
textAlign: 'center',
|
||||
verticalAlign: 'middle'
|
||||
};
|
||||
|
||||
CanvasTextWrapper(canvas, 'What an awesome library!', opts);
|
||||
Reference in New Issue
Block a user