翻譯|使用教程|編輯:楊鵬連|2020-09-16 11:46:25.510|閱讀 231 次
概述:GoJS具有用于創(chuàng)建圖像的兩個(gè)功能:Diagram.makeImageData,它輸出一個(gè)Base64圖像數(shù)據(jù)串,和Diagram.makeImage,這是一個(gè)方便的功能調(diào)用Diagram.makeImageData并返回一個(gè)新HTMLImageElement與圖像數(shù)據(jù)作為其源。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
GoJS是一款功能強(qiáng)大,快速且輕量級(jí)的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。
同時(shí)設(shè)置縮放比例和尺寸將創(chuàng)建一個(gè)圖像,該圖像將被專門縮放并裁剪為給定的尺寸,如下圖所示。
myDiagram.makeImage({ 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)。如果我們不想在高度上修剪,我們可以寫(xiě)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ù)對(duì)象的類型和詳細(xì)信息屬性,以檢索不同類型的圖像。唯一受廣泛支持的類型是“ image / jpeg”。jpeg的詳細(xì)信息通過(guò)使用0到1之間的值(包括0和1)來(lái)確定其質(zhì)量。Jpegs通常不用于圖表,因?yàn)樗鼈兊挠袚p壓縮會(huì)導(dǎo)致文本不可讀。
下圖是輸出的jpeg。請(qǐng)注意透明背景如何變?yōu)楹谏?因?yàn)閖peg格式不支持alpha透明,并且HTML5畫(huà)布的默認(rèn)狀態(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 });下載圖像
如果您希望用戶下載圖像,則無(wú)需涉及Web服務(wù)器。請(qǐng)參閱樣本“Minimal Blob ”。請(qǐng)注意,該示例僅下載單個(gè)圖像。
如果用戶可以接受該選擇,建議您使用SVG下載圖像。該樣本位于最小SVG處。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自: