0

私の英語でごめんなさい。

jsPlumbで図を描き、キャプチャした画像をエクスポートしたい。

Jsplumb は、次のように svg でレンダリングされます。

<svg style="position:absolute;left:457.05px;top:227.65px;z-index:-5;" width="476.9" height="233.7" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector ent0 ent1 Line"><path d="M 112.95 178.35 L 363.95 55.35" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="black" stroke-width="5"/><path d="M 112.95 178.35 L 363.95 55.35" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="blue" stroke-width="3"/></svg>

これをキャンバスに変換したい（これは html2canvas で画像に変換できます-私はこの方法を試します：Google docs）または画像に直接変換します。jsPlumb は、ファイルではなく html で SVG を生成するため、svgeezyを使用できません。canvg を使用しようとしましたが、できません (不適切なドキュメント)。

クライアント側のソリューションか、より簡単なサーバー側のソリューションが必要です。

jsPlumb のサンプル コード: http://jsfiddle.net/WRUra/3/ div1 を div2 または div3 コンテナーに接続し、コネクタ要素を svg でレンダリングするだけです。

よろしく、 ゼルボ

4

1 に答える 1

0

キャンバス モードを使用すると、接続を別のキャンバスに簡単にコピーできます。

  • 大きなキャンバスを作成する すべてのキャンバス接続を適切な場所にキャンバスにコピーする
  • 各 div について、その上、左、幅、高さを測定し、内側のテキストを取得します
  • 大きなキャンバスに長方形を描く
  • 長方形の中にテキストを描く
  • 大きなキャンバスを画像にエクスポート
于 2013-03-25T09:38:26.533 に答える