Assinatura na tela do celular

Olá alguém já utilizou alguma biblioteca do Fluig que possibilite assinar documento na tela do celular com o dedo

E o fluig tem API de assinatura?

Coloca esse código no corpo de uma widget nova. Ativa a widget no mobile e depois testa.
Clica no botão inicialize no mobile e da uma olhada. ta bem perto do que você quer. So tem um problema que se resolver ta top.

<style>
	body {
	    padding: 50px;
	    font-family: sans-serif;
	}
	
	#box {
	    width:  100px;
	    height: 100px;
	    background-color: red;
	}
</style>
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
	<canvas id="canvas" width="400" height="400" style="border:solid black 1px;">
		You really badly need to use a different browser.
	</canvas>
	<br>
	<button onclick="window.startup();">Initialize</button>
	<br>
	Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
</div>
<script>
	function startup() {
	  var el =document.body;
	  el.addEventListener("touchstart", handleStart, false);
	  el.addEventListener("touchend", handleEnd, false);
	  el.addEventListener("touchcancel", handleCancel, false);
	  el.addEventListener("touchleave", handleEnd, false);
	  el.addEventListener("touchmove", handleMove, false);
	  log("initialized.");
	}
	var ongoingTouches = new Array;
	function handleStart(evt) {
	    
	 
	//  log("touchstart.");
	  var el = document.getElementsByTagName("canvas")[0];
	  var ctx = el.getContext("2d");
	  var touches = evt.changedTouches;
	var offset = findPos(el);  
	    
	   
	  for (var i = 0; i < touches.length; i++) {
	      if(touches[i].clientX-offset.x >0 && touches[i].clientX-offset.x < parseFloat(el.width) && touches[i].clientY-offset.y >0 && touches[i].clientY-offset.y < parseFloat(el.height)){
	            evt.preventDefault();
	    log("touchstart:" + i + "...");
	    ongoingTouches.push(copyTouch(touches[i]));
	    var color = colorForTouch(touches[i]);
	    ctx.beginPath();
	    ctx.arc(touches[i].clientX-offset.x, touches[i].clientY-offset.y, 4, 0, 2 * Math.PI, false); // a circle at the start
	    ctx.fillStyle = color;
	    ctx.fill();
	    log("touchstart:" + i + ".");
	  }
	  }
	}
	function handleMove(evt) {
	
	  var el = document.getElementsByTagName("canvas")[0];
	  var ctx = el.getContext("2d");
	  var touches = evt.changedTouches;
	  var offset = findPos(el);
	
	  for (var i = 0; i < touches.length; i++) {
	        if(touches[i].clientX-offset.x >0 && touches[i].clientX-offset.x < parseFloat(el.width) && touches[i].clientY-offset.y >0 && touches[i].clientY-offset.y < parseFloat(el.height)){
	              evt.preventDefault();
	      var color = colorForTouch(touches[i]);
	    var idx = ongoingTouchIndexById(touches[i].identifier);
	    
	    if (idx >= 0) {
	      log("continuing touch " + idx);
	      ctx.beginPath();
	      log("ctx.moveTo(" + ongoingTouches[idx].clientX + ", " + ongoingTouches[idx].clientY + ");");
	      ctx.moveTo(ongoingTouches[idx].clientX-offset.x, ongoingTouches[idx].clientY-offset.y);
	      log("ctx.lineTo(" + touches[i].clientX + ", " + touches[i].clientY + ");");
	      ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
	      ctx.lineWidth = 4;
	      ctx.strokeStyle = color;
	      ctx.stroke();
	      
	      ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
	      log(".");
	    } else {
	      log("can't figure out which touch to continue");
	    }
	  }
	        }
	}
	function handleEnd(evt) {
	
	//  log("touchend/touchleave.");
	  var el = document.getElementsByTagName("canvas")[0];
	  var ctx = el.getContext("2d");
	  var touches = evt.changedTouches;
	  var offset = findPos(el);
	        
	  for (var i = 0; i < touches.length; i++) {
	              if(touches[i].clientX-offset.x >0 && touches[i].clientX-offset.x < parseFloat(el.width) && touches[i].clientY-offset.y >0 && touches[i].clientY-offset.y < parseFloat(el.height)){
	                    evt.preventDefault();
	    var color = colorForTouch(touches[i]);
	    var idx = ongoingTouchIndexById(touches[i].identifier);
	        
	    if (idx >= 0) {
	      ctx.lineWidth = 4;
	      ctx.fillStyle = color;
	      ctx.beginPath();
	      ctx.moveTo(ongoingTouches[idx].clientX-offset.x, ongoingTouches[idx].clientY-offset.y);
	      ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
	      ctx.fillRect(touches[i].clientX - 4-offset.x, touches[i].clientY - 4-offset.y, 8, 8); // and a square at the end
	      ongoingTouches.splice(i, 1); // remove it; we're done
	    } else {
	      log("can't figure out which touch to end");
	    }
	  }
	        }
	}
	function handleCancel(evt) {
	  evt.preventDefault();
	  log("touchcancel.");
	  var touches = evt.changedTouches;
	  
	  for (var i = 0; i < touches.length; i++) {
	    ongoingTouches.splice(i, 1); // remove it; we're done
	  }
	}
	function colorForTouch(touch) {
	  var r = touch.identifier % 16;
	  var g = Math.floor(touch.identifier / 3) % 16;
	  var b = Math.floor(touch.identifier / 7) % 16;
	  r = r.toString(16); // make it a hex digit
	  g = g.toString(16); // make it a hex digit
	  b = b.toString(16); // make it a hex digit
	  var color = "#" + r + g + b;
	  log("color for touch with identifier " + touch.identifier + " = " + color);
	  return color;
	}
	function copyTouch(touch) {
	  return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY};
	}
	function ongoingTouchIndexById(idToFind) {
	  for (var i = 0; i < ongoingTouches.length; i++) {
	    var id = ongoingTouches[i].identifier;
	    
	    if (id == idToFind) {
	      return i;
	    }
	  }
	  return -1; // not found
	}
	function log(msg) {
	  var p = document.getElementById('log');
	  p.innerHTML = msg + "\n" + p.innerHTML;
	}
	 
	function findPos (obj) {
	    var curleft = 0,
	        curtop = 0;
	
	    if (obj.offsetParent) {
	        do {
	            curleft += obj.offsetLeft;
	            curtop += obj.offsetTop;
	        } while (obj = obj.offsetParent);
	
	        return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
	    }
	}

</script>