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 };
  21
  22 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
  23
  24     _data: [],
  25
  26     _isEmpty: true,
  27
  28     _mouseButtonDown: true,
  29
  30     /**
  31      * @cfg(float or function) Radius of a single dot.
  32      */
  33     dotSize: false,
  34
  35     /**
  36      * @cfg(float) Minimum width of a line. Defaults to 0.5.
  37      */
  38     minWidth: 0.5,
  39
  40     /**
  41      * @cfg(float) Maximum width of a line. Defaults to 2.5.
  42      */
  43     maxWidth: 2.5,
  44
  45     /**
  46      * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
  47      */
  48     throttle: 16,
  49
  50     /**
  51      * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
  52      */
  53     minDistance: 5,
  54
  55     /**
  56      * @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.
  57      */
  58     backgroundColor: 'rgba(0, 0, 0, 0)',
  59
  60     /**
  61      * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
  62      */
  63     penColor: 'black',
  64
  65     /**
  66      * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
  67      */
  68     velocityFilterWeight: 0.7,
  69
  70     /**
  71      * @cfg(function) Callback when stroke begin.
  72      */
  73     onBegin: false,
  74
  75     /**
  76      * @cfg(function) Callback when stroke end.
  77      */
  78     onEnd: false,
  79
  80     getAutoCreate : function()
  81     {
  82         var cls = 'roo-signature';
  83
  84         if(this.cls){
  85             cls += ' ' + this.cls;
  86         }
  87
  88         var cfg = {
  89             tag: 'div',
  90             cls: cls,
  91             cn: [
  92                 {
  93                     tag: 'div',
  94                     cls: 'roo-signature-body',
  95                     cn: [
  96                         {
  97                             tag: 'canvas',
  98                             cls: 'roo-signature-body-canvas'
  99                         }
 100                     ]
 101                 }
 102             ]
 103         };
 104
 105         return cfg;
 106     },
 107
 108     initEvents: function()
 109     {
 110         Roo.bootstrap.BezierSignature.superclass.initEvents.call(this);
 111
 112         var canvas = this.canvasEl();
 113
 114         // mouse && touch event swapping...
 115         canvas.dom.style.touchAction = 'none';
 116         canvas.dom.style.msTouchAction = 'none';
 117
 118         this._mouseButtonDown = false;
 119         canvas.on('mousedown', this._handleMouseDown, this);
 120         canvas.on('mousemove', this._handleMouseMove, this);
 121         Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
 122
 123         if (window.ontouchstart) {
 124             canvas.on('touchstart', this._handleTouchStart, this);
 125             canvas.on('touchmove', this._handleTouchMove, this);
 126             canvas.on('touchend', this._handleTouchEnd, this);
 127         }
 128
 129         this.clear();
 130     },
 131
 132     _handleMouseDown: function(e)
 133     {
 134         if (e.browserEvent.which === 1) {
 135             this._mouseButtonDown = true;
 136             this.strokeBegin(e);
 137         }
 138     },
 139
 140     _handleMouseMove: function (e)
 141     {
 142         if (this._mouseButtonDown) {
 143             this.strokeMoveUpdate(e);
 144         }
 145     },
 146
 147     _handleMouseUp: function (e)
 148     {
 149         if (e.browserEvent.which === 1 && this._mouseButtonDown) {
 150             this._mouseButtonDown = false;
 151             this.strokeEnd(e);
 152         }
 153     },
 154
 155     _handleTouchStart: function (e) {
 156         e.preventDefault();
 157         if (e.browserEvent.targetTouches.length === 1) {
 158             // var touch = e.browserEvent.changedTouches[0];
 159             // this.strokeBegin(touch);
 160
 161              this.strokeBegin(e); // assume e catching the correct xy...
 162         }
 163     },
 164
 165     _handleTouchMove: function (e) {
 166         e.preventDefault();
 167         // var touch = event.targetTouches[0];
 168         // _this._strokeMoveUpdate(touch);
 169         this._strokeMoveUpdate(e);
 170     },
 171
 172     _handleTouchEnd: function (e) {
 173         var wasCanvasTouched = e.target === this.canvasEl().dom;
 174         if (wasCanvasTouched) {
 175             e.preventDefault();
 176             // var touch = event.changedTouches[0];
 177             // _this._strokeEnd(touch);
 178             this.strokeEnd(e);
 179         }
 180     },
 181
 182     reset: function () {
 183         this._lastPoints = [];
 184         this._lastVelocity = 0;
 185         this._lastWidth = (this.minWidth + this.maxWidth) / 2;
 186         this.canvasElCtx().fillStyle = this.penColor;
 187     },
 188
 189     strokeMoveUpdate: function(e)
 190     {
 191         this.strokeUpdate(e);
 192
 193         if (this.throttle) {
 194             this.throttle(this.strokeUpdate, this.throttle);
 195         }
 196         else {
 197             this.strokeUpdate(e);
 198         }
 199     },
 200
 201     strokeBegin: function(e)
 202     {
 203         var newPointGroup = {
 204             color: this.penColor,
 205             points: []
 206         };
 207
 208         if (typeof this.onBegin === 'function') {
 209             this.onBegin(e);
 210         }
 211
 212         this._data.push(newPointGroup);
 213         this.reset();
 214         this.strokeUpdate(e);
 215     },
 216
 217     strokeUpdate: function(e)
 218     {
 219         var rect = this.canvasEl().dom.getBoundingClientRect();
 220         var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
 221         var lastPointGroup = this._data[this._data.length - 1];
 222         var lastPoints = lastPointGroup.points;
 223         var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
 224         var isLastPointTooClose = lastPoint
 225             ? point.distanceTo(lastPoint) <= this.minDistance
 226             : false;
 227         var color = lastPointGroup.color;
 228         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
 229             var curve = this.addPoint(point);
 230             if (!lastPoint) {
 231                 this.drawDot({color: color, point: point});
 232             }
 233             else if (curve) {
 234                 this.drawCurve({color: color, curve: curve});
 235             }
 236             lastPoints.push({
 237                 time: point.time,
 238                 x: point.x,
 239                 y: point.y
 240             });
 241         }
 242     },
 243
 244     strokeEnd: function(e)
 245     {
 246         this.strokeUpdate(e);
 247         if (typeof this.onEnd === 'function') {
 248             this.onEnd(e);
 249         }
 250     },
 251
 252     addPoint:  function (point) {
 253         var _lastPoints = this._lastPoints;
 254         _lastPoints.push(point);
 255         if (_lastPoints.length > 2) {
 256             if (_lastPoints.length === 3) {
 257                 _lastPoints.unshift(_lastPoints[0]);
 258             }
 259             var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
 260             var curve = this.Bezier.fromPoints(_lastPoints, widths, this);
 261             _lastPoints.shift();
 262             return curve;
 263         }
 264         return null;
 265     },
 266
 267     calculateCurveWidths: function (startPoint, endPoint) {
 268         var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
 269             (1 - this.velocityFilterWeight) * this._lastVelocity;
 270
 271         var newWidth = Math.max(this.maxWidth / (velocity + 1), this.minWidth);
 272         var widths = {
 273             end: newWidth,
 274             start: this._lastWidth
 275         };
 276
 277         this._lastVelocity = velocity;
 278         this._lastWidth = newWidth;
 279         return widths;
 280     },
 281
 282     drawDot: function (_a) {
 283         var color = _a.color, point = _a.point;
 284         var ctx = this.canvasElCtx();
 285         var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
 286         ctx.beginPath();
 287         this.drawCurveSegment(point.x, point.y, width);
 288         ctx.closePath();
 289         ctx.fillStyle = color;
 290         ctx.fill();
 291     },
 292
 293     drawCurve: function (_a) {
 294         var color = _a.color, curve = _a.curve;
 295         var ctx = this.canvasElCtx();
 296         var widthDelta = curve.endWidth - curve.startWidth;
 297         var drawSteps = Math.floor(curve.length()) * 2;
 298         ctx.beginPath();
 299         ctx.fillStyle = color;
 300         for (var i = 0; i < drawSteps; i += 1) {
 301         var t = i / drawSteps;
 302         var tt = t * t;
 303         var ttt = tt * t;
 304         var u = 1 - t;
 305         var uu = u * u;
 306         var uuu = uu * u;
 307         var x = uuu * curve.startPoint.x;
 308         x += 3 * uu * t * curve.control1.x;
 309         x += 3 * u * tt * curve.control2.x;
 310         x += ttt * curve.endPoint.x;
 311         var y = uuu * curve.startPoint.y;
 312         y += 3 * uu * t * curve.control1.y;
 313         y += 3 * u * tt * curve.control2.y;
 314         y += ttt * curve.endPoint.y;
 315         var width = curve.startWidth + ttt * widthDelta;
 316         this.drawCurveSegment(x, y, width);
 317         }
 318         ctx.closePath();
 319         ctx.fill();
 320     },
 321
 322     drawCurveSegment: function (x, y, width) {
 323         var ctx = this.canvasElCtx();
 324         ctx.moveTo(x, y);
 325         ctx.arc(x, y, width, 0, 2 * Math.PI, false);
 326         this._isEmpty = false;
 327     },
 328
 329     clear: function()
 330     {
 331         var ctx = this.canvasElCtx();
 332         var canvas = this.canvasEl().dom;
 333         ctx.fillStyle = this.backgroundColor;
 334         ctx.clearRect(0, 0, canvas.width, canvas.height);
 335         ctx.fillRect(0, 0, canvas.width, canvas.height);
 336         this._data = [];
 337         this.reset();
 338         this._isEmpty = true;
 339     },
 340
 341     canvasEl: function()
 342     {
 343         return this.el.select('canvas',true).first();
 344     },
 345
 346     canvasElCtx: function()
 347     {
 348         return this.el.select('canvas',true).first().dom.getContext('2d');
 349     },
 350
 351     getImage: function(type)
 352     {
 353         if(this._isEmpty) {
 354             return false;
 355         }
 356
 357         // encryption ?
 358         return this.canvasEl().dom.toDataURL('image/'+type, false);
 359     },
 360
 361     drawFromImage: function(img_src)
 362     {
 363         var img = new Image();
 364
 365         img.src = img_src;
 366
 367         this.canvasElCtx().drawImage(img, 0, 0);
 368     },
 369
 370     // Bezier Point Constructor
 371     Point: (function () {
 372         function Point(x, y, time) {
 373             this.x = x;
 374             this.y = y;
 375             this.time = time || Date.now();
 376         }
 377         Point.prototype.distanceTo = function (start) {
 378             return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
 379         };
 380         Point.prototype.equals = function (other) {
 381             return this.x === other.x && this.y === other.y && this.time === other.time;
 382         };
 383         Point.prototype.velocityFrom = function (start) {
 384             return this.time !== start.time
 385             ? this.distanceTo(start) / (this.time - start.time)
 386             : 0;
 387         };
 388         return Point;
 389     }()),
 390
 391
 392     // Bezier Constructor
 393     Bezier: (function () {
 394         function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) {
 395             this.startPoint = startPoint;
 396             this.control2 = control2;
 397             this.control1 = control1;
 398             this.endPoint = endPoint;
 399             this.startWidth = startWidth;
 400             this.endWidth = endWidth;
 401         }
 402         Bezier.fromPoints = function (points, widths, scope) {
 403             var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2;
 404             var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1;
 405             return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
 406         };
 407         Bezier.calculateControlPoints = function (s1, s2, s3, scope) {
 408             var dx1 = s1.x - s2.x;
 409             var dy1 = s1.y - s2.y;
 410             var dx2 = s2.x - s3.x;
 411             var dy2 = s2.y - s3.y;
 412             var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
 413             var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
 414             var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
 415             var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
 416             var dxm = m1.x - m2.x;
 417             var dym = m1.y - m2.y;
 418             var k = l2 / (l1 + l2);
 419             var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
 420             var tx = s2.x - cm.x;
 421             var ty = s2.y - cm.y;
 422             return {
 423                 c1: new scope.Point(m1.x + tx, m1.y + ty),
 424                 c2: new scope.Point(m2.x + tx, m2.y + ty)
 425             };
 426         };
 427         Bezier.prototype.length = function () {
 428             var steps = 10;
 429             var length = 0;
 430             var px;
 431             var py;
 432             for (var i = 0; i <= steps; i += 1) {
 433                 var t = i / steps;
 434                 var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
 435                 var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
 436                 if (i > 0) {
 437                     var xdiff = cx - px;
 438                     var ydiff = cy - py;
 439                     length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
 440                 }
 441                 px = cx;
 442                 py = cy;
 443             }
 444             return length;
 445         };
 446         Bezier.prototype.point = function (t, start, c1, c2, end) {
 447             return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
 448             + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
 449             + (3.0 * c2 * (1.0 - t) * t * t)
 450             + (end * t * t * t);
 451         };
 452         return Bezier;
 453     }()),
 454
 455     throttle: function(fn, wait) {
 456       if (wait === void 0) { wait = 250; }
 457       var previous = 0;
 458       var timeout = null;
 459       var result;
 460       var storedContext;
 461       var storedArgs;
 462       var later = function () {
 463           previous = Date.now();
 464           timeout = null;
 465           result = fn.apply(storedContext, storedArgs);
 466           if (!timeout) {
 467               storedContext = null;
 468               storedArgs = [];
 469           }
 470       };
 471       return function wrapper() {
 472           var args = [];
 473           for (var _i = 0; _i < arguments.length; _i++) {
 474               args[_i] = arguments[_i];
 475           }
 476           var now = Date.now();
 477           var remaining = wait - (now - previous);
 478           storedContext = this;
 479           storedArgs = args;
 480           if (remaining <= 0 || remaining > wait) {
 481               if (timeout) {
 482                   clearTimeout(timeout);
 483                   timeout = null;
 484               }
 485               previous = now;
 486               result = fn.apply(storedContext, storedArgs);
 487               if (!timeout) {
 488                   storedContext = null;
 489                   storedArgs = [];
 490               }
 491           }
 492           else if (!timeout) {
 493               timeout = window.setTimeout(later, remaining);
 494           }
 495           return result;
 496       };
 497   }
 498
 499 });
 500
 501
 502
 503