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 = ctx.getImageData(0, 0, canvas.width, canvas.height);
 178
 179         // setting canvas width will clean img data
 180         canvas.width = 0;
 181
 182         var style = window.getComputedStyle ?
 183             getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
 184
 185         var padding_left = parseInt(style.paddingLeft) || 0;
 186         var padding_right = parseInt(style.paddingRight) || 0;
 187
 188         canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
 189
 190         ctx.putImageData(img_data, 0, 0);
 191     },
 192
 193     _handleMouseDown: function(e)
 194     {
 195         if (e.browserEvent.which === 1) {
 196             this.mouse_btn_down = true;
 197             this.strokeBegin(e);
 198         }
 199     },
 200
 201     _handleMouseMove: function (e)
 202     {
 203         if (this.mouse_btn_down) {
 204             this.strokeMoveUpdate(e);
 205         }
 206     },
 207
 208     _handleMouseUp: function (e)
 209     {
 210         if (e.browserEvent.which === 1 && this.mouse_btn_down) {
 211             this.mouse_btn_down = false;
 212             this.strokeEnd(e);
 213         }
 214     },
 215
 216     _handleTouchStart: function (e) {
 217
 218         e.preventDefault();
 219         if (e.browserEvent.targetTouches.length === 1) {
 220             // var touch = e.browserEvent.changedTouches[0];
 221             // this.strokeBegin(touch);
 222
 223              this.strokeBegin(e); // assume e catching the correct xy...
 224         }
 225     },
 226
 227     _handleTouchMove: function (e) {
 228         e.preventDefault();
 229         // var touch = event.targetTouches[0];
 230         // _this._strokeMoveUpdate(touch);
 231         this.strokeMoveUpdate(e);
 232     },
 233
 234     _handleTouchEnd: function (e) {
 235         var wasCanvasTouched = e.target === this.canvasEl().dom;
 236         if (wasCanvasTouched) {
 237             e.preventDefault();
 238             // var touch = event.changedTouches[0];
 239             // _this._strokeEnd(touch);
 240             this.strokeEnd(e);
 241         }
 242     },
 243
 244     reset: function () {
 245         this._lastPoints = [];
 246         this._lastVelocity = 0;
 247         this._lastWidth = (this.min_width + this.max_width) / 2;
 248         this.canvasElCtx().fillStyle = this.dot_color;
 249     },
 250
 251     strokeMoveUpdate: function(e)
 252     {
 253         this.strokeUpdate(e);
 254
 255         if (this.throttle) {
 256             this.throttle(this.strokeUpdate, this.throttle);
 257         }
 258         else {
 259             this.strokeUpdate(e);
 260         }
 261     },
 262
 263     strokeBegin: function(e)
 264     {
 265         var newPointGroup = {
 266             color: this.dot_color,
 267             points: []
 268         };
 269
 270         if (typeof this.onBegin === 'function') {
 271             this.onBegin(e);
 272         }
 273
 274         this.curve_data.push(newPointGroup);
 275         this.reset();
 276         this.strokeUpdate(e);
 277     },
 278
 279     strokeUpdate: function(e)
 280     {
 281         var rect = this.canvasEl().dom.getBoundingClientRect();
 282         var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
 283         var lastPointGroup = this.curve_data[this.curve_data.length - 1];
 284         var lastPoints = lastPointGroup.points;
 285         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
 286         var isLastPointTooClose = lastPoint
 287             ? point.distanceTo(lastPoint) <= this.min_distance
 288             : false;
 289         var color = lastPointGroup.color;
 290         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
 291             var curve = this.addPoint(point);
 292             if (!lastPoint) {
 293                 this.drawDot({color: color, point: point});
 294             }
 295             else if (curve) {
 296                 this.drawCurve({color: color, curve: curve});
 297             }
 298             lastPoints.push({
 299                 time: point.time,
 300                 x: point.x,
 301                 y: point.y
 302             });
 303         }
 304     },
 305
 306     strokeEnd: function(e)
 307     {
 308         this.strokeUpdate(e);
 309         if (typeof this.onEnd === 'function') {
 310             this.onEnd(e);
 311         }
 312     },
 313
 314     addPoint:  function (point) {
 315         var _lastPoints = this._lastPoints;
 316         _lastPoints.push(point);
 317         if (_lastPoints.length > 2) {
 318             if (_lastPoints.length === 3) {
 319                 _lastPoints.unshift(_lastPoints[0]);
 320             }
 321             var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
 322             var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
 323             _lastPoints.shift();
 324             return curve;
 325         }
 326         return null;
 327     },
 328
 329     calculateCurveWidths: function (startPoint, endPoint) {
 330         var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
 331             (1 - this.velocity_filter_weight) * this._lastVelocity;
 332
 333         var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
 334         var widths = {
 335             end: newWidth,
 336             start: this._lastWidth
 337         };
 338
 339         this._lastVelocity = velocity;
 340         this._lastWidth = newWidth;
 341         return widths;
 342     },
 343
 344     drawDot: function (_a) {
 345         var color = _a.color, point = _a.point;
 346         var ctx = this.canvasElCtx();
 347         var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
 348         ctx.beginPath();
 349         this.drawCurveSegment(point.x, point.y, width);
 350         ctx.closePath();
 351         ctx.fillStyle = color;
 352         ctx.fill();
 353     },
 354
 355     drawCurve: function (_a) {
 356         var color = _a.color, curve = _a.curve;
 357         var ctx = this.canvasElCtx();
 358         var widthDelta = curve.endWidth - curve.startWidth;
 359         var drawSteps = Math.floor(curve.length()) * 2;
 360         ctx.beginPath();
 361         ctx.fillStyle = color;
 362         for (var i = 0; i < drawSteps; i += 1) {
 363         var t = i / drawSteps;
 364         var tt = t * t;
 365         var ttt = tt * t;
 366         var u = 1 - t;
 367         var uu = u * u;
 368         var uuu = uu * u;
 369         var x = uuu * curve.startPoint.x;
 370         x += 3 * uu * t * curve.control1.x;
 371         x += 3 * u * tt * curve.control2.x;
 372         x += ttt * curve.endPoint.x;
 373         var y = uuu * curve.startPoint.y;
 374         y += 3 * uu * t * curve.control1.y;
 375         y += 3 * u * tt * curve.control2.y;
 376         y += ttt * curve.endPoint.y;
 377         var width = curve.startWidth + ttt * widthDelta;
 378         this.drawCurveSegment(x, y, width);
 379         }
 380         ctx.closePath();
 381         ctx.fill();
 382     },
 383
 384     drawCurveSegment: function (x, y, width) {
 385         var ctx = this.canvasElCtx();
 386         ctx.moveTo(x, y);
 387         ctx.arc(x, y, width, 0, 2 * Math.PI, false);
 388         this.is_empty = false;
 389     },
 390
 391     clear: function()
 392     {
 393         var ctx = this.canvasElCtx();
 394         var canvas = this.canvasEl().dom;
 395         ctx.fillStyle = this.bg_color;
 396         ctx.clearRect(0, 0, canvas.width, canvas.height);
 397         ctx.fillRect(0, 0, canvas.width, canvas.height);
 398         this.curve_data = [];
 399         this.reset();
 400         this.is_empty = true;
 401     },
 402
 403     fileEl: function()
 404     {
 405         return  this.el.select('input',true).first();
 406     },
 407
 408     canvasEl: function()
 409     {
 410         return this.el.select('canvas',true).first();
 411     },
 412
 413     canvasElCtx: function()
 414     {
 415         return this.el.select('canvas',true).first().dom.getContext('2d');
 416     },
 417
 418     getImage: function(type)
 419     {
 420         if(this.is_empty) {
 421             return false;
 422         }
 423
 424         // encryption ?
 425         return this.canvasEl().dom.toDataURL('image/'+type, 1);
 426     },
 427
 428     drawFromImage: function(img_src)
 429     {
 430         var img = new Image();
 431
 432         img.onload = function(){
 433             this.canvasElCtx().drawImage(img, 0, 0);
 434         }.bind(this);
 435
 436         img.src = img_src;
 437
 438         this.is_empty = false;
 439     },
 440
 441     selectImage: function()
 442     {
 443         this.fileEl().dom.click();
 444     },
 445
 446     uploadImage: function(e)
 447     {
 448         var reader = new FileReader();
 449
 450         reader.onload = function(e){
 451             var img = new Image();
 452             img.onload = function(){
 453                 this.reset();
 454                 this.canvasElCtx().drawImage(img, 0, 0);
 455             }.bind(this);
 456             img.src = e.target.result;
 457         }.bind(this);
 458
 459         reader.readAsDataURL(e.target.files[0]);
 460     },
 461
 462     // Bezier Point Constructor
 463     Point: (function () {
 464         function Point(x, y, time) {
 465             this.x = x;
 466             this.y = y;
 467             this.time = time || Date.now();
 468         }
 469         Point.prototype.distanceTo = function (start) {
 470             return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
 471         };
 472         Point.prototype.equals = function (other) {
 473             return this.x === other.x && this.y === other.y && this.time === other.time;
 474         };
 475         Point.prototype.velocityFrom = function (start) {
 476             return this.time !== start.time
 477             ? this.distanceTo(start) / (this.time - start.time)
 478             : 0;
 479         };
 480         return Point;
 481     }()),
 482
 483
 484     // Bezier Constructor
 485     Bezier: (function () {
 486         function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
 487             this.startPoint = startPoint;
 488             this.control2 = control2;
 489             this.control1 = control1;
 490             this.endPoint = endPoint;
 491             this.startWidth = startWidth;
 492             this.endWidth = endWidth;
 493         }
 494         Bezier.fromPoints = function (points, widths, scope) {
 495             var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
 496             var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
 497             return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
 498         };
 499         Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
 500             var dx1 = s1.x - s2.x;
 501             var dy1 = s1.y - s2.y;
 502             var dx2 = s2.x - s3.x;
 503             var dy2 = s2.y - s3.y;
 504             var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
 505             var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
 506             var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
 507             var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
 508             var dxm = m1.x - m2.x;
 509             var dym = m1.y - m2.y;
 510             var k = l2 / (l1 + l2);
 511             var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
 512             var tx = s2.x - cm.x;
 513             var ty = s2.y - cm.y;
 514             return {
 515                 c1: new scope.Point(m1.x + tx, m1.y + ty),
 516                 c2: new scope.Point(m2.x + tx, m2.y + ty)
 517             };
 518         };
 519         Bezier.prototype.length = function () {
 520             var steps = 10;
 521             var length = 0;
 522             var px;
 523             var py;
 524             for (var i = 0; i <= steps; i += 1) {
 525                 var t = i / steps;
 526                 var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
 527                 var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
 528                 if (i > 0) {
 529                     var xdiff = cx - px;
 530                     var ydiff = cy - py;
 531                     length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
 532                 }
 533                 px = cx;
 534                 py = cy;
 535             }
 536             return length;
 537         };
 538         Bezier.prototype.point = function (t, start, c1, c2, end) {
 539             return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
 540             + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
 541             + (3.0 * c2 * (1.0 - t) * t * t)
 542             + (end * t * t * t);
 543         };
 544         return Bezier;
 545     }()),
 546
 547     throttle: function(fn, wait) {
 548       if (wait === void 0) { wait = 250; }
 549       var previous = 0;
 550       var timeout = null;
 551       var result;
 552       var storedContext;
 553       var storedArgs;
 554       var later = function () {
 555           previous = Date.now();
 556           timeout = null;
 557           result = fn.apply(storedContext, storedArgs);
 558           if (!timeout) {
 559               storedContext = null;
 560               storedArgs = [];
 561           }
 562       };
 563       return function wrapper() {
 564           var args = [];
 565           for (var _i = 0; _i < arguments.length; _i++) {
 566               args[_i] = arguments[_i];
 567           }
 568           var now = Date.now();
 569           var remaining = wait - (now - previous);
 570           storedContext = this;
 571           storedArgs = args;
 572           if (remaining <= 0 || remaining > wait) {
 573               if (timeout) {
 574                   clearTimeout(timeout);
 575                   timeout = null;
 576               }
 577               previous = now;
 578               result = fn.apply(storedContext, storedArgs);
 579               if (!timeout) {
 580                   storedContext = null;
 581                   storedArgs = [];
 582               }
 583           }
 584           else if (!timeout) {
 585               timeout = window.setTimeout(later, remaining);
 586           }
 587           return result;
 588       };
 589   }
 590
 591 });
 592
 593
 594
 595