Overview
In this tutorial we will learn how to create plugin for the static layer. The example described in this tutorial will allow you to create a blur brush. You can use the plugin attached with this tutorial by following the steps described in overview tutorial http://paindoodlerplugindev.blogspot.co.uk/2013/05/overview.html. You can unzip the file to understand the contents.
Prerequisite
- Basic understanding of paint doodler interface http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html
- Basic understanding of the paint doodler drawing layer architecture http://paintdoodler.blogspot.co.uk/p/layer.html
- Paint doodler plugin overview http://paindoodlerplugindev.blogspot.co.uk/2013/05/overview.html
- Basic understanding of HTML 5 canvas image manipulation. This tutorial used a pixel by pixel manipulation of the underlying image.
- Basic understanding of java script.
Components of the blur brush plugin
Complete Plugin used in this tutorial can be found at http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/blurbrushpaintdoodlertutorial.zip
- tools.txt - Used to associate an icon to plugin on toolbox http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/tools.txt
setUpUIPaintDoodlerTutorial function attached to onclick event of the tool bar icon is used to initialize and start the plugin.
- control.txt - Used to define input controls for plugin. Initialized and opened using the function setUpUIPaintDoodlerTutorial attached to onclick event http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/control.txt
- js.txt - Script file containing the plugin code http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/js.txt
Attaching /Initializing new plugin to existing static canvas layer plugins
// function to associate plugin to static canvas layer
function initializeBlurBrushPluginPaintDoodlerTutorial(){
//canvasList global variable to contain the list of existing canvas layers names
//Associated plugin to static cavas layer by checking the type property of canvaslayer
for (var i = canvasList.length - 1; i >= 0; i--) {
if (canvasMap[canvasList[i]].type == 'static' && typeof canvasMap[canvasList[i]].drawingStyle['blurbrushpaintdoodlertutorial'] == 'undefined' ) {
//drawingstyle map of plugins attached to current static layer. Please note that toolShape variable should be initialized with key ('blurbrushpaintdoodlertutorial') see below
//canvasMap global variable containing list of canvasLayerObject
canvasMap[canvasList[i]].drawingStyle['blurbrushpaintdoodlertutorial'] = new BlurBrushPaintDoodlerTutorial(canvasMap[canvasList[i]].ctx) ;
}
}
}
// function associated to onclick event associated to toolbar icon
function setUpUIPaintDoodlerTutorial(){
//hide any controls if already open
hideControls('control');
//show control associated to blur brush plugin
document.getElementById('blurBrushPaintDoodlerTutorialControl').style.display='';
//attach the plugin to static canvas layer
initializeBlurBrushPluginPaintDoodlerTutorial();
//toolShape a global variable to describe which plug in should be used. Please note the string in toolshape should be same as string used to attach plugin to drawingStyle
toolShape='blurbrushpaintdoodlertutorial';
//open ControlBox to open the controls
openControlBox();
}
Construction function
We start creating the plugin by defining a prototype construction function as below
Prototype constructor must pass an argument context
//plugin prototype constructor function
function BlurBrushPaintDoodlerTutorial(context) {
//HTML 5 canvas context passed during attach plugin proceess by getting the context associated to canvas layer using canvasMap see above for plugin initialization
this.context = context;
//boolean flag to describe if enable and cancel drawing using this plugin
this.shouldDraw = false;
//copy of the pixel data of the underlying canvas layer
this.srcIData =null;
}
Attaching to mouse and touch events
Prototype constructed above must have following methods with same method signatures as defined below
- strokeStart
- draw
- strokeEnd
//prototype function called on touch start or mouse down event mouseX and MouseY contain the current co-ordinates of the mouse pointer on the underlying canvas layer
BlurBrushPaintDoodlerTutorial.prototype.strokeStart = function(mouseX, mouseY) {
//take a copy of the canvas layer pixel data
this.srcIData =this.context.getImageData(0,0,canvasWidth,canvasHeight);
this.shouldDraw = true;
}
//prototype function called on touch move or mouse move event
BlurBrushPaintDoodlerTutorial.prototype.draw = function(mouseX, mouseY) {
var srcIDataCopy =this.context.getImageData(0,0,canvasWidth,canvasHeight);
var data = this.srcIData.data;
var dataCopy=srcIDataCopy.data;
//size of drawing brush
var sizeelm=document.getElementById('blurbrushpaintdoodlertutorialsize');
if (typeof sizeelm =='undefined'){
return;
}
var size = parseInt(sizeelm.value);
var countPixels=0;
var rmean,gmean,bmean;
rmean=0;
gmean=0;
bmean=0;
//iterate through the pixels under drawing brush
for(var x = mouseX-size/2; x < mouseX+size/2; x++) {
for(var y = mouseY-size/2; y < mouseY+size/2; y++) {
if (x<0||y<0||x>=canvasWidth||y>=canvasHeight){
} else{
countPixels++;
rmean=rmean+data[((canvasWidth * y) + x) * 4 + 0];
gmean=gmean+data[((canvasWidth * y) + x) * 4 + 1];
bmean=bmean+data[((canvasWidth * y) + x) * 4 + 2];
}
}
}
//replace the canvas data with the average value of the surrounding pxel
dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 0]=rmean/countPixels;
dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 1]=gmean/countPixels;
dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 2]=bmean/countPixels;
//replace the canvas data with the manipulated pixel data
this.context.putImageData(srcIDataCopy,0,0);
}
//prototype function called on touch end or mouse up event
BlurBrushPaintDoodlerTutorial.prototype.strokeEnd = function() {
this.shouldDraw = false;
}
Note
- paintdoodlertutorial is added at the end of each method variable to create a unique name. It is the responsibility of developer to create unique names so that it does not conflicts with other plugin names and is globally unique
This post is part of series plugin development tutorial series for Paint Doodler app.
- Basic understanding of paint doodler interface http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html
- Basic understanding of the paint doodler drawing layer architecture http://paintdoodler.blogspot.co.uk/p/layer.html
- Paint doodler plugin overview http://paindoodlerplugindev.blogspot.co.uk/2013/05/overview.html
- Basic understanding of HTML 5 canvas image manipulation. This tutorial used a pixel by pixel manipulation of the underlying image.
- Basic understanding of java script.
Components of the blur brush plugin
Complete Plugin used in this tutorial can be found at http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/blurbrushpaintdoodlertutorial.zip
- tools.txt - Used to associate an icon to plugin on toolbox http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/tools.txt setUpUIPaintDoodlerTutorial function attached to onclick event of the tool bar icon is used to initialize and start the plugin.
- control.txt - Used to define input controls for plugin. Initialized and opened using the function setUpUIPaintDoodlerTutorial attached to onclick event http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/control.txt
- js.txt - Script file containing the plugin code http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/js.txt
Attaching /Initializing new plugin to existing static canvas layer plugins
// function to associate plugin to static canvas layer function initializeBlurBrushPluginPaintDoodlerTutorial(){ //canvasList global variable to contain the list of existing canvas layers names //Associated plugin to static cavas layer by checking the type property of canvaslayer for (var i = canvasList.length - 1; i >= 0; i--) { if (canvasMap[canvasList[i]].type == 'static' && typeof canvasMap[canvasList[i]].drawingStyle['blurbrushpaintdoodlertutorial'] == 'undefined' ) { //drawingstyle map of plugins attached to current static layer. Please note that toolShape variable should be initialized with key ('blurbrushpaintdoodlertutorial') see below //canvasMap global variable containing list of canvasLayerObject canvasMap[canvasList[i]].drawingStyle['blurbrushpaintdoodlertutorial'] = new BlurBrushPaintDoodlerTutorial(canvasMap[canvasList[i]].ctx) ; } } } // function associated to onclick event associated to toolbar icon function setUpUIPaintDoodlerTutorial(){ //hide any controls if already open hideControls('control'); //show control associated to blur brush plugin document.getElementById('blurBrushPaintDoodlerTutorialControl').style.display=''; //attach the plugin to static canvas layer initializeBlurBrushPluginPaintDoodlerTutorial(); //toolShape a global variable to describe which plug in should be used. Please note the string in toolshape should be same as string used to attach plugin to drawingStyle toolShape='blurbrushpaintdoodlertutorial';//open ControlBox to open the controls openControlBox(); }
Construction function
We start creating the plugin by defining a prototype construction function as below
Prototype constructor must pass an argument context
//plugin prototype constructor function function BlurBrushPaintDoodlerTutorial(context) { //HTML 5 canvas context passed during attach plugin proceess by getting the context associated to canvas layer using canvasMap see above for plugin initialization this.context = context; //boolean flag to describe if enable and cancel drawing using this plugin this.shouldDraw = false; //copy of the pixel data of the underlying canvas layer this.srcIData =null; }
Prototype constructed above must have following methods with same method signatures as defined below
- strokeStart
- draw
- strokeEnd
//prototype function called on touch start or mouse down event mouseX and MouseY contain the current co-ordinates of the mouse pointer on the underlying canvas layer
BlurBrushPaintDoodlerTutorial.prototype.strokeStart = function(mouseX, mouseY) {
//take a copy of the canvas layer pixel data
this.srcIData =this.context.getImageData(0,0,canvasWidth,canvasHeight);
this.shouldDraw = true;
}
//prototype function called on touch move or mouse move event
BlurBrushPaintDoodlerTutorial.prototype.draw = function(mouseX, mouseY) {
var srcIDataCopy =this.context.getImageData(0,0,canvasWidth,canvasHeight);
var data = this.srcIData.data;
var dataCopy=srcIDataCopy.data;
//size of drawing brush
var sizeelm=document.getElementById('blurbrushpaintdoodlertutorialsize');
if (typeof sizeelm =='undefined'){
return;
}
var size = parseInt(sizeelm.value);
var countPixels=0;
var rmean,gmean,bmean;
rmean=0;
gmean=0;
bmean=0;
//iterate through the pixels under drawing brush
for(var x = mouseX-size/2; x < mouseX+size/2; x++) {
for(var y = mouseY-size/2; y < mouseY+size/2; y++) {
if (x<0||y<0||x>=canvasWidth||y>=canvasHeight){
} else{
countPixels++;
rmean=rmean+data[((canvasWidth * y) + x) * 4 + 0];
gmean=gmean+data[((canvasWidth * y) + x) * 4 + 1];
bmean=bmean+data[((canvasWidth * y) + x) * 4 + 2];
}
}
}
//replace the canvas data with the average value of the surrounding pxel
dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 0]=rmean/countPixels;
dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 1]=gmean/countPixels;
dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 2]=bmean/countPixels;
//replace the canvas data with the manipulated pixel data
this.context.putImageData(srcIDataCopy,0,0);
}
//prototype function called on touch end or mouse up event
BlurBrushPaintDoodlerTutorial.prototype.strokeEnd = function() {
this.shouldDraw = false;
}
Note
This is the official blog for paint doodler app
Online painting,drawing and image editing platform . paint doodler is based html5 canvas and is purely java script diven
Doodle Paint is a full featured painting and image editing platform providing users with versatile collection of tools and enabling users to contribute to ever growing community of doodlers with new features through plug-in.
visit - http://www.paintdoodler.com/
Online painting,drawing and image editing platform . paint doodler is based html5 canvas and is purely java script diven
Doodle Paint is a full featured painting and image editing platform providing users with versatile collection of tools and enabling users to contribute to ever growing community of doodlers with new features through plug-in.
visit - http://www.paintdoodler.com/
