SHARE
TWEET

Sketcher.js v1.1

a guest Nov 22nd, 2012 395 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function Sketcher( canvasID, brushImage ) {
  2.         this.renderFunction = (brushImage == null || brushImage == undefined) ? this.updateCanvasByLine : this.updateCanvasByBrush;
  3.         this.brush = brushImage;
  4.         this.touchSupported = Modernizr.touch;
  5.         this.canvasID = canvasID;
  6.         this.canvas = $("#"+canvasID);
  7.         this.canvasOffset = null;
  8.         this.context = this.canvas.get(0).getContext("2d");    
  9.         this.context.strokeStyle = "#000000";
  10.         this.context.lineWidth = 3;
  11.         this.lastMousePoint = {x:0, y:0};
  12.    
  13.         if (this.touchSupported) {
  14.                 this.mouseDownEvent = "touchstart";
  15.                 this.mouseMoveEvent = "touchmove";
  16.                 this.mouseUpEvent = "touchend";
  17.         }
  18.         else {
  19.                 this.mouseDownEvent = "mousedown";
  20.                 this.mouseMoveEvent = "mousemove";
  21.                 this.mouseUpEvent = "mouseup";
  22.         }
  23.  
  24.         this.canvas.bind( this.mouseDownEvent, this.onCanvasMouseDown() );
  25. }
  26.  
  27. Sketcher.prototype.onCanvasMouseDown = function () {
  28.         var self = this;
  29.        
  30.         return function(event) {
  31.                 // Save canvas offset on mousedown event rather than calculate it on mousemove
  32.                 self.canvasOffset = self.canvas.offset();
  33.                
  34.                 self.mouseMoveHandler = self.onCanvasMouseMove()
  35.                 self.mouseUpHandler = self.onCanvasMouseUp()
  36.  
  37.                 $(document).bind( self.mouseMoveEvent, self.mouseMoveHandler );
  38.                 $(document).bind( self.mouseUpEvent, self.mouseUpHandler );
  39.  
  40.                 self.updateMousePosition( event );
  41.                 self.renderFunction( event );
  42.         }
  43. }
  44.  
  45. Sketcher.prototype.onCanvasMouseMove = function () {
  46.         var self = this;
  47.         return function(event) {
  48.                 self.renderFunction( event );
  49.         event.preventDefault();
  50.         return false;
  51.         }
  52. }
  53.  
  54. Sketcher.prototype.onCanvasMouseUp = function (event) {
  55.         var self = this;
  56.         return function(event) {
  57.                 $(document).unbind( self.mouseMoveEvent, self.mouseMoveHandler );
  58.                 $(document).unbind( self.mouseUpEvent, self.mouseUpHandler );
  59.  
  60.                 self.mouseMoveHandler = null;
  61.                 self.mouseUpHandler = null;
  62.         }
  63. }
  64.  
  65. Sketcher.prototype.updateMousePosition = function (event) {
  66.         var target = this.touchSupported ? event.touches[0] : event;
  67.        
  68.         this.lastMousePoint.x = target.pageX - this.canvasOffset.left;
  69.         this.lastMousePoint.y = target.pageY - this.canvasOffset.top;
  70. }
  71.  
  72. Sketcher.prototype.updateCanvasByLine = function (event) {
  73.         this.context.beginPath();
  74.         this.context.moveTo( this.lastMousePoint.x, this.lastMousePoint.y );
  75.        
  76.         // Run the code of updateMousePosition within this function (at the expense of repeating code) for improved execution speed
  77.         var target = this.touchSupported ? event.touches[0] : event;
  78.         this.lastMousePoint.x = target.pageX - this.canvasOffset.left;
  79.         this.lastMousePoint.y = target.pageY - this.canvasOffset.top;
  80.         //this.updateMousePosition( event );
  81.        
  82.         this.context.lineTo( this.lastMousePoint.x, this.lastMousePoint.y );
  83.         this.context.stroke();
  84. }
  85.  
  86. Sketcher.prototype.updateCanvasByBrush = function (event) {
  87.         var halfBrushW = this.brush.width/2;
  88.         var halfBrushH = this.brush.height/2;
  89.  
  90.         var start = { x:this.lastMousePoint.x, y: this.lastMousePoint.y };
  91.         this.updateMousePosition( event );
  92.         var end = { x:this.lastMousePoint.x, y: this.lastMousePoint.y };
  93.  
  94.         var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
  95.         var angle = Trig.angleBetween2Points( start, end );
  96.  
  97.         var x,y;
  98.  
  99.         for ( var z=0; (z<=distance || z==0); z++ )
  100.         {
  101.                 x = start.x + (Math.sin(angle) * z) - halfBrushW;
  102.                 y = start.y + (Math.cos(angle) * z) - halfBrushH;
  103.                
  104.                 this.context.drawImage(this.brush, x, y);
  105.         }
  106. }
  107.  
  108. Sketcher.prototype.toData = function () {
  109.  
  110.         var dataString = this.canvas.get(0).toDataURL("image/png");
  111.         var index = dataString.indexOf( "," )+1;
  112.         dataString = dataString.substring( index );
  113.  
  114.         return dataString;
  115. }
  116.  
  117. Sketcher.prototype.toDataURL = function () {
  118.  
  119.         var dataString = this.canvas.get(0).toDataURL("image/png");
  120.         return dataString;
  121. }
  122.  
  123. Sketcher.prototype.clear = function () {
  124.  
  125.         var c = this.canvas[0];
  126.         this.context.clearRect( 0, 0, c.width, c.height );
  127. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top