Commit c8d3e530 authored by Davide Blasutto's avatar Davide Blasutto
Browse files

first commit

parents
# 1.0.0 (29/11/2017)
First release
# words-array
Draws a text in a rectangle on a canvas, on multiple lines.
Initialy developed for [ISBOBackend](https://gitlab.com/davideblasutto/ISBOBackend/).
## Usage
This module exports a single function that draws a text on a canvas' 2d context, breaking it in multiple lines if necessary.
The function also returns the used font size for drawing text.
```javascript
drawMultilineText(text, context, options)
```
### Example
```javascript
const canvas = new Canvas(500, 300)
const drawMultilineText = require('canvas-multiline-text')
const fontSizeUsed = drawMultilineText(
canvas.getContext('2d'),
"Please could you stop the noise, I'm trying to get some rest from all the unborn chicken voices in my head. What's that? What's that?",
{
rect: {
x: 10,
y: 10,
width: canvas.width - 20,
height: canvas.height - 20
},
font: 'Merriweather',
verbose: true,
lineHeight: 1.4,
minFontSize: 15,
maxFontSize: 120
)
console.log('Text drawn with font size: ', fontSizeUsed)
```
### Options
The whole `options` parameter (well) if optional.
* `font` - Used font name or font family. Default is `sans-serif`.
module.exports = function(ctx, text, opts) {
// Default options
if(!opts)
opts = {}
if (!opts.font)
opts.font = 'sans-serif'
if (typeof opts.stroke == 'undefined')
opts.stroke = false
if (typeof opts.verbose == 'undefined')
opts.verbose = false
if (!opts.rect)
opts.rect = {
x: 0,
y: 0,
width: ctx.canvas.width,
height: ctx.canvas.height
}
if (!opts.lineHeight)
opts.lineHeight = 1.1
if (!opts.minFontSize)
opts.minFontSize = 30
if (!opts.maxFontSize)
opts.maxFontSize = 100
// Default log function is console.log - Note: if verbose il false, nothing will be logged anyway
if (!opts.logFunction)
opts.logFunction = function(message) { console.log(message) }
const words = require('words-array')(text)
if (opts.verbose) opts.logFunction('Text contains ' + words.length + ' words')
var lines = []
// Finds max font size which can be used to print whole text in opts.rec
for (var fontSize = opts.minFontSize; fontSize <= opts.maxFontSize; fontSize++) {
// Line height
var lineHeight = fontSize * opts.lineHeight
// Set font for testing with measureText()
ctx.font = " " + fontSize + "px " + opts.font
// Start
var x = opts.rect.x
var y = opts.rect.y + fontSize // It's the bottom line of the letters
lines = []
var line = ""
// Cycles on words
for (var word of words) {
// Add next word to line
var linePlus = line + word + " "
// If added word exceeds rect width...
if (ctx.measureText(linePlus).width > (opts.rect.width)) {
// ..."prints" (save) the line without last word
lines.push({ text: line, x: x, y: y })
// New line with ctx last word
line = word + " "
y += lineHeight
} else {
// ...continues appending words
line = linePlus
}
}
// "Print" (save) last line
lines.push({ text: line, x: x, y: y })
// If bottom of rect is reached then breaks "fontSize" cycle
if (y > opts.rect.height)
break
}
if (opts.verbose) opts.logFunction("Font used: " + ctx.font)
// Print lines
for (var line of lines)
// Fill or stroke
if (opts.stroke)
ctx.strokeText(line.text.trim(), line.x, line.y)
else
ctx.fillText(line.text.trim(), line.x, line.y)
// Returns font size
return fontSize
}
# 1.0.1 (29/11/2017)
First release
# words-array
Converts a string into an array of words. Its supports [CJK](https://en.wikipedia.org/wiki/CJK_characters) strings.
Initialy developed for [ISBOBackend](https://gitlab.com/davideblasutto/ISBOBackend/).
## Usage
This module exports a single function.
### Example
```javascript
const wordsArray = require('words-array')
console.log(JSON.stringify(wordsArray("Please could you stop the noise, I'm trying to get some rest.")))
// Returns ["Please","could","you","stop","the","noise,","I'm","trying","to","get","some","rest."]
require('fs').writeFileSync('asd.txt',JSON.stringify(wordsArray("そこで彼らは,オリーブ山と呼ばれる山からエルサレムに帰った。")))
// Returns ["そ","こ","で","彼","ら","は,","オ","リ","ー",...,"レ","ム","に","帰","っ","た。"]
```
const wordsArray = require('../index.js')
console.log(JSON.stringify(wordsArray("Please could you stop the noise, I'm trying to get some rest.")))
// Returns ["Please","could","you","stop","the","noise,","I'm","trying","to","get","some","rest."]
console.log(JSON.stringify(wordsArray("そこで彼らは,オリーブ山と呼ばれる山からエルサレムに帰った。")))
// Returns ["そ","こ","で","彼","ら","は,","オ","リ","ー","ブ","山","と","呼","ば","れ","る","山","か","ら","エ","ル","サ","レ","ム","に","帰","っ","た。"]
//
// ## Returns array of words in text
// ## For CJK languages almost every char is a word,
// ## for other languages words are separated by spaces
//
module.exports = function(text) {
// Test for CJK characters
if (/[\u3400-\u9FBF]/.test(text)) {
// Contains CJK characters
var words = []
const characters = text.split("");
for (var i = 0; i <= characters.length - 1; i++)
if (!containsPunctations(characters[i + 1])) {
// Next character is "normal"
words.push(characters[i])
} else {
// Next character isn't a single word
words.push(characters[i] + characters[i + 1])
i++;
}
return words
} else {
// Other language
// Converts returns in spaces, removes double spaces
text = text.replace(/(\r\n|\n|\r)/gm," ").replace(/\s+/g," ")
// Simply split by spaces
return text.split(" ")
}
}
//
// ## Returns true if text contains puntaction characters
//
containsPunctations = function(text) {
// Test string against regexp for many punctactions characters, including CJK ones
return /[\uFF01-\uFF07,\u0021,\u003F,\u002E,\u002C,\u003A,\u003B,\uFF1A-\uFF1F,\u3002,\uFF0C-\uFF0E,\u2000-\u206F,\uFFED-\uFFEF,\u0028,\u0029]/.test(text)
}
{
"_from": "words-array",
"_id": "words-array@1.0.1",
"_inBundle": false,
"_integrity": "sha512-hIe554G5rHAIa2HeIPcvl4zzIeS9DCSLjFM6HbqzTEGmyCZVqMffXpxEGZwweT+ZxbkTdNg78YwwzhQsA7jjPw==",
"_location": "/words-array",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "words-array",
"name": "words-array",
"escapedName": "words-array",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/words-array/-/words-array-1.0.1.tgz",
"_shasum": "fcd695587744f9bd1c7fe2a05e9d8f87cdd87bac",
"_spec": "words-array",
"_where": "D:\\Varie\\Sviluppo\\Varie\\canvas-multiline-text",
"author": {
"name": "Davide Blasutto"
},
"bugs": {
"url": "https://gitlab.com/davideblasutto/words-array/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "Converts a string into an array of words. Its supports CJK strings.",
"directories": {
"example": "example"
},
"homepage": "https://gitlab.com/davideblasutto/words-array#README",
"keywords": [
"string",
"words",
"array",
"cjk",
"split",
"unicode"
],
"license": "ISC",
"main": "index.js",
"name": "words-array",
"repository": {
"type": "git",
"url": "git+https://gitlab.com/davideblasutto/words-array.git"
},
"scripts": {
"test": "node example/example.js"
},
"version": "1.0.1"
}
{
"name": "canvas-multiline-text",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"words-array": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/words-array/-/words-array-1.0.1.tgz",
"integrity": "sha512-hIe554G5rHAIa2HeIPcvl4zzIeS9DCSLjFM6HbqzTEGmyCZVqMffXpxEGZwweT+ZxbkTdNg78YwwzhQsA7jjPw=="
}
}
}
{
"name": "canvas-multiline-text",
"version": "1.0.0",
"description": "Draws a text in a rectangle on a canvas, on multiple lines",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://gitlab.com/davideblasutto/canvas-multiline-text.git"
},
"keywords": [
"canvas",
"node-canvas",
"multiline",
"context",
"2d",
"text",
"graphic",
"typography"
],
"author": "Davide Blasutto",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/davideblasutto/canvas-multiline-text/issues"
},
"homepage": "https://gitlab.com/davideblasutto/canvas-multiline-text#README",
"dependencies": {
"words-array": "^1.0.1"
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment