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

Posted 2023-05-09

【中文标题】将 Angular 2 签名板 JSON 转换为 jQuery.signaturePad JSON

【英文标题】：Convert Angular 2 signature-pad JSON to 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 中呈现登录

【参考方案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,
]