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

---

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

零件選項(xiàng)允許我們指定要繪制的零件的可迭代集合。如果您只想制作圖的一部分的圖像，例如選擇節(jié)點(diǎn)，這將很有用。

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

myDiagram.makeSvg({
  parts: myPartsList
});

或僅繪制鏈接：

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

同時(shí)設(shè)置縮放比例和尺寸將創(chuàng)建一個(gè)圖像，該圖像將被專門縮放并裁剪為給定的尺寸，如下圖所示。

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

我們可能需要一個(gè)非常大的，縮放后的圖像，該圖像的大小受到限制，我們可以使用maxSize屬性來(lái)限制一個(gè)或兩個(gè)尺寸。下圖應(yīng)用了非常大的比例，但水平尺寸受到限制，因此將發(fā)生一些水平裁剪。

maxSize的默認(rèn)值為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）
}）;

同時(shí)設(shè)置位置和大小會(huì)創(chuàng)建一個(gè)圖表圖像，該圖像專門定位并裁剪為給定的大小。設(shè)置位置但未設(shè)置比例尺時(shí)，比例尺默認(rèn)為1。

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

將背景設(shè)置為CSS顏色字符串將用給定的顏色替換透明的Diagram背景。

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

在下面的代碼中，我們使用文檔邊界將圖分成四個(gè)相等的部分，從而在每個(gè)部分中制作出四個(gè)圖像。這樣，我們可以準(zhǔn)備用于分頁(yè)，制作圖庫(kù)或打印的圖像。創(chuàng)建的四個(gè)圖像如下所示。

    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);

通過(guò)將SVG附加到新頁(yè)面的DOM中，可以在新窗口中打開它：

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文件，則無(wú)需涉及Web服務(wù)器。請(qǐng)參閱樣本。請(qǐng)注意，該示例僅下載一個(gè)SVG文件，但是該文件可以覆蓋整個(gè)文檔。

---

想要購(gòu)買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊