jSignature移动端竖屏状态的横屏签字处理-前端开发-郭俊杰的知识库

jSignature移动端竖屏状态的横屏签字处理

Data: 2021-03-20 18:56:41Form: JournalClick: 11

jSignature移动端竖屏状态的横屏签字处理

真正的拿来即用,啥也不用修改,看我github
https://github.com/zxyaust/Jquery_Signature_Demo
github链接
在这里插入图片描述

<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();
}

我是 PHP 程序员

jSignature移动端竖屏状态的横屏签字处理