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

---

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

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

GoJS具有用于創(chuàng)建圖像的兩個(gè)功能：Diagram.makeImageData，它輸出一個(gè)Base64圖像數(shù)據(jù)串，和Diagram.makeImage，這是一個(gè)方便的功能調(diào)用Diagram.makeImageData并返回一個(gè)新HTMLImageElement與圖像數(shù)據(jù)作為其源。這兩個(gè)函數(shù)具有相同的單個(gè)參數(shù)，即JavaScript對(duì)象，其中包含幾個(gè)可定義的屬性，在文檔中進(jìn)行了枚舉。

該頁(yè)面幾乎與制作SVG上的頁(yè)面相同，該頁(yè)面顯示了如何渲染SVG元素而不是PNG圖像。

不帶參數(shù)或使用空的屬性對(duì)象調(diào)用makeImage會(huì)生成與圖的視口大小相同的圖像。

myDiagram.makeImage（）;

使用“ scale”屬性設(shè)置為1的對(duì)象調(diào)用makeImage會(huì)生成包含整個(gè)圖的圖像，而不僅僅是視口中可見(jiàn)的區(qū)域。但是，將修剪文檔邊界周?chē)目瞻讌^(qū)域。

myDiagram.makeImage（{
   scale：1
}）;

設(shè)置比例尺屬性將創(chuàng)建一個(gè)比例尺圖像，該圖像正好足以容納該圖。下圖以2的比例創(chuàng)建。

myDiagram.makeImage（{
   scale：2
}）;

通過(guò)設(shè)置makeImage的size選項(xiàng)創(chuàng)建以下圖像。請(qǐng)注意，畫(huà)布是均勻縮放的，任何多余的空間都放在圖像的底部或右側(cè)。

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

通過(guò)設(shè)置makeImage的size選項(xiàng)也可以創(chuàng)建以下圖像，但僅設(shè)置寬度。高度將是統(tǒng)一包含圖表所需的任何大小。

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

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

  myPartsList = new go.List（）;
  myPartsList.add（myDiagram.findNodeForKey（“ Beta”））;
  myPartsList.add（myDiagram.findNodeForKey（“ Delta”））;

myDiagram.makeImage（{
   parts：myPartsList
}）;

或僅繪制鏈接：

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

未完待續(xù)......

---

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