File size: 4,347 Bytes
bf237c2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
<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: [ttf2fnt](https://ttf2fnt.com/)
: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.loadFont(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.loadFont(Jimp.FONT_SANS_32_BLACK);
const image = await Jimp.read(1000, 1000, 0x0000ffff);
Jimp.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.loadFont(Jimp.FONT_SANS_32_BLACK);
const image = await Jimp.read(1000, 1000, 0x0000ffff);
Jimp.measureTextHeight(font, "Hello World!", 100);
}
main();
```
|