流程圖控件GoJS教程:使用Picture屬性顯示圖像
GoJS是一款功能強(qiáng)大,快速且輕量級(jí)的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡化您的JavaScript / Canvas 程序。
使用Picture類顯示圖像。最常見的用法是使用URL字符串設(shè)置Picture.source屬性,以及GraphObject.desiredSize或GraphObject.width和GraphObject.height。
如果URL只是一個(gè)簡單的常量字符串,您可以直接將字符串作為參數(shù)傳遞給GraphObject,make,而不是分配“source:”屬性。兩種技術(shù)都具有相同的效果。
在這些簡單的演示中,代碼以編程方式創(chuàng)建一個(gè)Part并將其添加到Diagram中。了解模型和數(shù)據(jù)綁定后,通常不會(huì)以編程方式創(chuàng)建部件(節(jié)點(diǎn)或鏈接)。
diagram.add(
$(go.Part,
$(go.Picture,“images / 100 x65.png”)
));
但是,對(duì)于更復(fù)雜的控件,您可以將Picture.element設(shè)置為HTMLImageElement或HTMLCanvasElement。
尺寸
壓縮圖片以適應(yīng)。
以下圖片均顯示了100x65像素的小貓圖片。
第一張圖片以自然尺寸顯示圖像。
第二張圖片還以自然尺寸顯示圖像,但顯式設(shè)置了所需的尺寸。
第三張圖片增加了圖片的大小,使圖像均勻展開。
第四張圖片將100x65圖像壓縮成50x32.5空間 - 半尺寸。這也保持了圖像的原始寬高比。
最后一張圖片將圖片大小設(shè)置為50x70,這會(huì)將寬高比更改為比原始更高更薄。
diagram.add(
$(go.Part, "Table",
$(go.Picture, { source: "images/100x65.png", column: 0,
margin: 2 }),
$(go.TextBlock, "natural", { row: 1, column: 0 }),
$(go.Picture, { source: "images/100x65.png", column: 1,
width: 100, height: 65, margin: 2 }),
$(go.TextBlock, "same size", { row: 1, column: 1 }),
$(go.Picture, { source: "images/100x65.png", column: 2,
width: 200, height: 130, margin: 2 }),
$(go.TextBlock, "bigger", { row: 1, column: 2 }),
$(go.Picture, { source: "images/100x65.png", column: 3,
width: 50, height: 32.5, margin: 2 }),
$(go.TextBlock, "smaller", { row: 1, column: 3 }),
$(go.Picture, { source: "images/100x65.png", column: 4,
width: 50, height: 70, margin: 2 }),
$(go.TextBlock, "stretched", { row: 1, column: 4 })
));
請(qǐng)注意,加載媒體可能需要一段時(shí)間。在媒體加載到足以知道其自然大小的時(shí)間之前,Picture可能具有錯(cuò)誤的大小,例如0x0。我們建議您指定desiredSize(或?qū)挾群透叨龋?,以便在加載介質(zhì)后,保持圖片的面板不必重新排列。
然而,對(duì)于您無法提前知道自然尺寸的時(shí)代,有其他方法可以拉伸圖像以適應(yīng)給定的空間。
圖像拉伸
您可以設(shè)置Picture.imageStretch屬性來控制繪制圖像的大小和寬高比,而不是始終拉伸或壓縮以填充desiredSize 。
以下圖片演示了Picture.imageStretch的四個(gè)可能值。這里的所有四張圖片的大小均為60x80,并顯示相同的100x65 PNG文件。圖片也有淺綠色背景,以顯示可能未使用的可用空間,但仍然是圖片邊界的一部分。
第一張圖片演示了默認(rèn)行為,可以向兩個(gè)方向拉伸。請(qǐng)注意圖像如何變形以使其比應(yīng)有的更窄。但是,顯示了所有圖像。由于圖像填充整個(gè)區(qū)域并且圖像不是半透明的,因此背景顏色不會(huì)顯示在任何地方。
您可以在第二張圖片中看到,使用GraphObject.None的imageStretch ,它如何只顯示整個(gè)小貓圖像的一小部分。因?yàn)閐esiredSize小于圖像的自然尺寸,所以圖像的一部分被剪裁。
第三張圖片顯示了GraphObject.Uniform imageStretch將如何確保顯示所有圖像,但代價(jià)是減小比例并在側(cè)面或頂部和底部留下一些空白空間。在這種情況下,由于自然圖像寬高比比可用的60x80寬高比寬,因此空白區(qū)域?qū)⑽挥陧敳亢偷撞俊?/p>
第四張圖片顯示了GraphObject.UniformToFill imageStretch 如何確保整個(gè)區(qū)域被圖像占據(jù),但并非所有圖像都被顯示,因?yàn)橛行﹫D像可能會(huì)被剪裁在側(cè)面或頂部和底部。這些圖像通常比使用Uniform imageStretch時(shí)具有更大的比例。在這種情況下,必須剪裁的是圖像的兩側(cè)。
最后,有一個(gè)單獨(dú)的部分包含原始圖像,自然大小,用于比較。
diagram.add(
$(go.Part, "Table",
$(go.Picture, "images/100x65.png",
{ column: 0, width: 60, height: 80, margin: 2, background: "chartreuse", imageStretch: go.GraphObject.Fill }),
$(go.TextBlock, "Fill", { row: 1, column: 0 }),
$(go.Picture, "images/100x65.png",
{ column: 1, width: 60, height: 80, margin: 2, background: "chartreuse", imageStretch: go.GraphObject.None }),
$(go.TextBlock, "None", { row: 1, column: 1 }),
$(go.Picture, "images/100x65.png",
{ column: 2, width: 60, height: 80, margin: 2, background: "chartreuse", imageStretch: go.GraphObject.Uniform }),
$(go.TextBlock, "Uniform", { row: 1, column: 2 }),
$(go.Picture, "images/100x65.png",
{ column: 3, width: 60, height: 80, margin: 2, background: "chartreuse", imageStretch: go.GraphObject.UniformToFill }),
$(go.TextBlock, "UniformToFill", { row: 1, column: 3 })
)); // The original image sized naturally, for comparison
diagram.add(
$(go.Part, "Vertical",
$(go.Picture, "images/100x65.png"),
$(go.TextBlock, "Original image,\nsized naturally")
));
剪切圖像時(shí),您可以使用Picture.imageAlignment屬性控制圖像的哪個(gè)部分。
剪裁
如果您的圖片必須剪裁為幾何圖形,例如生成圓形圖像,則有兩個(gè)選項(xiàng)。第一種是使用“框架”幾何體來隱藏部分圖像。通常,此框架與圖表背景或節(jié)點(diǎn)背景顏色相同。此方法不會(huì)更改圖片的區(qū)域,不允許真正的透明度,并且單擊邊界中的任何位置將始終選擇圖片。
第二種方法使用Panel.isClipping?!癝pot”面板上的此屬性允許主Shape的填充區(qū)域用作剪切區(qū)域而不是繪制的形狀。此方法不會(huì)更改圖片的區(qū)域,但允許透明度它會(huì)影響對(duì)象拾取,以便只能獲取合成的繪制區(qū)域; 未繪制的圖像區(qū)域不能“被擊中”。
以下兩個(gè)例子如下:
diagram.layout = $(go.GridLayout); // Using a black "frame" geometry to hide part of the image.
// Typically this frame is the same color as the Diagram background or the background of the Node.
diagram.add(
$(go.Part, "Spot",
{ scale: 2 },
$(go.Picture, "../samples/images/55x55.png",
{ name: 'Picture', desiredSize: new go.Size(55, 55), background: 'red'
}
),
$(go.Shape,
{ strokeWidth: 0, stroke: null, geometryString: "f M0 0 L100 0 L100 100 L0 100 z M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0 z", width: 56, height: 56, fill: 'black'
})
)
); // Using Panel.isClipping
diagram.add(
$(go.Part, "Spot",
{ isClipping: true, scale: 2 },
$(go.Shape, "Circle", { width: 55, strokeWidth: 0 } ),
$(go.Picture, "../samples/images/55x55.png",
{ width: 55, height: 55 }
)
)
); // Using Panel.isClipping and also having a surrounding panel
diagram.add(
$(go.Part, "Spot",
{ scale: 2 },
$(go.Shape, "Circle", { width: 65, strokeWidth: 0, fill: 'red' } ),
$(go.Panel, "Spot",
{ isClipping: true },
$(go.Shape, "Circle", { width: 55, strokeWidth: 0 } ),
$(go.Picture, "../samples/images/55x55.png",
{ width: 55, height: 55 }
)
)
)
);
翻轉(zhuǎn)
您可以使用Picture.flip屬性水平和垂直翻轉(zhuǎn)圖像源:
diagram.add(
$(go.Part, "Table",
$(go.Picture, { source: "images/100x65.png", column: 0, margin: 2, flip: go.GraphObject.None
}),
$(go.TextBlock, "None (default)", { row: 1, column: 0 }),
$(go.Picture, { source: "images/100x65.png", column: 1, margin: 2, flip: go.GraphObject.FlipHorizontal
}),
$(go.TextBlock, "FlipHorizontal", { row: 1, column: 1 }),
$(go.Picture, { source: "images/100x65.png", column: 2, margin: 2, flip: go.GraphObject.FlipVertical
}),
$(go.TextBlock, "FlipVertical", { row: 1, column: 2 }),
$(go.Picture, { source: "images/100x65.png", column: 3, margin: 2, flip: go.GraphObject.FlipBoth
}),
$(go.TextBlock, "FlipBoth", { row: 1, column: 3 })
));
Cross Origin圖片
由于圖片由HTMLImageElements支持,因此它們必須遵守適用于圖像的相同跨源(CORS)規(guī)則。如果您使用的圖像適用于CORS規(guī)則,則可能需要將Picture.sourceCrossOrigin屬性設(shè)置為返回適當(dāng)值的函數(shù)。如果sourceCrossOrigin提供,則函數(shù)返回的值將用作任何構(gòu)造的值image.crossOrigin。例:
$(go.Picture,
{ width:64,height:64 },
{ sourceCrossOrigin:function(pict) { return “use-credentials” ;}}, new go.Binding(“source”,“path”))
要返回的常用值是“use-credentials”和“anonymous”,但其他情況可能需要其他值或條件值。我們建議研究跨源資源共享,以確定適合您情況的內(nèi)容。
如果您正在使用Diagram.makeImage,Diagram.makeImageData或Diagram.makeSvg,并且您看到空白或缺少圖像,則首先要研究與CORS相關(guān)的問題。
使用SVG作為圖片源
幾乎所有瀏覽器都接受SVG文件作為圖片源,但在許多瀏覽器中,您必須:
將寬度和高度屬性分配給SVG元素。這些值應(yīng)該是整數(shù)。(Firefox必備)
為Picture元素指定所需的大小,該大小必須與其width和height屬性相同(Internet Explorer必需)。
該第一個(gè)SVG元素具有在其SVG元素中指定的寬度和高度,并且還具有其期望的大小集。它應(yīng)該在大多數(shù)瀏覽器中顯示:
< svg xmlns = “http://www.w3.org/2000/svg”
xmlns:xlink = “http://www.w3.org/1999/xlink”
width = “580” height = “580” >
。 ..
diagram.add(
$(go.Part,
$(go.Picture,{ desiredSize:新 go.Size(580,580),源:“圖像/ tiger.svg” })
));
diagram.scale = 0.5 ;
此SVG元素未在其SVG元素中指定width和height屬性,因此某些瀏覽器可能無法呈現(xiàn)它:
< svg xmlns = “http://www.w3.org/2000/svg”
xmlns:xlink = “http://www.w3.org/1999/xlink” >
...
diagram.add ($(go.Part,
$(go.Picture,{ source:“images / tiger-noWidthHeightSpecified.svg” })
));
diagram.scale = 0.5 ;
更多GoJS相關(guān)教程,視頻,資源請(qǐng)點(diǎn)擊此處了解~
想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服。
更多精彩內(nèi)容,敬請(qǐng)關(guān)注下方的微信公眾號(hào),及時(shí)獲取產(chǎn)品最新資訊▼▼▼