Question

我正在尝试在Canvas上绘制签名，但签名未显示。我需要画布适合100％的宽度，签名需要在不拉伸的情况下显示。这是代码。

这是我的代码：

HTML：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile 1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css"  />
<link rel="stylesheet" type="text/css" href="css/index.css"  />
<div data-role="page">
<div id="divcontent" data-role="content">
<table border='0' width="100%" >
    <tr>
        <td style='background-color:blue'>
        <div id="sketch">
        <canvas id="paint"  style='width:100%;height:90px;background-  color:yellow'></canvas>
        </div>
        </td>
      </tr>
</table>
</div>

Js：

<script>
  (function() {
var canvas = document.querySelector('#paint');
 var ctx = canvas.getContext('2d');

 var sketch = document.querySelector('#sketch');
 var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};

/* Mouse Capturing Work */
canvas.addEventListener('mousemove', function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;
    //alert("call");
    console.log(mouse.x);
    mouse.x = e.pageX - this.offsetLeft-6;
    mouse.y = e.pageY - this.offsetTop-356;
    console.log("muse y:"+mouse.y);
}, false);


/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'red';

canvas.addEventListener('mousedown', function(e) {
    canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
console.log("paint");
console.log("last_mouse.x"+last_mouse.x);
console.log("last_mouse.y"+last_mouse.y);
    ctx.beginPath();

    ctx.moveTo(last_mouse.x, last_mouse.y);
    ctx.lineTo(mouse.x, mouse.y);
    console.log("paint mouse.x"+mouse.x);
    console.log("paint mouse.y"+mouse.y);
    ctx.closePath();
    ctx.strokeStyle="red";
    ctx.stroke();
};

 }());

 </script>

如何修复此问题以便绘制签名。

Answer 1

首先下载一个支持触控的jquery插件，用于从

画布上绘图

https://github.com/jimdoescode/jqScribble

它适用于桌面浏览器和移动设备。

在html文件中添加以下脚本

<script src="js/jquery.jqscribble.js" type="text/javascript"></script>
<script src="js/jqscribble.extrabrushes.js" type="text/javascript"></script>

<强> HTML

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Signature demo</title>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
   <script src="js/jquery.jqscribble.js" type="text/javascript"></script>
   <script src="js/jqscribble.extrabrushes.js" type="text/javascript"></script>   
</head>
<body>      
  <div data-role="page" id="page_id" >
    <div data-role="header" data-position="fixed">           
    </div>
    <div role="main" class="ui-content" style="margin-top:60px;" >
        <div class="heading">CREATE SIGNATURE HERE</div>
        <canvas id="canvas" style="border: 1px solid red;"></canvas>
        <input type="button" data-ajax="false" onclick='save();'  class="ui-btn" value="Accept" />
        <input type="button" data-ajax="false" onclick='$("#canvas").data("jqScribble").clear();'  class="ui-btn" value="Resign" />
    </div>
   </div> 
</body>
</html>

<强> JAVASCRIPT

function save()
{

    $("#canvas").data("jqScribble").save(function(imageData)
    {           
        if(confirm("Are you sure want to save a signature image?"))
        {
            $.post('your_sign.php', {imagedata: imageData}, function(response)
            {
                 alert(imageData)

            });

        }else{
            return;
        }
    });
}

$(document).ready(function()
{
    $("#canvas").jqScribble();
    $(document).bind('touchmove', false);
});

Answer 2

使用您的签名填充画布需要几个步骤：

以点阵数捕获用户签名笔划。
计算缩放签名的数量。
在画布上绘制缩放的签名。

以下是如何操作：

捕获点数组中的用户签名笔划。

在应用开始时，创建一个空点[]数组：var points = [];
在mousemove中：将每个鼠标坐标添加到points []数组：points.push（{x：mouseX，y：mouseY}）;

用户完成后，计算这些点的边界框。

您可以通过迭代points []数组中的每个点并保存minimumX，minimumY，maximumX和maximumY来实现此目的。

然后计算签名宽度和高度：

var sigWidth=maximumX-minumumX;
var sigHeight=maximumY-minumumY;

计算扩展签名的数量。

现在您知道签名大小和画布大小，因此您可以计算缩放因子以应用于签名的宽度和高度。

使签名填充画布。
在保持原始签名的宽高比的同时进行缩放，使其不会扭曲。

计算scaling factor：

function scalePreserveAspectRatio(sigWidth,sigHeight,canvasWidth,canvasHeight){

    return(Math.min((canvasWidth/sigWidth),(canvasHeight/sigHeight)));

}

在画布上绘制缩放的签名

// left-top justify all the points in the points[] array
for(var i=0;i<points.length;i++){
    points.x-=minimumY;
    points.y-=minumumY
}

// get the scaling factor

var scale=scalePreserveAspectRatio(sigWidth,sigHeight,canvas.width,canvas.height);

// draw the points multiplied by the scaling factor

context.clearRect(0,0,canvas.width,canvas.height);
context.beginPath();
context.moveTo( points[0].x*scale, points[0].y*scale );
for(var i=1;i<points.length;i++){
    context.lineTo( points[i].x*scale, points[i].y*scale );
}

// stroke the signature

context.stroke();

获得更具视觉吸引力的签名

对你的points []数组应用线条简化算法（少点==少＆＃34; jaggies＆＃34;）。

将线条平滑算法应用于points []数组（使用样条线进行签名＆＃34; curvey＆＃34;）。

签名没有在html5中的Canvas元素上显示

2 个答案: