流程图控件GoJS教程：如何制作SVG（一）-控件新闻-慧都网

流程图控件GoJS教程：如何制作SVG（一）

翻译|使用教程|编辑：杨鹏连|2020-09-23 11:31:44.540|阅读 502 次

概述：GoJS具有创建SVG一个功能：Diagram.makeSvg，它返回一个新SVGElement与GoJS图的表示。该方法有一个参数，一个JavaScript对象，其中包含几个可定义的属性，在文档中进行了枚举。

相关链接：

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

制作SVG

GoJS具有创建SVG一个功能：Diagram.makeSvg，它返回一个新SVGElement与GoJS图的表示。该方法有一个参数，一个JavaScript对象，其中包含几个可定义的属性，在文档中进行了枚举。

SVG导出可用作PDF的内容。大多数创建PDF的GoJS用户都是通过将图表导出到SVG或图像并将其内容放置在服务器或其他地方的PDF中来实现的。

该页面与“ 制作图像 ”页面几乎相同，该页面显示了如何渲染PNG图像而不是SVG元素。

以下是在下图上使用Diagram.makeSvg的几个示例：

不带任何参数或使用空的属性对象调用makeSvg会导致场景的大小与图的视口相同。

myDiagram.makeSvg（）;

使用“ scale”属性设置为1的对象调用makeSvg会导致场景包含整个图表，而不仅仅是视口中可见的区域。但是，将修剪文档边界周围的空白区域。

myDiagram.makeSvg（{
   scale：1
}）;

设置scale属性将创建一个缩放后的SVG场景，该场景恰好足以容纳该图。以下SVG的比例为2。

myDiagram.makeSvg（{
   scale：2
}）;

请注意，与图像不同，如何选择文本。

通过设置makeSvg的size选项可创建以下SVG。请注意，画布是按比例缩放的，并且任何额外的空间都将放置在SVG的底部或右侧。

myDiagram.makeSvg（{
  size: new go.Size(100,100)
}）;

也可以通过设置makeSvg的size选项来创建以下SVG，但仅设置宽度。高度将是统一包含图表所需的任何大小。

myDiagram.makeSvg（{
   size：new go.Size（100，NaN）
}）;

下载SVG文件

如果您希望用户下载SVG文件，则无需涉及Web服务器。请参阅样本。请注意，该示例仅下载一个SVG文件，但是该文件可以覆盖整个文档。

想要购买GoJS正版授权，或了解更多产品信息请点击

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：