HTML5 中canvas支持触摸屏的签名面板

@{
  Layout = null;
}



  
  
  
  
  
  
  


  点击我

/**
 * 功能：签名canvas面板初始化,为WritingPad.js手写面板js服务。
 * 作者：黄金锋 (549387177@qq.com)
 * 日期：2015-11-15  15:51:01
 * 版本：version 1.0
 */

(function (window, document, $) {
    'use strict';

  // Get a regular interval for drawing to the screen
  window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || 
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimaitonFrame ||
      function (callback) {
        window.setTimeout(callback, 1000/60);
      };
  })();

  /*
  * Plugin Constructor
  */

  var pluginName = 'jqSignature',
      defaults = {
        lineColor: '#222222',
        lineWidth: 1,
        border: '1px dashed #CCFF99',
        background: '#FFFFFF',
        width: 500,
        height: 200,
        autoFit: false
      },
      canvasFixture = '';

  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 base64 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') !== -1) { // event.constructor === TouchEvent
        xPos = event.touches[0].clientX - rect.left;
        yPos = event.touches[0].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');
    }
  };

  /*
  * Plugin wrapper and initialization
  */

  $.fn[pluginName] = function ( options ) {
    var args = arguments;
    if (options === undefined || typeof options === 'object') {
      return this.each(function () {
        if (!$.data(this, 'plugin_' + pluginName)) {
          $.data(this, 'plugin_' + pluginName, new Signature( this, options ));
        }
      });
    } 
    else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
      var returns;
      this.each(function () {
        var instance = $.data(this, 'plugin_' + pluginName);
        if (instance instanceof Signature && typeof instance[options] === 'function') {
            var myArr=Array.prototype.slice.call( args, 1 );
            returns = instance[options].apply(instance, myArr);
        }
        if (options === 'destroy') {
          $.data(this, 'plugin_' + pluginName, null);
        }
        //if (options === 'reLoadData') {
        //    //this.$canvas.remove();
        //    $.data(this, 'plugin_' + pluginName, null);
        //    this._data = this.$element.data();
        //    this.settings = $.extend({}, defaults, options, this._data);
        //    this.init();
        //}
      });
      return returns !== undefined ? returns : this;
    }
  };

})(window, document, jQuery);

/**
 * 功能：使用该jQuery插件来制作在线签名或涂鸦板，用户绘制的东西可以用图片的形式保存下来。
 * 作者：黄金锋 (549387177@qq.com)
 * 日期：2015-11-16  13:51:01
 * 版本：version 1.0
 */
var WritingPad = function () {
  var current = null;
  $(function () {
    initHtml();
    initTable();
    initSignature();
    if ($(".modal")) {
      $(".modal").modal("toggle");
    } else {
      alert("没用手写面板");
    }
    $(document).on("click", "#myClose,.close", null, function () {
      $('#mymodal').modal('hide');
      $("#mymodal").remove();
    });
    $(document).on("click", "#mySave", null, function () {
      var myImg = $('#myImg').empty();
      var dataUrl = $('.js-signature').jqSignature('getDataURL');
      var img = $('@@##@@').attr('src', dataUrl);
      $(myImg).append($('
').text("图片保存在这里"));
      $(myImg).append(img);
    });
    $(document).on("click", "#myEmpty", null, function () {
      $('.js-signature').jqSignature('clearCanvas');
    });
    $(document).on("click", "#myBackColor", null, function () {
      $('#colorpanel').css('left', '95px').css('top', '45px').css("display", "block").fadeIn();
      //$("canvas").css("background", "#EEEEEE");
      $("#btnSave").data("sender", "#myBackColor");
    });
    $(document).on("click", "#myColor", null, function () {
      $('#colorpanel').css('left', '205px').css('top', '45px').css("display", "block").fadeIn();
      $("#btnSave").data("sender", "#myColor");
    });
    $(document).on("mouseover", "#myTable", null, function () {
      if ((event.srcElement.tagName == "TD") && (current != event.srcElement)) {
        if (current != null) { current.style.backgroundColor = current._background }
        event.srcElement._background = event.srcElement.style.backgroundColor;
        //$("input[name=DisColor]").css("background-color", event.srcElement.style.backgroundColor);
        //var color = event.srcElement.style.backgroundColor;
        //var strArr = color.substring(4, color.length - 1).split(',');
        //var num = showRGB(strArr);
        //$("input[name=HexColor]").val(num);
        current = event.srcElement;
      }
    });
    $(document).on("mouseout", "#myTable", null, function () {
      if (current != null) current.style.backgroundColor = current._background
    });
    $(document).on("click", "#myTable", null, function () {
      if (event.srcElement.tagName == "TD") {
        var color = event.srcElement._background;
        if (color) {
          $("input[name=DisColor]").css("background-color", color);
          var strArr = color.substring(4, color.length - 1).split(',');
          var num = showRGB(strArr);
          $("input[name=HexColor]").val(num);
        }
      }
    });
    $(document).on("click", "#btnSave", null, function () {
      $('#colorpanel').css("display", "none");
      var typeData = $("#btnSave").data("sender");
      var HexColor = $("input[name=HexColor]").val();
      var data = $(".js-signature").data();
      if (typeData == "#myColor") {
        data["plugin_jqSignature"]["settings"]["lineColor"] = HexColor;
        $('.js-signature').jqSignature('reLoadData');
      }
      if (typeData == "#myBackColor") {
        data["plugin_jqSignature"]["settings"]["background"] = HexColor;
        $('.js-signature').jqSignature('reLoadData');
      }
    });
    $("#mymodal").on('hide.bs.modal', function () {
      $("#colorpanel").remove();
      $("#mymodal").remove();
      $("#myTable").remove();
    });
  });
  function initHtml() {
    var html = '
' +
      '
' +
        '
' +
          '
' +
            '×Close' +
            '
手写面板
' +
          '
' +
          '
' +
            '
' +
             '
' +
             '
' +
             '清空面板' +
             '设置背景颜色' +
             //'
' +
             '设置字体颜色' +
             '
' +
             //'
'+
             '
' +
          '
' +
          '
' +
            '关闭' +
            '保存' +
            '
' +
            '
' +
          '
' +
        '
' +
      '
' +
    '
';
    $('body').append(html);
  }
  function initTable() {
    var colorTable = "";
    var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
    var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
    for (var i = 0; i < 2; i++)
    {
      for (var j = 0; j < 6; j++)
      {
        colorTable = colorTable + '';
        colorTable = colorTable + '';
        if (i == 0)
        {
          colorTable = colorTable + '';
        }
        else
        {
          colorTable = colorTable + '';
        }
        //colorTable = colorTable + '';
        for (var k = 0; k < 3; k++)
        {
          for (l = 0; l < 6; l++)
          {
            colorTable = colorTable + '';
          }
        }
        colorTable = colorTable + '';
      }
    }
    colorTable =
    ''
    + colorTable + '' +
    '' +
    '' +
    '' +
    '' +
    '
' +
    '' +
    '' +
    '' +
    '' +
     '' +
    '' +
    '
确认
' +
    '
';
    $("#colorpanel").append(colorTable);
  }
  function initSignature() {
    if (window.requestAnimFrame) {
      var signature = $("#mySignature");
      signature.jqSignature({ width: 500, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: false });
      //{ width: 600, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: true }
    } else {
      alert("请加载jq-signature.js");
      return;
    }
  }
  function showRGB(arr) {
    hexcode = "#";
    for (x = 0; x < 3; x++) {
      var n = arr[x];
      if (n == "") n = "0";
      if (parseInt(n) != n)
        return alert("RGB颜色值不是数字！");
      if (n > 255)
        return alert("RGB颜色数字必须在0-255之间！");
      var c = "0123456789ABCDEF", b = "", a = n % 16;
      b = c.substr(a, 1); a = (n - a) / 16;
      hexcode += c.substr(a, 1) + b
    }
    return hexcode;
  }
  function init() {
  }
  return {
    init: function () {
      init();
    }
  };