我们先准备好准备使用的html页面和一些jSignature的简单的初始化事情：
<style>
#signature{
transform:rotate(90deg);
}
</style>
</head>
<body>
<div id="image"></div>
<button onclick="jSignatureTest()">确定</button>
<div id="signature"></div>
<!-- 这里你需要找一个jquery文件在jSignature之前引用 -->
<script src="../jquery.min.js"></script>
<script src="jSignature.js"></script>
<script>
$(function() {
$("#signature").jSignature({'UndoButton':true,'height':'100vw','width':'100vh'})
})
//输出签名图片
function jSignatureTest(){
//将画布内容转换为图片
var datapair = $("#signature").jSignature("getData", "image");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
$(i).appendTo($("#image")); // append the image (SVG) to DOM.
}
</script>
然后，好像没什么好说的。。。
直接去改jSignature.js的源码吧。
var apinamespace = 'jSignature'
//在下面添加一个获取屏幕宽度的代码
var windowWidth = document.documentElement.clientWidth;
我们即使没有自己写过canvas的基础代码，但应该都知道它的几个点、线、曲线...等的几个canvas操作代码（moveTo()、lineTo()等），一搜，就定位到basicDot、basicLine、basicCurve的几个方法，然后这样这样子一改：
var basicDot = function(ctx, y, x, size){
var fillStyle = ctx.fillStyle;
ctx.fillStyle = ctx.strokeStyle;
ctx.fillRect(x + size / -2 , windowWidth - y + size / -2, size, size);
ctx.fillStyle = fillStyle;
}
, basicLine = function(ctx, starty, startx, endy, endx){
ctx.beginPath();
ctx.moveTo(startx, windowWidth - starty);
ctx.lineTo(endx, windowWidth - endy);
ctx.closePath();
ctx.stroke();
}
, basicCurve = function(ctx, starty, startx, endy, endx, cp1y, cp1x, cp2y, cp2x){
ctx.beginPath();
ctx.moveTo(startx, windowWidth - starty);
ctx.bezierCurveTo(cp1x, windowWidth - cp1y, cp2x, windowWidth - cp2y, endx, windowWidth - endy);
ctx.closePath();
ctx.stroke();
}
完成了。
网友评论