@potch/pixeleditor v1.1.2
PixelEditor
a portable pixel editor widget
npm install @potch/pixeleditor
Touch support is quite lacking right now, but mouse and keyboard support is available!
PixelEditor Class
new PixelEditor(options)
creates new PixelEditor object.
options is an object with the following properties:
| name | required? | type | default | description |
|---|---|---|---|---|
width | yes | Number | n/a | width of the drawing |
height | no | Number | value of width | height of the drawing |
zoom | no | Number | 8 | amount to scale drawing canvas |
colors | no | Array | see "Default Colors" below | the colors to display in the widget's palette |
currentColor | no | Number | 1 | index in colors of the initial drawing color |
bg | no | Number | 0 | index in colors of the color to use to fill the initial drawing and the drawing after calling clear() |
container | no | Element | n/a | element to append the widget to. Optional as you can also call mount() |
onUpdate | no | Function | n/a | callback to call when the drawing changes |
Colors
colors are provided as an Array of red, green, blue Arrays, where the color components go from 0 to 255.
The default colors are:
[
[255, 255, 255], // white
[0, 0, 0], // black
[255, 0, 0], // red
[255, 255, 0], // yellow
[0, 255, 0], // green
[0, 255, 255], // cyan
[0, 0, 255], // blue
[255, 0, 255] // magenta
];onUpdate
If a Function is provided to the constructor, it will be called when the drawing is updated. this will refer to the PixelEditor instance.
Methods
These are the intended public methods of the class. Other methods are available, but are subject to change.
mount(container)
Appends the widget to a container element. Called automatically if container is passed to the constructor.
container- an existing element on the page
clear([color])
Resets the drawing to a single color.
color(optional) - the index incolorsof the color every pixel should be set to. Defaults tobg.
resize({ [width], [height], [zoom] })
Resize the drawing canvas to the provided dimensions and zoom. At least one of width, height, and zoom must be provided.
undo()
Restore to the previous drawing state.
toImageData({ [zoom] })
Returns an ImageData object containing the drawing scaled to the provided zoom.
zoom(optional) - scaling factor to apply to the drawing when exported. Defaults to1.
toBlob({ [zoom] }).then(blob => ...)
Returns a Promise that resolves with a Blob of type image/png containing the drawing scaled to the provided zoom.
zoom(optional) - scaling factor to apply to the drawing when exported. Defaults to1.
Keyboard Support
When focused, the following key controls are available:
- up, down, left, right: move cursor
- D, L, F: select Draw, Line, Fill tools
- Z: undo
- space: activate current tool
- [ and ]: cycle through colors
- Alt(Option) + X: clear canvas