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

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