7

私は署名キャプチャ アプレットに取り組んでおり、要件の 1 つは、将来の使用のために署名を SVG として保存することです。現在、Signature Padを使用して署名をキャプチャしていますが、JSON として保存されます。JSONを使用してSVGオブジェクトを生成する方法はありますか、それとも間違った方法で行っていますか?

4

1 に答える 1

11

ありがたいことに、Signature Pad は非常に読みやすい方法で JSON データをエンコードします。SVG は単なるテキスト ドキュメントであるため、エンコードされた JSON 署名があれば、プログラムで簡単に SVG 画像を生成できます。

概念実証として、この再生成された署名を Pad ドキュメントから取得します。各オブジェクトから SVG パスを生成するだけです。canvas でどのように行われているかについてのソース( を検索drawSignature) を見ると、選択したどの言語でも簡単な例を作成できます。

これは JavaScript での jsfiddle です。

function generate_svg(paths) {
  var svg = '';
  svg += '<svg width="198px" height="55px" version="1.1" xmlns="http://www.w3.org/2000/svg">\n';

  for(var i in paths) {
    var path = '';
    path += 'M' + paths[i].mx + ' ' + paths[i].my;   // moveTo
    path += ' L ' + paths[i].lx + ' ' + paths[i].ly; // lineTo
    path += ' Z';                                    // closePath
    svg += '<path d="' + path + '"stroke="blue" stroke-width="2"/>\n';
  }

  svg += '</svg>\n';
  return svg;
}
于 2013-07-03T20:35:42.423 に答える