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

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

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

GoJS最新版

零件选项允许我们指定要绘制的零件的可迭代集合。如果您只想制作图的一部分的图像，例如选择节点，这将很有用。

  myPartsList = new go.List();  myPartsList.add(myDiagram.findNodeForKey("Beta"));  myPartsList.add(myDiagram.findNodeForKey("Delta"));

myDiagram.makeSvg({  parts: myPartsList});

myDiagram.makeSvg({  parts: myDiagram.links});

myDiagram.makeSvg({  scale: 1.5,  size: new go.Size(100,100)});

我们可能需要一个非常大的，缩放后的图像，该图像的大小受到限制，我们可以使用maxSize属性来限制一个或两个尺寸。下图应用了非常大的比例，但水平尺寸受到限制，因此将发生一些水平裁剪。

maxSize的默认值为go.Size(2000, 2000)，并且指定go.Size(600, NaN)等效于指定go.Size(600, 2000)。如果我们不想在高度上裁剪，我们可以写go.Size(600, Infinity)。

myDiagram.makeSvg（{   scale：9，   maxSize：new go.Size（600，NaN）}）;

myDiagram.makeSvg({  position: new go.Point(20,20),  size: new go.Size(50,50)});

将背景设置为CSS颜色字符串将用给定的颜色替换透明的Diagram背景。

myDiagram.makeSvg（{   size：new go.Size（NaN，250），   background：“ rgba（  0，255，0，0.5 ）” //半透明的绿色背景}）;

    var d = myDiagram.documentBounds;    var halfWidth = d.width / 2;    var halfHeight = d.height / 2;    svg = myDiagram.makeSvg({            position: new go.Point(d.x, d.y),            size: new go.Size(halfWidth,halfHeight)          });    addSVG(svg); // Adds the SVG to a DIV below    svg = myDiagram.makeSvg({            position: new go.Point(d.x + halfWidth, d.y),            size: new go.Size(halfWidth,halfHeight)          });    addSVG(svg);    svg = myDiagram.makeSvg({            position: new go.Point(d.x, d.y+ halfHeight),            size: new go.Size(halfWidth,halfHeight)          });    addSVG(svg);    svg = myDiagram.makeSvg({            position: new go.Point(d.x + halfWidth, d.y + halfHeight),            size: new go.Size(halfWidth,halfHeight)          });    addSVG(svg);

var button = document.getElementById('openSVG');button.addEventListener('click', function() {  var newWindow = window.open("","newWindow");  if (!newWindow) return;  var newDocument = newWindow.document;  var svg = myDiagram.makeSvg({    document: newDocument,  // create SVG DOM in new document context    scale: 9,    maxSize: new go.Size(600, NaN)  });  newDocument.body.appendChild(svg);}, false);

下载SVG文件

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

想要购买GoJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：