git.roojs.org Git - roojs1/blob - Roo/bootstrap/BezierSignature.js

   1 /**
   2  * @class Roo.bootstrap.BezierSignature
   3  * @extends Roo.bootstrap.Component
   4  * Bootstrap BezierSignature class
   5  * This script refer to:
   6  *    Title: Signature Pad
   7  *    Author: szimek
   8  *    Availability: https://github.com/szimek/signature_pad
   9  *
  10  * @constructor
  11  * Create a new BezierSignature
  12  * @param {Object} config The config object
  13  */
  14
  15 Roo.bootstrap.BezierSignature = function(config){
  16     Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
  17     this.addEvents({
  18         "resize" : true
  19     });
  20 };
  21
  22 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
  23 {
  24
  25     curve_data: [],
  26
  27     is_empty: true,
  28
  29     mouse_btn_down: true,
  30
  31     /**
  32      * @cfg {int} canvas height
  33      */
  34     canvas_height: '200px',
  35
  36     /**
  37      * @cfg {float|function} Radius of a single dot.
  38      */
  39     dot_size: false,
  40
  41     /**
  42      * @cfg {float} Minimum width of a line. Defaults to 0.5.
  43      */
  44     min_width: 0.5,
  45
  46     /**
  47      * @cfg {float} Maximum width of a line. Defaults to 2.5.
  48      */
  49     max_width: 2.5,
  50
  51     /**
  52      * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
  53      */
  54     throttle: 16,
  55
  56     /**
  57      * @cfg {integer} Add the next point only if the previous one is farther than x pixels. Defaults to 5.
  58      */
  59     min_distance: 5,
  60
  61     /**
  62      * @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.
  63      */
  64     bg_color: 'rgba(0, 0, 0, 0)',
  65
  66     /**
  67      * @cfg {string} Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
  68      */
  69     dot_color: 'black',
  70
  71     /**
  72      * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
  73      */
  74     velocity_filter_weight: 0.7,
  75
  76     /**
  77      * @cfg {function} Callback when stroke begin.
  78      */
  79     onBegin: false,
  80
  81     /**
  82      * @cfg {function} Callback when stroke end.
  83      */
  84     onEnd: false,
  85
  86     getAutoCreate : function()
  87     {
  88         var cls = 'roo-signature column';
  89
  90         if(this.cls){
  91             cls += ' ' + this.cls;
  92         }
  93
  94         var col_sizes = [
  95             'lg',
  96             'md',
  97             'sm',
  98             'xs'
  99         ];
 100
 101         for(var i = 0; i < col_sizes.length; i++) {
 102             if(this[col_sizes[i]]) {
 103                 cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
 104             }
 105         }
 106
 107         var cfg = {
 108             tag: 'div',
 109             cls: cls,
 110             cn: [
 111                 {
 112                     tag: 'div',
 113                     cls: 'roo-signature-body',
 114                     cn: [
 115                         {
 116                             tag: 'canvas',
 117                             cls: 'roo-signature-body-canvas',
 118                             height: this.canvas_height,
 119                             width: this.canvas_width
 120                         }
 121                     ]
 122                 },
 123                 {
 124                     tag: 'input',
 125                     type: 'file',
 126                     style: 'display: none'
 127                 }
 128             ]
 129         };
 130
 131         return cfg;
 132     },
 133
 134     initEvents: function()
 135     {
 136         Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
 137
 138         var canvas = this.canvasEl();
 139
 140         // mouse && touch event swapping...
 141         canvas.dom.style.touchAction = 'none';
 142         canvas.dom.style.msTouchAction = 'none';
 143
 144         this.mouse_btn_down = false;
 145         canvas.on('mousedown', this._handleMouseDown, this);
 146         canvas.on('mousemove', this._handleMouseMove, this);
 147         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
 148
 149         if (window.PointerEvent) {
 150             canvas.on('pointerdown', this._handleMouseDown, this);
 151             canvas.on('pointermove', this._handleMouseMove, this);
 152             Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
 153         }
 154
 155         if ('ontouchstart' in window) {
 156             canvas.on('touchstart', this._handleTouchStart, this);
 157             canvas.on('touchmove', this._handleTouchMove, this);
 158             canvas.on('touchend', this._handleTouchEnd, this);
 159         }
 160
 161         Roo.EventManager.onWindowResize(this.resize, this, true);
 162
 163         // file input event
 164         this.fileEl().on('change', this.uploadImage, this);
 165
 166         this.clear();
 167
 168         this.resize();
 169     },
 170
 171     resize: function(){
 172
 173         var canvas = this.canvasEl().dom;
 174         var ctx = this.canvasElCtx();
 175         var img_data = false;
 176
 177         if(canvas.width > 0) {
 178             var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
 179         }
 180         // setting canvas width will clean img data
 181         canvas.width = 0;
 182
 183         var style = window.getComputedStyle ?
 184             getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
 185
 186         var padding_left = parseInt(style.paddingLeft) || 0;
 187         var padding_right = parseInt(style.paddingRight) || 0;
 188
 189         canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
 190
 191         if(img_data) {
 192             ctx.putImageData(img_data, 0, 0);
 193         }
 194     },
 195
 196     _handleMouseDown: function(e)
 197     {
 198         if (e.browserEvent.which === 1) {
 199             this.mouse_btn_down = true;
 200             this.strokeBegin(e);
 201         }
 202     },
 203
 204     _handleMouseMove: function (e)
 205     {
 206         if (this.mouse_btn_down) {
 207             this.strokeMoveUpdate(e);
 208         }
 209     },
 210
 211     _handleMouseUp: function (e)
 212     {
 213         if (e.browserEvent.which === 1 && this.mouse_btn_down) {
 214             this.mouse_btn_down = false;
 215             this.strokeEnd(e);
 216         }
 217     },
 218
 219     _handleTouchStart: function (e) {
 220
 221         e.preventDefault();
 222         if (e.browserEvent.targetTouches.length === 1) {
 223             // var touch = e.browserEvent.changedTouches[0];
 224             // this.strokeBegin(touch);
 225
 226              this.strokeBegin(e); // assume e catching the correct xy...
 227         }
 228     },
 229
 230     _handleTouchMove: function (e) {
 231         e.preventDefault();
 232         // var touch = event.targetTouches[0];
 233         // _this._strokeMoveUpdate(touch);
 234         this.strokeMoveUpdate(e);
 235     },
 236
 237     _handleTouchEnd: function (e) {
 238         var wasCanvasTouched = e.target === this.canvasEl().dom;
 239         if (wasCanvasTouched) {
 240             e.preventDefault();
 241             // var touch = event.changedTouches[0];
 242             // _this._strokeEnd(touch);
 243             this.strokeEnd(e);
 244         }
 245     },
 246
 247     reset: function () {
 248         this._lastPoints = [];
 249         this._lastVelocity = 0;
 250         this._lastWidth = (this.min_width + this.max_width) / 2;
 251         this.canvasElCtx().fillStyle = this.dot_color;
 252     },
 253
 254     strokeMoveUpdate: function(e)
 255     {
 256         this.strokeUpdate(e);
 257
 258         if (this.throttle) {
 259             this.throttleStroke(this.strokeUpdate, this.throttle);
 260         }
 261         else {
 262             this.strokeUpdate(e);
 263         }
 264     },
 265
 266     strokeBegin: function(e)
 267     {
 268         var newPointGroup = {
 269             color: this.dot_color,
 270             points: []
 271         };
 272
 273         if (typeof this.onBegin === 'function') {
 274             this.onBegin(e);
 275         }
 276
 277         this.curve_data.push(newPointGroup);
 278         this.reset();
 279         this.strokeUpdate(e);
 280     },
 281
 282     strokeUpdate: function(e)
 283     {
 284         var rect = this.canvasEl().dom.getBoundingClientRect();
 285         var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
 286         var lastPointGroup = this.curve_data[this.curve_data.length - 1];
 287         var lastPoints = lastPointGroup.points;
 288         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
 289         var isLastPointTooClose = lastPoint
 290             ? point.distanceTo(lastPoint) <= this.min_distance
 291             : false;
 292         var color = lastPointGroup.color;
 293         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
 294             var curve = this.addPoint(point);
 295             if (!lastPoint) {
 296                 this.drawDot({color: color, point: point});
 297             }
 298             else if (curve) {
 299                 this.drawCurve({color: color, curve: curve});
 300             }
 301             lastPoints.push({
 302                 time: point.time,
 303                 x: point.x,
 304                 y: point.y
 305             });
 306         }
 307     },
 308
 309     strokeEnd: function(e)
 310     {
 311         this.strokeUpdate(e);
 312         if (typeof this.onEnd === 'function') {
 313             this.onEnd(e);
 314         }
 315     },
 316
 317     addPoint:  function (point) {
 318         var _lastPoints = this._lastPoints;
 319         _lastPoints.push(point);
 320         if (_lastPoints.length > 2) {
 321             if (_lastPoints.length === 3) {
 322                 _lastPoints.unshift(_lastPoints[0]);
 323             }
 324             var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
 325             var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
 326             _lastPoints.shift();
 327             return curve;
 328         }
 329         return null;
 330     },
 331
 332     calculateCurveWidths: function (startPoint, endPoint) {
 333         var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
 334             (1 - this.velocity_filter_weight) * this._lastVelocity;
 335
 336         var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
 337         var widths = {
 338             end: newWidth,
 339             start: this._lastWidth
 340         };
 341
 342         this._lastVelocity = velocity;
 343         this._lastWidth = newWidth;
 344         return widths;
 345     },
 346
 347     drawDot: function (_a) {
 348         var color = _a.color, point = _a.point;
 349         var ctx = this.canvasElCtx();
 350         var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
 351         ctx.beginPath();
 352         this.drawCurveSegment(point.x, point.y, width);
 353         ctx.closePath();
 354         ctx.fillStyle = color;
 355         ctx.fill();
 356     },
 357
 358     drawCurve: function (_a) {
 359         var color = _a.color, curve = _a.curve;
 360         var ctx = this.canvasElCtx();
 361         var widthDelta = curve.endWidth - curve.startWidth;
 362         var drawSteps = Math.floor(curve.length()) * 2;
 363         ctx.beginPath();
 364         ctx.fillStyle = color;
 365         for (var i = 0; i < drawSteps; i += 1) {
 366         var t = i / drawSteps;
 367         var tt = t * t;
 368         var ttt = tt * t;
 369         var u = 1 - t;
 370         var uu = u * u;
 371         var uuu = uu * u;
 372         var x = uuu * curve.startPoint.x;
 373         x += 3 * uu * t * curve.control1.x;
 374         x += 3 * u * tt * curve.control2.x;
 375         x += ttt * curve.endPoint.x;
 376         var y = uuu * curve.startPoint.y;
 377         y += 3 * uu * t * curve.control1.y;
 378         y += 3 * u * tt * curve.control2.y;
 379         y += ttt * curve.endPoint.y;
 380         var width = curve.startWidth + ttt * widthDelta;
 381         this.drawCurveSegment(x, y, width);
 382         }
 383         ctx.closePath();
 384         ctx.fill();
 385     },
 386
 387     drawCurveSegment: function (x, y, width) {
 388         var ctx = this.canvasElCtx();
 389         ctx.moveTo(x, y);
 390         ctx.arc(x, y, width, 0, 2 * Math.PI, false);
 391         this.is_empty = false;
 392     },
 393
 394     clear: function()
 395     {
 396         var ctx = this.canvasElCtx();
 397         var canvas = this.canvasEl().dom;
 398         ctx.fillStyle = this.bg_color;
 399         ctx.clearRect(0, 0, canvas.width, canvas.height);
 400         ctx.fillRect(0, 0, canvas.width, canvas.height);
 401         this.curve_data = [];
 402         this.reset();
 403         this.is_empty = true;
 404     },
 405
 406     fileEl: function()
 407     {
 408         return  this.el.select('input',true).first();
 409     },
 410
 411     canvasEl: function()
 412     {
 413         return this.el.select('canvas',true).first();
 414     },
 415
 416     canvasElCtx: function()
 417     {
 418         return this.el.select('canvas',true).first().dom.getContext('2d');
 419     },
 420
 421     getImage: function(type)
 422     {
 423         if(this.is_empty) {
 424             return false;
 425         }
 426
 427         // encryption ?
 428         return this.canvasEl().dom.toDataURL('image/'+type, 1);
 429     },
 430
 431     drawFromImage: function(img_src)
 432     {
 433         var img = new Image();
 434
 435         img.onload = function(){
 436             this.canvasElCtx().drawImage(img, 0, 0);
 437         }.bind(this);
 438
 439         img.src = img_src;
 440
 441         this.is_empty = false;
 442     },
 443
 444     selectImage: function()
 445     {
 446         this.fileEl().dom.click();
 447     },
 448
 449     uploadImage: function(e)
 450     {
 451         var reader = new FileReader();
 452
 453         reader.onload = function(e){
 454             var img = new Image();
 455             img.onload = function(){
 456                 this.reset();
 457                 this.canvasElCtx().drawImage(img, 0, 0);
 458             }.bind(this);
 459             img.src = e.target.result;
 460         }.bind(this);
 461
 462         reader.readAsDataURL(e.target.files[0]);
 463     },
 464
 465     // Bezier Point Constructor
 466     Point: (function () {
 467         function Point(x, y, time) {
 468             this.x = x;
 469             this.y = y;
 470             this.time = time || Date.now();
 471         }
 472         Point.prototype.distanceTo = function (start) {
 473             return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
 474         };
 475         Point.prototype.equals = function (other) {
 476             return this.x === other.x && this.y === other.y && this.time === other.time;
 477         };
 478         Point.prototype.velocityFrom = function (start) {
 479             return this.time !== start.time
 480             ? this.distanceTo(start) / (this.time - start.time)
 481             : 0;
 482         };
 483         return Point;
 484     }()),
 485
 486
 487     // Bezier Constructor
 488     Bezier: (function () {
 489         function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
 490             this.startPoint = startPoint;
 491             this.control2 = control2;
 492             this.control1 = control1;
 493             this.endPoint = endPoint;
 494             this.startWidth = startWidth;
 495             this.endWidth = endWidth;
 496         }
 497         Bezier.fromPoints = function (points, widths, scope) {
 498             var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
 499             var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
 500             return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
 501         };
 502         Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
 503             var dx1 = s1.x - s2.x;
 504             var dy1 = s1.y - s2.y;
 505             var dx2 = s2.x - s3.x;
 506             var dy2 = s2.y - s3.y;
 507             var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
 508             var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
 509             var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
 510             var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
 511             var dxm = m1.x - m2.x;
 512             var dym = m1.y - m2.y;
 513             var k = l2 / (l1 + l2);
 514             var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
 515             var tx = s2.x - cm.x;
 516             var ty = s2.y - cm.y;
 517             return {
 518                 c1: new scope.Point(m1.x + tx, m1.y + ty),
 519                 c2: new scope.Point(m2.x + tx, m2.y + ty)
 520             };
 521         };
 522         Bezier.prototype.length = function () {
 523             var steps = 10;
 524             var length = 0;
 525             var px;
 526             var py;
 527             for (var i = 0; i <= steps; i += 1) {
 528                 var t = i / steps;
 529                 var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
 530                 var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
 531                 if (i > 0) {
 532                     var xdiff = cx - px;
 533                     var ydiff = cy - py;
 534                     length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
 535                 }
 536                 px = cx;
 537                 py = cy;
 538             }
 539             return length;
 540         };
 541         Bezier.prototype.point = function (t, start, c1, c2, end) {
 542             return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
 543             + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
 544             + (3.0 * c2 * (1.0 - t) * t * t)
 545             + (end * t * t * t);
 546         };
 547         return Bezier;
 548     }()),
 549
 550     throttleStroke: function(fn, wait) {
 551       if (wait === void 0) { wait = 250; }
 552       var previous = 0;
 553       var timeout = null;
 554       var result;
 555       var storedContext;
 556       var storedArgs;
 557       var later = function () {
 558           previous = Date.now();
 559           timeout = null;
 560           result = fn.apply(storedContext, storedArgs);
 561           if (!timeout) {
 562               storedContext = null;
 563               storedArgs = [];
 564           }
 565       };
 566       return function wrapper() {
 567           var args = [];
 568           for (var _i = 0; _i < arguments.length; _i++) {
 569               args[_i] = arguments[_i];
 570           }
 571           var now = Date.now();
 572           var remaining = wait - (now - previous);
 573           storedContext = this;
 574           storedArgs = args;
 575           if (remaining <= 0 || remaining > wait) {
 576               if (timeout) {
 577                   clearTimeout(timeout);
 578                   timeout = null;
 579               }
 580               previous = now;
 581               result = fn.apply(storedContext, storedArgs);
 582               if (!timeout) {
 583                   storedContext = null;
 584                   storedArgs = [];
 585               }
 586           }
 587           else if (!timeout) {
 588               timeout = window.setTimeout(later, remaining);
 589           }
 590           return result;
 591       };
 592   }
 593
 594 });
 595
 596
 597
 598