- Plugin Constructor
- */
- var pluginName = 'jqSignature',
- defaults = {
- lineColor: '#222222',
- lineWidth: 1,
- border: '1px dashed #CCFF99',
- background: '#FFFFFF',
- width: 600,
- height: 600,
- autoFit: false
- },
- canvasFixture = '<canvas></canvas>';
- function Signature(element, options) {
- // DOM elements/objects
- this.element = element;
- this.$element = $(this.element);
- this.canvas = false;
- this.$canvas = false;
- this.ctx = false;
- // Drawing state
- this.drawing = false;
- this.currentPos = {
- x: 0,
- y: 0
- };
- this.lastPos = this.currentPos;
- // Determine plugin settings
- this._data = this.$element.data();
- this.settings = $.extend({}, defaults, options, this._data);
- // Initialize the plugin
- this.init();
- }
- Signature.prototype = {
- // Initialize the signature canvas
- init: function() {
- // Set up the canvas
- this.$canvas = $(canvasFixture).appendTo(this.$element);
- this.$canvas.attr({
- width: this.settings.width,
- height: this.settings.height
- });
- this.$canvas.CSS({
- boxSizing: 'border-box',
- width: this.settings.width + 'px',
- height: this.settings.height + 'px',
- border: this.settings.border,
- background: this.settings.background,
- cursor: 'crosshair'
- });
- // Fit canvas to width of parent
- if (this.settings.autoFit === true) {
- this._resizeCanvas();
- }
- this.canvas = this.$canvas[0];
- this._resetCanvas();
- // Set up mouse events
- this.$canvas.on('mousedown touchstart', $.proxy(function(e) {
- this.drawing = true;
- this.lastPos = this.currentPos = this._getPosition(e);
- }, this));
- this.$canvas.on('mousemove touchmove', $.proxy(function(e) {
- this.currentPos = this._getPosition(e);
- }, this));
- this.$canvas.on('mouseup touchend', $.proxy(function(e) {
- this.drawing = false;
- // Trigger a change event
- var changedEvent = $.Event('jq.signature.changed');
- this.$element.trigger(changedEvent);
- }, this));
- // Prevent document scrolling when touching canvas
- $(document).on('touchstart touchmove touchend', $.proxy(function(e) {
- if (e.target === this.canvas) {
- e.preventDefault();
- }
- }, this));
- // Start drawing
- var that = this;
- (function drawLoop() {
- window.requestAnimFrame(drawLoop);
- that._renderCanvas();
- })();
- },
- // Clear the canvas
- clearCanvas: function() {
- this.canvas.width = this.canvas.width;
- this._resetCanvas();
- },
- // Get the content of the canvas as a base data URL
- getDataURL: function() {
- return this.canvas.toDataURL();
- },
- reLoadData: function () {
- this.$canvas.remove();
- this._data = this.$element.data();
- //for (var i in this.settings) {
- // alert(i+":"+this.settings[i]);
- //}
- //this.settings = $.extend({}, defaults, this._data);
- this.init();
- },
- // Get the position of the mouse/touch
- _getPosition: function(event) {
- var xPos, yPos, rect;
- rect = this.canvas.getBoundingClientRect();
- event = event.originalEvent;
- // Touch event
- if (event.type.indexOf('touch') !== -) { // event.constructor === TouchEvent
- xPos = event.touches[].clientX - rect.left;
- yPos = event.touches[].clientY - rect.top;
- }
- // Mouse event
- else {
- xPos = event.clientX - rect.left;
- yPos = event.clientY - rect.top;
- }
- return {
x: xPos, y: yPos
- };
- },
- // Render the signature to the canvas
- _renderCanvas: function() {
- if (this.drawing) {
- this.ctx.moveTo(this.lastPos.x, this.lastPos.y);
- this.ctx.lineTo(this.currentPos.x, this.currentPos.y);
- this.ctx.stroke();
- this.lastPos = this.currentPos;
- }
- },
- // Reset the canvas context
- _resetCanvas: function() {
- this.ctx = this.canvas.getContext("2d");
- this.ctx.strokeStyle = this.settings.lineColor;
- this.ctx.lineWidth = this.settings.lineWidth;
- },
- // Resize the canvas element
- _resizeCanvas: function() {
- var width = this.$element.outerWidth();
- this.$canvas.attr('width', width);
- this.$canvas.css('width', width + 'px');
- }
- };
- /*
来源: http://www.qdfuns.com/article/18202/15da405eda5f9ab7ab2daf1d336bba9b.html