Adds basic drawing functionnalities to pngjs.
npm install pngjs-drawsh
$ npm install --save pngjs-draw
`
Example
`js
var fs = require('fs');
var drawing = require('pngjs-draw');
var png = drawing(require('pngjs').PNG);
fs.createReadStream("blue.png")
.pipe(new png({ filterType: 4 }))
.on('parsed', function() {
// Draws a pixel with transparent green
this.drawPixel(150,200, this.colors.black())
// Draws a line with transparent red
this.drawLine(0,0,200,200, this.colors.red(50))
// Draws a rectangle with transparent black
this.fillRect(150,150,75,20, this.colors.black(100))
// Draws a filled rectangle with transparent white
this.fillRect(50,50,100,100, this.colors.white(100))
// Draws a text with custom color
this.drawText(20,20, "Hello world !", this.colors.new(255,100,10))
// Writes file
this.pack().pipe(fs.createWriteStream('blue.out.png'));
});
`
Documentation
$3
Draws the pixel at the given coordinates with the given color.
* {int} x The x coordinate of the pixel
* {int} y The y coordinate of the pixel
* {Array(byte)} color The color used to paint the pixel
$3
Draws a line beetween two points with the given color.
* {int} x0 The x coordinate of the start
* {int} y0 The y coordinate of the start
* {int} x1 The x coordinate of the end
* {int} y1 The y coordinate of the end
* {Array(byte)} color The color used to paint the line
$3
Draws a stroked rectangle with the given color.
* {int} x The top left x coordinate of the rectangle
* {int} y The top left y coordinate of the rectangle
* {int} width The width of the rectangle
* {int} height The height of the rectangle
* {Array(byte)} color The color used to paint strokes of the rectangle
$3
Draws a filled rectangle with the given color.
* {int} x The top left x coordinate of the rectangle
* {int} y The top left y coordinate of the rectangle
* {int} width The width of the rectangle
* {int} height The height of the rectangle
* {Array(byte)} color The color used to fill the rectangle
$3
Draw a text to the image.
* {int} x The top left x coordinate of the string
* {int} y The top left y coordinate of the string
* {string} text The string value
* {Array(byte)} color The color used used as foreground
* {Object} font The font used to render the string (optional)
* {Object} text The string value
return {int} The length in pixel of the rendered string
$3
Measure the rendered text length with the given font.
* {string} text The string value
* {Array(byte)} color The color used used as foreground
* {Object} font The font used to render the string (optional)
return {int} The length in pixel of the rendered string
$3
[
A color is a javascript array containing Red/Green/Blue/Alpha byte components.
PNG.prototype.colors.new = function(r,g,b,a)
The new method generates an array with the provided components.
Default values :
* r: 0
* g: 0
* b: 0
* a: 255
`
PNG.prototype.colors.red = function(a)
PNG.prototype.colors.greed = function(a)
PNG.prototype.colors.blue = function(a)
PNG.prototype.colors.black = function(a)
PNG.prototype.colors.white = function(a)
`
Helper methods for creating base colors are also available.
$3
In order to use a custom font, you must first generate a font module from an image presenting all the supported characters.
For more details, take a look at these files :
* build-font.js
fonts/
custom-font/`