时间戳

首页 > 解决方案 > 将 Angular 2 签名板 JSON 转换为 jQuery.signaturePad JSON

javascript - 将 Angular 2 签名板 JSON 转换为 jQuery.signaturePad JSON

问题描述

我正在使用 Rails + Angular。在我的 Rails 代码中，我使用 jQuery.signaturePad，它生成如下输出：

[
  {"lx"=>0.0, "ly"=>8.0, "mx"=>0.0, "my"=>7.0},
  {"lx"=>1.0, "ly"=>10.0, "mx"=>0.0, "my"=>8.0},
  ...
]

但是，由于我有一个项目边界，我不能将 jQuery 用于 Angular 代码，所以我决定使用Angular2 SignaturePad。

因此，当我尝试以下操作时：

@ViewChild(SignaturePad) signaturePad: SignaturePad;
.
.
.
drawComplete() {
  this.signaturePad.toData()
}

它输出为：

[
  [
    {x: 85.5, y: 66, time: 1568119306312, color: "#145394"},
    {x: 90.5, y: 66, time: 1568119306375, color: "#145394"},
    {x: 97.5, y: 75, time: 1568119306407, color: "#145394"},
    {x: 105.5, y: 89, time: 1568119306424, color: "#145394"}
  ],
  [
    {x: 120.5, y: 112, time: 1568119306440, color: "#145394"},
    {x: 134.5, y: 130, time: 1568119306456, color: "#145394"},
    {x: 146.5, y: 151, time: 1568119306473, color: "#145394"},
    {x: 159.5, y: 171, time: 1568119306489, color: "#145394"}
  ]
]

其中数组中的每个数组代表画布中的每个笔划。

有没有办法可以将上述 Angular signatirePad JSON 格式转换为 jQuery signaturePad JSON 格式？

这样我也可以使用相同的签名数据在 Rails 中呈现登录

标签： javascriptjqueryruby-on-railsjsonangular

解决方案

我得到了转换。因此，在以下示例中（Angular2 signature-pad的输出）：

[
  [
    1 -> {x: 85.5, y: 66, time: 1568119306312, color: "#145394"},
    2 -> {x: 90.5, y: 66, time: 1568119306375, color: "#145394"},
    3 -> {x: 97.5, y: 75, time: 1568119306407, color: "#145394"},
    4 -> {x: 105.5, y: 89, time: 1568119306424, color: "#145394"}
  ],
  [
    5 -> {x: 120.5, y: 112, time: 1568119306440, color: "#145394"},
    6 -> {x: 134.5, y: 130, time: 1568119306456, color: "#145394"},
    7 -> {x: 146.5, y: 151, time: 1568119306473, color: "#145394"},
    8 -> {x: 159.5, y: 171, time: 1568119306489, color: "#145394"}
  ]
]

编号为 1,2,3,4...便于理解...

jQuery 签名板输出如下所示：

l = 2, m = 1
l = 3, m = 2
.
.
.
l = 8, m = 7

因此，类似于jQuery.signature-pad的输出将是：

[
  {lx: 90.5, ly: 66, mx: 85.5, my: 66},
  {lx: 97.5, ly: 75, mx: 90.5, my: 66},
  {lx: 105.5, ly: 89, mx: 97.5, my: 75},

  {lx: 134.5, ly: 130, mx: 120.5, my: 112},
  {lx: 146.5, ly: 151, mx: 134.5, my: 130},
  {lx: 159.5, ly: 171, mx: 146.5, my: 151},
]

推荐阅读