流程圖控件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
}）;

未完待續......

---

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