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

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