thedesk/app/node_modules/@jimp/plugin-print/README.md

171 lines
4.2 KiB
Markdown
Raw Normal View History

2019-09-13 00:38:13 +10:00
<div align="center">
<img width="200" height="200"
src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/crayon.png">
<h1>@jimp/plugin-print</h1>
<p>Print text on an image.</p>
</div>
Jimp supports basic typography using BMFont format (.fnt) even ones in different languages! Just find a bitmap font that is suitable [bitmap fonts](https://en.wikipedia.org/wiki/Bitmap_fonts).
Online tools are also available to convert TTF fonts to BMFont format. They can be used to create color font or sprite packs.
:star: [Littera](http://kvazars.com/littera/)
:star: [Hiero](https://github.com/libgdx/libgdx/wiki/Hiero)
## Included Fonts
- `Jimp.FONT_SANS_8_BLACK`
- `Jimp.FONT_SANS_10_BLACK`
- `Jimp.FONT_SANS_12_BLACK`
- `Jimp.FONT_SANS_14_BLACK`
- `Jimp.FONT_SANS_16_BLACK`
- `Jimp.FONT_SANS_32_BLACK`
- `Jimp.FONT_SANS_64_BLACK`
- `Jimp.FONT_SANS_128_BLACK`
- `Jimp.FONT_SANS_8_WHITE`
- `Jimp.FONT_SANS_16_WHITE`
- `Jimp.FONT_SANS_32_WHITE`
- `Jimp.FONT_SANS_64_WHITE`
- `Jimp.FONT_SANS_128_WHITE`
## loadFont
Loads a bitmap font from a file
- @param {string} file the file path of a .fnt file
- @param {function(Error, Jimp)} cb (optional) a function to call when the font is loaded
- @returns {Promise} a promise
```js
import jimp from 'jimp';
async function main() {
const font = await jimp.read(jimp.FONT_SANS_32_BLACK);
}
main();
```
## print
Draws a text on a image on a given boundary
- @param {Jimp} font a bitmap font loaded from `Jimp.loadFont` command
- @param {number} x the x position to start drawing the text
- @param {number} y the y position to start drawing the text
- @param {string} text the text to draw (string or object with `text`, `alignmentX`, and/or `alignmentY`)
- @param {number} maxWidth (optional) the boundary width to draw in
- @param {number} maxHeight (optional) the boundary height to draw in - @param {function(Error, Jimp)} cb (optional) a function to call when the text is written
```js
import Jimp from 'jimp';
async function main() {
const font = await Jimp.loadFont(Jimp.FONT_SANS_32_BLACK);
const image = await Jimp.read(1000, 1000, 0x0000ffff);
image.print(font, 10, 10, 'Hello World!');
}
main();
```
### Alignment
Alignment modes are supported by replacing the `str` argument with an object containing `text`, `alignmentX` and `alignmentY`. `alignmentX` defaults to `Jimp.HORIZONTAL_ALIGN_LEFT` and `alignmentY` defaults to `Jimp.VERTICAL_ALIGN_TOP`.
You can align text using the following constants.
```js
Jimp.HORIZONTAL_ALIGN_LEFT;
Jimp.HORIZONTAL_ALIGN_CENTER;
Jimp.HORIZONTAL_ALIGN_RIGHT;
Jimp.VERTICAL_ALIGN_TOP;
Jimp.VERTICAL_ALIGN_MIDDLE;
Jimp.VERTICAL_ALIGN_BOTTOM;
```
Default align modes for `image.print` are:
```js
{
alignmentX: Jimp.HORIZONTAL_ALIGN_LEFT,
alignmentY: Jimp.VERTICAL_ALIGN_TOP
}
```
```js
const font = await Jimp.loadFont(pathOrURL);
// prints 'Hello world!' on an image, middle and center-aligned
image.print(
font,
x,
y,
{
text: 'Hello world!',
alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
},
maxWidth,
maxHeight
);
```
__Note__: although `maxWidth` and `maxHeight` parameters are optional to `print()`, they are needed to correctly align the text using the requested alignment mode.
#### Staggering Text
If you need to stagger text position along the x or y-axis the print method also returns the final coordinates as an argument to the callback.
```js
const font = await Jimp.loadFont(Jimp.FONT_SANS_32_BLACK);
image.print(
font,
10,
10,
'Hello world that wraps!',
50,
(err, image, { x, y }) => {
image.print(font, x, y + 20, 'More text on another line', 50);
}
);
```
## measureText
Measure how wide a piece of text will be.
```js
import jimp from 'jimp';
async function main() {
const font = await jimp.read(jimp.FONT_SANS_32_BLACK);
const image = await jimp.read(1000, 1000, 0x0000ffff);
image.measureText(font, 'Hello World!');
}
main();
```
## measureTextHeight
Measure how tall a piece of text will be.
```js
import jimp from 'jimp';
async function main() {
const font = await jimp.read(jimp.FONT_SANS_32_BLACK);
const image = await jimp.read(1000, 1000, 0x0000ffff);
image.measureTextHeight(font, 'Hello World!', 100);
}
main();
```