标签: signaturepad

我正在使用SignaturePad,Xamarin.Forms即使在基本的硬件设备上它也能正常工作,但我只用一台设备就遇到了奇怪的行为:三星Galaxy Tab E 7.0 3G SM-T116平板电脑.

问题是SignaturePad视图上的笔划仅在从屏幕释放触摸时显示.例如,如果我慢慢地将一条长边水平放到侧边,整个笔划是不可见的,直到我释放屏幕触摸.

任何人都有类似的情况？我该如何解决它？

非常感谢.

如标题中所述，我正在尝试使用 Rails 的 Active Storage 从嵌套在 Rails 表单中的元素将图像上传到我的 S3 存储桶。到目前为止，我已经能够使用 <%= f.input :signature, type: file_field(:user, :signature), %> Active Storage 上传图像。班上。User​ has_one_attached :signature当我使用 file_field 时，图像上传正确，因此这不是问题的一部分。

到目前为止我的simple_form有：

  <div class="signature_pad text-center form-group">
    <div class="signature_pad_heading">
      Enter your Signature:
    </div>
    <div class="signature_pad_body">
      <canvas id="signature_pad_input" height="145px" width="370px" style="height: 145px; width: 370px;" class="border" />
    </div>
    <div class="signature_pad_footer">
      <button type="button" class="btn btn-default" onclick="signaturePad.clear()">Clear</button>
    </div>
  </div>

  <%= f.input :signature, type: file_field(:user, :signature), value: "", as: :hidden %>

  <%= f.submit "Save", class:'btn-primary btn-lg btn-md-wide',  id: …

我一直在使用 Thomas J. Bradley 的 jQuery Signature Pad 插件来捕获绘制的签名，并且效果很好。我想做的还允许输入签名，如演示中所示，但让它输出与绘制签名（JSON 表示）相同的数据。

由于数据输出是光标在画布上移动时的实际坐标，我猜测它必须模拟鼠标或触摸移动。我找到了另一个关于在画布上绘制文本的 Stackoverflow 答案。有没有办法模拟绘制文本的跟踪？如果是这样，这可能是一种解决方案。

更新

我放弃了原来的计划。

由于我的最终目标是无论使用键入的签名还是绘制的签名都获得相同的输出，因此我决定使用提供的getSignatureImage()方法。但是，该getSignatureImage()方法仅适用于签名的绘制版本。我实现了以下代码来将键入的签名“绘制”到临时画布上：

var canvas = $("canvas").get(0);
var ctx = canvas.getContext("2d");

// signature_name is the id of the input element
var tempCanvasHtml = '<canvas id="temp_canvas" style="display:none;" width="400" height="120"></canvas>';
$(".signature_form").append(tempCanvasHtml);
var tempCanvas = $("#temp_canvas").get(0);
var tempCtx = tempCanvas.getContext("2d");
tempCtx.font = "3.875em/50px 'Journal',Georgia,Times,serif";
tempCtx.fillStyle = '#145394';
tempCtx.fillText($("#signature_name").val(), 5, 90);
var img = tempCanvas.toDataURL("image/png");
tempCanvas.remove();

当签名被接受或提交表单时，我运行此代码。如果签名是绘制的getSignatureImage()，我使用 ，当它输入时，我使用上面的代码。

注意：使用此代码将生成没有画布背景的图像，该插件不支持getSignatureImage(). …

我正在使用这个插件。

我的应用程序通过 ajax 调用提交签名。在成功返回 ajax 时，我想禁用用户的任何签名更改。我尝试的最后一件事是以下内容，但签名板仍然处于活动状态并绘制线条（听众不会分离）：

   function showResponse(itemJson, statusText, xhr, $form) {

    if (itemJson.status == 'success') {

        debugger;

        $($form.find('.clearButton')).remove();
        $($form.find('button')).remove();

        $form.find('input').attr('readonly', 'readonly');

        var api = $form.signaturePad();
        var sig = api.getSignatureString();

        api.updateOptions({displayOnly: true})
//        $form.signaturePad({displayOnly: true}).regenerate(sig);

    }
}

有谁知道如何更新现有的signaturePad，使其变为禁用模式？

我正在尝试在我的ionic 3项目中实现angular2签名板，但出现上述问题时出现错误。我正在关注本教程链接。它在ionic2中工作正常，但是当我在ionic 3中尝试时，出现如下错误

Failed to navigate:  Template parse errors:
Can't bind to 'options' since it isn't a known property of 'signature-pad'.
1. If 'signature-pad' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'signature-pad' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    <ion-col></ion-col>
    <ion-col> …

我正在使用MVVM体系结构中的Prism框架开发Xamarin.Forms应用程序。我需要从屏幕上收集签名，因此我决定包括SignaturePad库。在NuGet中，我包括了Xamarin.Controls.SignaturePad和Xamarin.Controls.SignaturePad.Forms包。在页面布局（使用XAML构建）中，我具有签名小部件：

<signature:SignaturePadView 
             x:Name="padView"
             HeightRequest="130"                                
             CaptionText="Sign"
             CaptionTextColor="Black"
             ClearText="Clean"
             ClearTextColor="Black"
             BackgroundColor="White"
             SignatureLineColor="Black"
             StrokeWidth="2"
             StrokeColor="Black"
             BindingContext="{Binding Sign, Mode=TwoWay}" />

在ViewModel中，小部件绑定：

private SignaturePadView _sign;
public SignaturePadView Sign
{
    get { return _sign; }
    set { SetProperty(ref _sign, value); }
}

在ViewModel构造函数中：

_sign = new SignaturePadView();

还有一个按钮，在此按钮的动作中，我需要阅读标志图像并将其保存到数据库中。我尝试了这个：

Stream sig = await Sign.GetImageStreamAsync(SignatureImageFormat.Png);
var signatureMemoryStream = sig as MemoryStream;
byte[] data = signatureMemoryStream.ToArray();            

所有这些代码都写在可移植项目中。不幸的是，它不起作用，因为sig对象始终为null。我认为问题在于小部件绑定，但我不确定。

我试图了解如何在React Native中进行签名捕获.我的应用程序是使用create-react-native-app和创建的,Expo我不想弹出应用程序以使此功能正常工作.

是否有可能在webview中包装这样的东西？https://github.com/szimek/signature_pad

我也看过这个项目,https://github.com/RepairShopr/react-native-signature-capture但它要求我弹出应用程序并使用它react-native link.

寻找有关如何实现此功能的任何建议或建议,同时尽可能简化项目(理想情况下,使用create-react-native-app,但如果不可能,有人可以向我解释原因吗？)

我正在尝试在引导模式中使用签名板，我在 div 中有一个画布：

<div class="modal-body">
    <div class='signature-container' >
        <canvas id="signature"></canvas>
        </canvas>
</div>

在初始化时，我执行（coffeescript）：

canvas = $("canvas#signature")[0]
  signature_pad = new SignaturePad(canvas, backgroundColor: 'rgb(255, 255, 255)')

我的画布 css 是（因为我希望画布填充 div）

宽度：100%；高度：100%；

一切正常，但“墨水”偏离了鼠标指针。当我第一次单击时，初始墨迹出现在鼠标指针的右侧和下方。鼠标移动得越远，垂直偏移就越远，与水平方向相同（即偏移看起来呈线性缩放）。我尝试在演示中实现调整大小功能，但 chrome 将 offsetWidth 计算为 0 并且画布只是缩小到 0x0。

有人知道我做错了什么吗？

我在使用 npm 模块 - signature_pad 时遇到问题，似乎无法设置它。目前我使用的只是普通的 HTML、CSS 和 JS。目前，我不断收到错误消息：SignaturePad is not defined. 我尝试从我的 package.JSON 文件中导入模块，import SignaturePad from 'signature_pad'但我收到一条错误消息，说unexpected token import.

我在下面附上了我的 HTML 和 JS 代码。有什么建议？

JavaScript

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

function resizeCanvas(canvas) {
   var ratio =  window.devicePixelRatio || 1;
   canvas.width = canvas.offsetWidth * ratio;
   canvas.height = canvas.offsetHeight * ratio;
   canvas.getContext("2d").scale(ratio, ratio);
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sign Here</title>
    <link rel="stylesheet" href="main.css">
  </head> …

我正在使用jquery.validate.js来验证表单中的多个字段以及smizek 的 signature_pad。我想验证是否在 html 画布（签名板）上绘制了某些内容，同时验证了所有其他输入字段。

不幸的是，向 jquery 验证提交处理程序添加一个函数来检查画布是否具有签名是不够的，因为这仅在满足所有其他必需字段后才会触发。我可以向 jquery 验证器添加方法，但我很确定这些方法只能用于验证输入的内容，而不是画布。

我可以使用“signaturePad.isEmpty()”检查签名是否存在。理想情况下，有一种方法可以添加这样的函数，该函数与任何验证同时发生：

    var errorExists = false;
    if( signaturePad.isEmpty()){
      if (errorExists == false){
        $( "#signature-pad" ).append( "<div id="sig-error">A signature is required</div>" );
        errorExists = true;
      }
    }else if( !signaturePad.isEmpty()) {
      if (errorExists == true){
        $('#sig-error').remove();
      }
    }

...并且只有在满足 jquery 验证和签名的情况下才继续实际提交表单。

有没有办法在其他验证发生的同时触发一个函数——而不是在之后？除非满足我的两个条件 - 不仅仅是 jquery 验证，否则如何阻止表单提交？