Permalink
Browse files

Adding 4 more brushes and can add a local image

  • Loading branch information...
Winner
Winner committed Apr 28, 2014
1 parent ffe780f commit 20a0276db4f9d8c13c049518a2327d753e076376
Showing with 131 additions and 1 deletion.
  1. +6 −0 example.html
  2. +99 −0 jqscribble.extrabrushes.js
  3. +26 −1 jquery.jqscribble.js
View
@@ -43,6 +43,10 @@
<a href="#" onclick='$("#test").data("jqScribble").update({brush: BasicBrush});'>Basic</a>
<a href="#" onclick='$("#test").data("jqScribble").update({brush: LineBrush});'>Line</a>
<a href="#" onclick='$("#test").data("jqScribble").update({brush: CrossBrush});'>Cross</a>
<a href="#" onclick='$("#test").data("jqScribble").update({brush: DotBrush});'>Dot</a>
<a href="#" onclick='$("#test").data("jqScribble").update({brush: CircleBrush});'>Circle</a>
<a href="#" onclick='$("#test").data("jqScribble").update({brush: SemiCircleBrush});'>SemiCircle</a>
<a href="#" onclick='$("#test").data("jqScribble").update({brush: RectangleBrush});'>Rectangle</a>
</div>
<div class="column-right links">
<strong>COLORS:</strong>
@@ -56,6 +60,8 @@
<div class="links" style="margin-top: 5px;">
<strong>OPTIONS:</strong>
<a href="#" onclick='addImage();'>Add Image</a>
<a href="#" onclick='$("#file").trigger("click");'>Add Local Image</a>
<input type="file" id="file" style="display:none;">
<a href="#" onclick='$("#test").data("jqScribble").clear();'>Clear</a>
<a href="#" onclick='$("#test").data("jqScribble").save();'>Save</a>
<a href="#" onclick='save();'>Custom Save</a>
View
@@ -44,3 +44,102 @@ function CrossBrush()
};
};
//This is a custom brush that will draw dots.
DotBrush.prototype = new jqScribbleBrush;
function DotBrush()
{
DotBrush.prototype.strokeBegin = function(x, y)
{
jqScribbleBrush.prototype.strokeBegin.call(this, x, y);
this.lineRadius = 1;
};
DotBrush.prototype.strokeMove = function(x, y)
{
jqScribbleBrush.prototype.strokeMove.call(this, x, y);
this.context.moveTo(x-this.lineRadius, y+this.lineRadius);
this.context.lineTo(x+this.lineRadius, y-this.lineRadius);
this.context.strokeStyle = this.brushColor;
this.context.stroke();
};
};
//This is a custom brush that will draw circles.
CircleBrush.prototype = new jqScribbleBrush;
function CircleBrush()
{
CircleBrush.prototype.strokeBegin = function(x, y)
{
//For custom brushes make sure to call the parent brush methods
jqScribbleBrush.prototype.strokeBegin.call(this, x, y);
this.prevX = x;
this.prevY = y;
this.lineRadius = 20;
};
CircleBrush.prototype.strokeMove = function(x, y)
{
//For custom brushes make sure to call the parent brush methods
jqScribbleBrush.prototype.strokeMove.call(this, x, y);
this.context.beginPath();
this.context.arc(x, y, this.lineRadius, 0, 2 * Math.PI, false);
this.context.strokeStyle = this.brushColor;
this.context.stroke();
};
};
//This is a custom brush that will draw semicircles.
SemiCircleBrush.prototype = new jqScribbleBrush;
function SemiCircleBrush()
{
SemiCircleBrush.prototype.strokeBegin = function(x, y)
{
//For custom brushes make sure to call the parent brush methods
jqScribbleBrush.prototype.strokeBegin.call(this, x, y);
this.prevX = x;
this.prevY = y;
this.lineRadius = 20;
};
SemiCircleBrush.prototype.strokeMove = function(x, y)
{
//For custom brushes make sure to call the parent brush methods
jqScribbleBrush.prototype.strokeMove.call(this, x, y);
this.context.beginPath();
this.context.arc(x, y, this.lineRadius, 0, Math.PI, false);
this.context.strokeStyle = this.brushColor;
this.context.stroke();
};
};
//This is a custom brush that will draw rectangles.
RectangleBrush.prototype = new jqScribbleBrush;
function RectangleBrush()
{
RectangleBrush.prototype.strokeBegin = function(x, y)
{
//For custom brushes make sure to call the parent brush methods
jqScribbleBrush.prototype.strokeBegin.call(this, x, y);
this.prevX = x;
this.prevY = y;
this.lineRadius = 20;
};
RectangleBrush.prototype.strokeMove = function(x, y)
{
//For custom brushes make sure to call the parent brush methods
jqScribbleBrush.prototype.strokeMove.call(this, x, y);
this.context.beginPath();
this.context.rect(x, y, this.lineRadius, this.lineRadius);
this.context.strokeStyle = this.brushColor;
this.context.stroke();
};
};
View
@@ -252,5 +252,30 @@ function BasicCanvasSave(imageData){window.open(imageData,'jqScribble Image');}
if(!$.data(this, 'jqScribble'))$.data(this, 'jqScribble', new jqScribble(this, options));
});
};
})(jQuery);
})(jQuery);
$(document).ready(function()
{
$('#file').change(function(e){
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
function fileOnload(e) {
var $img = $('<img>', { src: e.target.result });
var canvas = $('#test')[0];
var context = canvas.getContext('2d');
$img.load(function() {
context.drawImage(this, 0, 0);
});
}
});

0 comments on commit 20a0276

Please sign in to comment.