流程圖控件GoJS教程:如何制作影像(二)
GoJS是一款功能強大,快速且輕量級的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡化您的JavaScript / Canvas 程序。
同時設(shè)置縮放比例和尺寸將創(chuàng)建一個圖像,該圖像將被專門縮放并裁剪為給定的尺寸,如下圖所示。
myDiagram.makeImage({ scale: 1.5, size: new go.Size(100,100) });我們可能需要一個非常大的縮放圖像,該圖像的大小受到限制,我們可以使用maxSize屬性來限制一個或兩個尺寸。下圖應(yīng)用了非常大的比例,但水平尺寸受到限制,因此將發(fā)生一些水平裁剪。
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) });
myDiagram.makeImage({ position: new go.Point(20,20), size: new go.Size(50,50) });將背景設(shè)置為CSS顏色字符串將用給定的顏色替換透明的Diagram背景。
myDiagram.makeImage({ size: new go.Size(NaN,250), background: "rgba(0, 255, 0, 0.5)" // semi-transparent green background });
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);
我們可以設(shè)置參數(shù)對象的類型和詳細信息屬性,以檢索不同類型的圖像。唯一受廣泛支持的類型是“ image / jpeg”。jpeg的詳細信息通過使用0到1之間的值(包括0和1)來確定其質(zhì)量。Jpegs通常不用于圖表,因為它們的有損壓縮會導致文本不可讀。
下圖是輸出的jpeg。請注意透明背景如何變?yōu)楹谏?,因為jpeg格式不支持alpha透明,并且HTML5畫布的默認狀態(tài)是完全透明的黑色像素rgba(0,0,0,0)。
myDiagram.makeImage({ scale:1, type:“ image / jpeg” });
myDiagram.makeImage({ scale: 1, background: "AntiqueWhite", type: "image/jpeg" });
myDiagram.makeImage({ scale: 1, background: "AntiqueWhite", type: "image/jpeg", details: 0.05 });下載圖像
如果您希望用戶下載圖像,則無需涉及Web服務(wù)器。請參閱樣本“Minimal Blob ”。請注意,該示例僅下載單個圖像。
如果用戶可以接受該選擇,建議您使用SVG下載圖像。該樣本位于最小SVG處。