SHARE
TWEET

sketcher1.1

a guest Nov 22nd, 2012 365 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.context = this.canvas.get(0).getContext("2d");    
  8.         this.context.strokeStyle = "#000000";
  9.         this.context.lineWidth = 3;
  10.         this.lastMousePoint = {x:0, y:0};
  11.    
  12.         if (this.touchSupported) {
  13.                 this.mouseDownEvent = "touchstart";
  14.                 this.mouseMoveEvent = "touchmove";
  15.                 this.mouseUpEvent = "touchend";
  16.         }
  17.         else {
  18.                 this.mouseDownEvent = "mousedown";
  19.                 this.mouseMoveEvent = "mousemove";
  20.                 this.mouseUpEvent = "mouseup";
  21.         }
  22.  
  23.         this.canvas.bind( this.mouseDownEvent, this.onCanvasMouseDown() );
  24. }
  25.  
  26. Sketcher.prototype.onCanvasMouseDown = function () {
  27.         var self = this;
  28.        
  29.         // Save canvas offset on mousedown event rather than calculate it on mousemove
  30.         this.canvasOffset = this.canvas.offset();
  31.        
  32.         return function(event) {
  33.                 self.mouseMoveHandler = self.onCanvasMouseMove()
  34.                 self.mouseUpHandler = self.onCanvasMouseUp()
  35.  
  36.                 $(document).bind( self.mouseMoveEvent, self.mouseMoveHandler );
  37.                 $(document).bind( self.mouseUpEvent, self.mouseUpHandler );
  38.  
  39.                 self.updateMousePosition( event );
  40.                 self.renderFunction( event );
  41.         }
  42. }
  43.  
  44. Sketcher.prototype.onCanvasMouseMove = function () {
  45.         var self = this;
  46.         return function(event) {
  47.                 self.renderFunction( event );
  48.         event.preventDefault();
  49.         return false;
  50.         }
  51. }
  52.  
  53. Sketcher.prototype.onCanvasMouseUp = function (event) {
  54.         var self = this;
  55.         return function(event) {
  56.                 $(document).unbind( self.mouseMoveEvent, self.mouseMoveHandler );
  57.                 $(document).unbind( self.mouseUpEvent, self.mouseUpHandler );
  58.  
  59.                 self.mouseMoveHandler = null;
  60.                 self.mouseUpHandler = null;
  61.         }
  62. }
  63.  
  64. Sketcher.prototype.updateMousePosition = function (event) {
  65.         var target = this.touchSupported ? event.touches[0] : event;
  66.        
  67.         this.lastMousePoint.x = target.pageX - this.canvasOffset.left;
  68.         this.lastMousePoint.y = target.pageY - this.canvasOffset.top;
  69. }
  70.  
  71. Sketcher.prototype.updateCanvasByLine = function (event) {
  72.         this.context.beginPath();
  73.         this.context.moveTo( this.lastMousePoint.x, this.lastMousePoint.y );
  74.        
  75.         // Run the code of updateMousePosition within this function (at the expense of repeating code) for improved execution speed
  76.         var target = this.touchSupported ? event.touches[0] : event;
  77.         this.lastMousePoint.x = target.pageX - this.canvasOffset.left;
  78.         this.lastMousePoint.y = target.pageY - this.canvasOffset.top;
  79.         //this.updateMousePosition( event );
  80.        
  81.         this.context.lineTo( this.lastMousePoint.x, this.lastMousePoint.y );
  82.         this.context.stroke();
  83. }
  84.  
  85. Sketcher.prototype.updateCanvasByBrush = function (event) {
  86.         var halfBrushW = this.brush.width/2;
  87.         var halfBrushH = this.brush.height/2;
  88.  
  89.         var start = { x:this.lastMousePoint.x, y: this.lastMousePoint.y };
  90.         this.updateMousePosition( event );
  91.         var end = { x:this.lastMousePoint.x, y: this.lastMousePoint.y };
  92.  
  93.         var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
  94.         var angle = Trig.angleBetween2Points( start, end );
  95.  
  96.         var x,y;
  97.  
  98.         for ( var z=0; (z<=distance || z==0); z++ )
  99.         {
  100.                 x = start.x + (Math.sin(angle) * z) - halfBrushW;
  101.                 y = start.y + (Math.cos(angle) * z) - halfBrushH;
  102.                
  103.                 this.context.drawImage(this.brush, x, y);
  104.         }
  105. }
  106.  
  107. Sketcher.prototype.toData = function () {
  108.  
  109.         var dataString = this.canvas.get(0).toDataURL("image/png");
  110.         var index = dataString.indexOf( "," )+1;
  111.         dataString = dataString.substring( index );
  112.  
  113.         return dataString;
  114. }
  115.  
  116. Sketcher.prototype.toDataURL = function () {
  117.  
  118.         var dataString = this.canvas.get(0).toDataURL("image/png");
  119.         return dataString;
  120. }
  121.  
  122. Sketcher.prototype.clear = function () {
  123.  
  124.         var c = this.canvas[0];
  125.         this.context.clearRect( 0, 0, c.width, c.height );
  126. }
  127.  
  128. var Trig = {
  129.         distanceBetween2Points: function ( point1, point2 ) {
  130.  
  131.                 var dx = point2.x - point1.x;
  132.                 var dy = point2.y - point1.y;
  133.                 return Math.sqrt( Math.pow( dx, 2 ) + Math.pow( dy, 2 ) );     
  134.         },
  135.  
  136.         angleBetween2Points: function ( point1, point2 ) {
  137.  
  138.                 var dx = point2.x - point1.x;
  139.                 var dy = point2.y - point1.y;  
  140.                 return Math.atan2( dx, dy );
  141.         }
  142. }
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