流程圖控件GoJS教程：如何制作影像

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

GoJS具有用于創建圖像的兩個功能：Diagram.makeImageData，它輸出一個Base64圖像數據串，和Diagram.makeImage，這是一個方便的功能調用Diagram.makeImageData并返回一個新HTMLImageElement與圖像數據作為其源。這兩個函數具有相同的單個參數，即JavaScript對象，其中包含幾個可定義的屬性，在文檔中進行了枚舉。
該頁面幾乎與制作SVG上的頁面相同，該頁面顯示了如何渲染SVG元素而不是PNG圖像。

調用不帶參數或屬性對象為空的makeImage會生成與圖的視口大小相同的圖像。

myDiagram.makeImage（）;

使用“ scale”屬性設置為1的對象調用makeImage會生成包含整個圖的圖像，而不僅僅是視口中可見的區域。但是，將修剪文檔邊界周圍的空白區域。

myDiagram.makeImage({
  scale: 1
});

設置比例尺屬性將創建一個比例縮放的圖像，該圖像恰好足以容納該圖。下圖以2的比例創建。

myDiagram.makeImage({
  scale: 2
});

通過設置makeImage的size選項創建以下圖像。請注意，畫布是均勻縮放的，任何多余的空間都放在圖像的底部或右側。

myDiagram.makeImage({
  size: new go.Size(100,100)
});

通過設置makeImage的size選項也可以創建以下圖像，但是只設置了寬度。高度將是統一包含圖表所需的任何大小。

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

零件選項允許我們指定要繪制的零件的可迭代集合。如果只想對圖的一部分（例如選擇節點）進行圖像處理，這將很有用。

 myPartsList = new go.List();
  myPartsList.add(myDiagram.findNodeForKey("Beta"));
  myPartsList.add(myDiagram.findNodeForKey("Delta"));
myDiagram.makeImage({
  parts: myPartsList
});

或者只是簡單地繪制鏈接：

myDiagram.makeImage（{
   parts：myDiagram.links
}）;

同時設置縮放比例和尺寸將創建一個圖像，該圖像將被專門縮放并裁剪為給定的尺寸，如下圖所示。

myDiagram.makeImage({
  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.makeImage（{
   scale：9，
   maxSize：new go.Size（600，NaN）
}）;

同時設置位置和大小會創建一個圖表圖像，該圖像專門定位并裁剪為給定的大小。設置位置但未設置比例尺時，比例尺默認為1。

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

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

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

在下面的代碼中，我們使用文檔邊界將Diagram分成四個相等的部分，從而在每個部分中制作出四個圖像。通過這種方式，我們可以為分頁，制作圖庫或打印目的準備圖像。創建的四個圖像如下所示。

var d = myDiagram.documentBounds;
    var halfWidth = d.width / 2;
    var halfHeight = d.height / 2;
    img = myDiagram.makeImage({
            position: new go.Point(d.x, d.y),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img); // Adds the image to a DIV below

    img = myDiagram.makeImage({
            position: new go.Point(d.x + halfWidth, d.y),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

    img = myDiagram.makeImage({
            position: new go.Point(d.x, d.y+ halfHeight),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

    img = myDiagram.makeImage({
            position: new go.Point(d.x + halfWidth, d.y + halfHeight),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

圖像類型

我們可以設置參數對象的類型和詳細信息屬性，以檢索不同種類的圖像。唯一受廣泛支持的類型是“ image / jpeg”。jpeg的詳細信息通過使用0到1之間的值（包括0和1）來確定其質量。Jpegs通常不用于圖表，因為它們的有損壓縮會導致文本不可讀。

下圖是輸出的jpeg。請注意透明背景如何變為黑色，因為jpeg格式不支持alpha透明，并且HTML5畫布的默認狀態是完全透明的黑色像素rgba（0,0,0,0）。

myDiagram.makeImage（{
   scale：1，
   type：“ image / jpeg”
}）;

下圖是使用指定的AntiqueWhite背景創建的jpeg。

myDiagram.makeImage({
  scale: 1,
  background: "AntiqueWhite",
  type: "image/jpeg"
});

下圖是創建的jpeg（具有AntiqueWhite背景）和details選項，但質量很低。

myDiagram.makeImage({
  scale: 1,
  background: "AntiqueWhite",
  type: "image/jpeg",
  details: 0.05
});

下載圖像

如果您希望用戶下載圖像，則無需涉及Web服務器。請參閱樣本“ 最小斑點”。請注意，該示例僅下載單個圖像。
如果用戶可以接受該選擇，建議您使用SVG下載圖像。該樣本位于最小SVG處。

---

想要購買GoJS正版授權，或了解更多產品信息請點擊