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