将 Angular 2 签名板 JSON 转换为 jQuery.signaturePad JSON答案

【问题标题】：Convert Angular 2 signature-pad JSON to jQuery.signaturePad jSON将 Angular 2 签名板 JSON 转换为 jQuery.signaturePad JSON
【发布时间】：2020-01-12 06:16:37
【问题描述】：

我正在使用 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 中呈现登录

【问题讨论】：

标签： javascript jquery ruby-on-rails json angular

【解决方案1】：

我得到了转换。所以，在下面的例子中（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},
]

【讨论】：