A drawing app that can easily be used to create networked drawing apps.
LICENSE: MIT
http://squarific.github.io/Paint.js/demo.html
jQuery is required
Include Paint.min.js, paint.css and spectrum.css Make sure the container has the position property set!
Create a paint object:
var container = document.getElementById("container");
var paint = new Paint(container);Now you can bind to events:
paint.addEventListener("drawing", function (event) {
console.log(event.type);
console.log(event.drawing);
});The above code will output the following when a line is drawn:
"drawing"
{type: "line", x: 4, y: 5, x1: 6, y1: 7, size: 10, color: "#ffaabb"}paint.drawDrawings(layer, drawingArray);
paint.drawDrawing(layer, drawing);These functions will put the drawings on the given layer. Layer can be 'public' or 'local'.
paint.changeTool(tool);
paint.changeColor(color);
paint.changeToolSize(size);These functions allow you to change the tool, color and size. Tool can be one of the following: "grab", "line", "brush" or "block"*
*Block not yet implemented
paint.clear();Clears all drawings.
paint.newCanvasOnTop(name)Returns a canvas that will be automatically resized, it's .leftTopX and .leftTopY constantly updated to reflect it's 'world' coordinates and is added on top of the other canvasses except the effect canvas. It will have a class of className = "paint-canvas paint-canvas-" + name;
{
type: "userdrawing" // The type of event
drawing: {type: "brush", ...} // The drawing that was just added
removeDrawing: function () {} // Remove the drawing from the local layer
// For example when the server acknowledged the drawing
// or if the user wasn't allowed to draw
}Brush (dot):
{type: "brush", x: int, y: int, size: int, color: string}Block:
{type: "block", x: int, y: int, size: int, color: string}Line:
{type: "line", x: int, y: int, x1: int, y1: int, size: int, color: string}Controls can be added to
paint.controlContainer; // Dom element that contains all controllersIf you want to add a new tool you have to do 2 things. Add a button and add a event handling function.
The button will look like this:
{
name: "toolName",
type: "button",
image: "images/icons/toolName.png",
title: "Change tool to toolName",
value: "toolNameFunction",
action: this.changeTool.bind(this)
}This object should be added to the createControlArray function. You should also add your tools name to the toolButtons array. ToolName and toolNameFunction should be the same because of the selection state of the buttons.
The event handler looks like this:
function toolNameFunction (paint, event) {
}This function should be added to 'Paint.tools'.
Possible events are:
"remove"
{type: "mousedown", ...}
{type: "mousemove", ...}
{type: "mouseup", ...}
{type: "touchstart", ...}
{type: "touchmove", ...}
{type: "touchend", ...}You can then use all methods on the paint object, some you will need are:
// Returns the coordinates of the event relative to the canvas
// To get relative to the world, do + paint.layer.leftTopX and leftTopY
paint.getCoords(event);
// TiledCanvas objects for the last layer and the local layer
paint.public
paint.local
// The canavas and context on top of all other layers
paint.effectCanvas
paint.effectCanvasCtxif (event == "remove") {
delete paint.lastPickerPoint;
return;
}
// Get the coordinates relative to the world
var targetCoords = paint.getCoords(event);
if ((event.type == "mousedown" || event.type == "touchstart") && !paint.lastPickerPoint) {
}
if (event.type == "mouseup" || event.type == "touchend") {
}
if (event.type == "mousemove" || event.type == "touchmove") {
}TBA
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent