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 中呈现连接器元素。

问候， Zserrbo

4

1 回答 1

0

如果您使用画布模式，则可以轻松地将连接复制到另一个画布。

  • 制作一个大画布，将所有画布连接复制到正确位置的画布
  • 为每个 div 测量其顶部、左侧、宽度、高度，并获取内部文本
  • 在大画布上绘制矩形
  • 在矩形内绘制文本
  • 将大画布导出到图像
于 2013-03-25T09:38:26.533 回答