Necessita de um 'plugin' para desenhar assinaturas [fechado]

Signature

Preciso de um plugin jquery ou qualquer outro que me ajude a desenhar a assinatura de tipos semelhantes. Alguém poderia me dizer Onde posso encontrar tal plugin?

Author: Roko C. Buljan, 2012-11-27
Source

2 answers

Mais suave e natural 'curvas' linha pode ser alcançada utilizando o context.quadraticCurveTo()MDN

enter image description here

Apenas, o curveto quadrático só pode ter uma espessura constante, por isso, ao usar o abaixo não pode alterar facilmente a linha para fazer tons ângulos de caneta e efeitos de pressão. 

var board = {
  width: 560,
  height: 190
};
var pen = {
  color: "rgb(0, 0, 0)",
  size: 2
};
var pts = [];
var isDown = false;
var isTouch = false;
var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');
var cvs2 = document.createElement('canvas');
var ctx2 = cvs2.getContext('2d');

cvs.width = cvs2.width = board.width;
cvs.height = cvs2.height = board.height;

function penDown(ev) {
  ev.preventDefault();
  isTouch = ev.type === "touchstart";
  ev = isTouch ? ev.touches[0] : ev;
  isDown = true;
  pts.push({
    x: ev.clientX,
    y: ev.clientY
  });
  drawPoints();
}

function penMove(ev) {
  ev.preventDefault();
  ev = isTouch ? ev.touches[0] : ev;
  if (isDown) {
    ctx.clearRect(0, 0, board.width, board.height);
    ctx.drawImage(cvs2, 0, 0); // Draw to inmemory cvs2
    pts.push({
      x: ev.clientX,
      y: ev.clientY
    });
    drawPoints();
  }
}

function penUp(ev) {
  ev.preventDefault();
  isDown = isTouch = false;
  pts = [];
  // Save state to in-memory cvs2
  ctx2.clearRect(0, 0, board.width, board.height);
  ctx2.drawImage(cvs, 0, 0);
}

function clear() {
  ctx.clearRect(0, 0, board.width, board.height);
  ctx2.clearRect(0, 0, board.width, board.height);
}

function drawPoints() {
  var i = 0;
  var i2 = pts.length > 1 ? 1 : 0;
  ctx.beginPath();
  ctx.lineWidth = pen.size;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.moveTo(pts[0].x, pts[0].y);
  for (; i < pts.length - i2; i++) {
    ctx.quadraticCurveTo(
      pts[i].x,
      pts[i].y,
      (pts[i].x + pts[i + i2].x) / 2,
      (pts[i].y + pts[i + i2].y) / 2
    );
  }
  ctx.strokeStyle = pen.color;
  ctx.stroke();
  ctx.closePath();
}

// EVENTS

cvs.addEventListener('touchstart', penDown);
cvs.addEventListener('touchmove', penMove);
cvs.addEventListener('touchend', penUp);
cvs.addEventListener('mousedown', penDown);
cvs.addEventListener('mousemove', penMove);
cvs.addEventListener('mouseup', penUp);
document.getElementById("clear").addEventListener("click", clear);
body {margin:0;}
#canvas{display: block; box-shadow: inset 0 0 0 2px #ccc;}
#clear {position: absolute; top:0; left: 0;}
<canvas id='canvas'></canvas>
<button id="clear">CLEAR</button>
 4
Author: Roko C. Buljan, 2018-05-10 15:20:09

Aqui está o plugin jquery que você está procurando.

Xeque-Out JSignature

Obtenha o 'plugin' de assinaturas J e adicione às suas páginas.

 2
Author: Murali Prasanth, 2012-11-27 12:16:53