FIX: image io

[roojs1] / Roo / bootstrap / BezierSignature.js

diff --git a/Roo/bootstrap/BezierSignature.js b/Roo/bootstrap/BezierSignature.js
index 81ea2aa..504e13b 100644 (file)
--- a/Roo/bootstrap/BezierSignature.js
+++ b/Roo/bootstrap/BezierSignature.js
@@ -21,7 +21,9 @@ Roo.bootstrap.BezierSignature = function(config){
 
 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
-    _data: [], 
+    _data: [],
+    
+    _isEmpty: true,
     
     _mouseButtonDown: true,
     
@@ -53,7 +55,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     /**
      * @cfg(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
      */
-    backgroundColor: 'rgba(0,0,0,0)',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
     
     /**
      * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
@@ -109,13 +111,13 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         
         var canvas = this.canvasEl();
         
+        // mouse && touch event swapping...
         canvas.dom.style.touchAction = 'none';
         canvas.dom.style.msTouchAction = 'none';
         
         this._mouseButtonDown = false;
         canvas.on('mousedown', this._handleMouseDown, this);
         canvas.on('mousemove', this._handleMouseMove, this);
-        // catching mouseup for whole doc... any better way to catch it
         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
         
         if (window.ontouchstart) {
@@ -124,7 +126,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
             canvas.on('touchend', this._handleTouchEnd, this);
         }
         
-        // this.canvas.on('click', this.onClick, this);
+        this.clear();
     },
     
     _handleMouseDown: function(e)
@@ -150,6 +152,33 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         }
     },
     
+    _handleTouchStart: function (e) {
+        e.preventDefault();
+        if (e.browserEvent.targetTouches.length === 1) {
+            // var touch = e.browserEvent.changedTouches[0];
+            // this.strokeBegin(touch);
+            
+             this.strokeBegin(e); // assume e catching the correct xy...
+        }
+    },
+    
+    _handleTouchMove: function (e) {
+        e.preventDefault();
+        // var touch = event.targetTouches[0];
+        // _this._strokeMoveUpdate(touch);
+        this._strokeMoveUpdate(e);
+    },
+    
+    _handleTouchEnd: function (e) {
+        var wasCanvasTouched = e.target === this.canvasEl().dom;
+        if (wasCanvasTouched) {
+            e.preventDefault();
+            // var touch = event.changedTouches[0];
+            // _this._strokeEnd(touch);
+            this.strokeEnd(e);
+        }
+    },
+    
     reset: function () {
         this._lastPoints = [];
         this._lastVelocity = 0;
@@ -188,7 +217,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     strokeUpdate: function(e)
     {
         var rect = this.canvasEl().dom.getBoundingClientRect();
-        var point = new this.Point(e.browserEvent.clientX - rect.left, e.browserEvent.clientY - rect.top, new Date().getTime());
+        var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
         var lastPointGroup = this._data[this._data.length - 1];
         var lastPoints = lastPointGroup.points;
         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
@@ -297,9 +326,16 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         this._isEmpty = false;
     },
     
-    isValid: function()
+    clear: function()
     {
-        // form cannot detect...
+        var ctx = this.canvasElCtx();
+        var canvas = this.canvasEl().dom;
+        ctx.fillStyle = this.backgroundColor;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        this._data = [];
+        this.reset();
+        this._isEmpty = true;
     },
     
     canvasEl: function()
@@ -312,6 +348,25 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
         return this.el.select('canvas',true).first().dom.getContext('2d');
     },
     
+    getImage: function(type)
+    {
+        if(this._isEmpty) {
+            return false;
+        }
+        
+        // encryption ?
+        return this.canvasEl().dom.toDataURL('image/'+type, false);
+    },
+    
+    drawFromImage: function(img_src)
+    {
+        var img = new Image();
+        
+        img.src = img_src;
+        
+        this.canvasElCtx().drawImage(img, 0, 0);
+    },
+    
     // Bezier Point Constructor
     Point: (function () {
         function Point(x, y, time) {