GoJs Pictures 官方介绍文档
圖片
? ? ? 使用Picture類顯示圖像。?最常見的用法是使用URL字符串設(shè)置Picture.source屬性，以及通過GraphObject.desiredSize（圖對(duì)象的所需尺寸）獲取或通過設(shè)置GraphObject.width（圖對(duì)象的寬）和GraphObject.height（圖對(duì)象的高）這兩個(gè)屬性改變圖片參數(shù)。
? ? ? ?如果URL只是一個(gè)簡單的常量字符串，則可以將字符串作為參數(shù)直接傳遞給GraphObject.make，而不是分配給“source”屬性。?兩種方式都具有相同的效果。
? ? ? ? ?在這些簡單的演示，該代碼編程方式創(chuàng)建一個(gè)區(qū)域貼圖，并將其添加到圖中。 如果你了解模型和數(shù)據(jù)綁定，一般就不會(huì)以編程方式創(chuàng)建區(qū)域貼圖（節(jié)點(diǎn)或鏈接）。nodes or links
? ? ? ? ? 實(shí)際上，并不建議使用 $ 這個(gè)默認(rèn)的符號(hào)，因?yàn)樵贘s 中，這個(gè)$太敏感。
diagram.add(
$(go.Part,
$(go.Picture, "images/100x65.png")
));
圖片是可以拖拉，縮放，通過Delete刪除的，建議去官網(wǎng)?進(jìn)行體驗(yàn)。
? ? ? ? 但是，對(duì)于更復(fù)雜的控件，您可以將Picture.element設(shè)置為HTMLImageElement或HTML Canvas元素來進(jìn)行處理。
Sizing
? ? ?如果您沒有設(shè)置圖片的GraphObject.desiredSize，它將獲得圖片的自然大小。 但是，當(dāng)您將desiredSize設(shè)置為與自然大小不同時(shí)，
你還可以通過拉伸或壓縮圖片以使其適合你的需求。
? ? ?以下圖片均顯示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 })
));
? ? ? 加載可能需要一段時(shí)間。 在加載到足以知道其自然大小的時(shí)間之前，圖片可能具有錯(cuò)誤的大小，例如0x0。 我們建議你指定desiredSize（或?qū)挾群透叨?#xff09;，以便在加載結(jié)束后，保持圖片的面板不必重新排列。
? ? ? ?對(duì)于您無法提前知道目標(biāo)尺寸的情況，有其他方法比如拉伸圖像以適應(yīng)給定的空間。
圖像拉伸
? ? ? ?您可以設(shè)置Picture.imageStretch屬性來控制繪制圖像的大小和寬高比，而不是始終通過拉伸或壓縮來滿足自己需求的尺寸。
? ? ? ?以下圖片演示了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ū)⑽挥陧敳亢偷撞俊?/li>
- 第四張圖片顯示了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ì)更改圖片的真實(shí)大小，沒有實(shí)現(xiàn)透明處理圖片，并且單擊邊界中的任何位置將始終選擇圖片。
? ? ? ?第二種方法使用Panel.isClipping。 “Spot”面板上的此屬性允許主Shape的填充區(qū)域用作剪切區(qū)域而不是繪制的形狀。 此方法不會(huì)更改圖片的區(qū)域，但會(huì)影響對(duì)象的選取，只能選擇繪制的區(qū)域; 未繪制的圖像區(qū)域不能被選中。
對(duì)于第一種方式來說，區(qū)域 1 ， 2 都是可以被選中的，第二種方式只有區(qū)域二可以被選中。
diagram.layout = $(go.GridLayout);
diagram.initialContentAlignment = go.Spot.Center;
// 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 }
)
)
)
);
?
跨源圖片
? ? ? ?由于圖片由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”，但其他情況可能需要其他值或條件值。 我們建議閱讀跨源資源共享文檔，以確定適合您情況的方法。
? ? ? ?如果您正在使用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, "Vertical",
$(go.Picture, { desiredSize: new go.Size(580, 580), source: "images/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, "Vertical",
$(go.Picture, { source: "images/tiger-noWidthHeightSpecified.svg" })
));
diagram.scale = 0.5;
?
?
工具：Google Translate
翻譯人員： Kindear
總結(jié)
以上是生活随笔為你收集整理的GoJs Pictures 官方介绍文档的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js常用的数组方法
- 下一篇： （转载）Git使用教程：最详细、最傻瓜、