Guest User

Sketcher.js v1.1

a guest
Nov 22nd, 2012
431
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