/**
-* This script refer to:
-* Title: Signature Pad
-* Author: szimek
-* Availability: https://github.com/szimek/signature_pad
+*
**/
/**
* @class Roo.bootstrap.BezierSignature
* @extends Roo.bootstrap.Component
* Bootstrap BezierSignature class
- *
+ * This script refer to:
+ * Title: Signature Pad
+ * Author: szimek
+ * Availability: https://github.com/szimek/signature_pad
+ *
* @constructor
* Create a new BezierSignature
* @param {Object} config The config object
});
};
-Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
-
+Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
+{
+
curve_data: [],
is_empty: true,
mouse_btn_down: true,
/**
- * @cfg(int) canvas height
+ * @cfg {int} canvas height
*/
canvas_height: '200px',
/**
- * @cfg(float or function) Radius of a single dot.
+ * @cfg {float|function} Radius of a single dot.
*/
dot_size: false,
/**
- * @cfg(float) Minimum width of a line. Defaults to 0.5.
+ * @cfg {float} Minimum width of a line. Defaults to 0.5.
*/
min_width: 0.5,
/**
- * @cfg(float) Maximum width of a line. Defaults to 2.5.
+ * @cfg {float} Maximum width of a line. Defaults to 2.5.
*/
max_width: 2.5,
/**
- * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
+ * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
*/
throttle: 16,
/**
- * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
+ * @cfg {integer} Add the next point only if the previous one is farther than x pixels. Defaults to 5.
*/
min_distance: 5,
/**
- * @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.
+ * @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.
*/
bg_color: 'rgba(0, 0, 0, 0)',
/**
- * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
+ * @cfg {string} Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
*/
dot_color: 'black',
/**
- * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
- */
+ * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
+ */
velocity_filter_weight: 0.7,
/**
- * @cfg(function) Callback when stroke begin.
+ * @cfg {function} Callback when stroke begin.
*/
onBegin: false,
/**
- * @cfg(function) Callback when stroke end.
+ * @cfg {function} Callback when stroke end.
*/
onEnd: false,
width: this.canvas_width
}
]
+ },
+ {
+ tag: 'input',
+ type: 'file',
+ style: 'display: none'
}
]
};
canvas.on('mousemove', this._handleMouseMove, this);
Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
- if (window.ontouchstart) {
+ if (window.PointerEvent) {
+ canvas.on('pointerdown', this._handleMouseDown, this);
+ canvas.on('pointermove', this._handleMouseMove, this);
+ Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
+ }
+
+ if ('ontouchstart' in window) {
canvas.on('touchstart', this._handleTouchStart, this);
canvas.on('touchmove', this._handleTouchMove, this);
canvas.on('touchend', this._handleTouchEnd, this);
Roo.EventManager.onWindowResize(this.resize, this, true);
+ // file input event
+ this.fileEl().on('change', this.uploadImage, this);
+
this.clear();
this.resize();
},
resize: function(){
+
var canvas = this.canvasEl().dom;
var ctx = this.canvasElCtx();
+ var img_data = false;
- var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
- // setting canvas width will clean img data inside
+ if(canvas.width > 0) {
+ var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ }
+ // setting canvas width will clean img data
canvas.width = 0;
var style = window.getComputedStyle ?
getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
-
+
var padding_left = parseInt(style.paddingLeft) || 0;
var padding_right = parseInt(style.paddingRight) || 0;
canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
- ctx.putImageData(img_data, 0, 0);
+ if(img_data) {
+ ctx.putImageData(img_data, 0, 0);
+ }
},
_handleMouseDown: function(e)
},
_handleTouchStart: function (e) {
+
e.preventDefault();
if (e.browserEvent.targetTouches.length === 1) {
// var touch = e.browserEvent.changedTouches[0];
e.preventDefault();
// var touch = event.targetTouches[0];
// _this._strokeMoveUpdate(touch);
- this._strokeMoveUpdate(e);
+ this.strokeMoveUpdate(e);
},
_handleTouchEnd: function (e) {
this.is_empty = true;
},
+ fileEl: function()
+ {
+ return this.el.select('input',true).first();
+ },
+
canvasEl: function()
{
return this.el.select('canvas',true).first();
}
// encryption ?
- return this.canvasEl().dom.toDataURL('image/'+type, false);
+ return this.canvasEl().dom.toDataURL('image/'+type, 1);
},
drawFromImage: function(img_src)
{
var img = new Image();
+ img.onload = function(){
+ this.canvasElCtx().drawImage(img, 0, 0);
+ }.bind(this);
+
img.src = img_src;
- this.canvasElCtx().drawImage(img, 0, 0);
+ this.is_empty = false;
+ },
+
+ selectImage: function()
+ {
+ this.fileEl().dom.click();
+ },
+
+ uploadImage: function(e)
+ {
+ var reader = new FileReader();
+
+ reader.onload = function(e){
+ var img = new Image();
+ img.onload = function(){
+ this.reset();
+ this.canvasElCtx().drawImage(img, 0, 0);
+ }.bind(this);
+ img.src = e.target.result;
+ }.bind(this);
+
+ reader.readAsDataURL(e.target.files[0]);
},
// Bezier Point Constructor
projects / roojs1 / blobdiff