流程圖控件GoJS教程：使用Picture屬性顯示圖像

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新試用版

使用Picture類顯示圖像。最常見的用法是使用URL字符串設置Picture.source屬性，以及GraphObject.desiredSize或GraphObject.width和GraphObject.height。

如果URL只是一個簡單的常量字符串，您可以直接將字符串作為參數傳遞給GraphObject，make，而不是分配“source：”屬性。兩種技術都具有相同的效果。

在這些簡單的演示中，代碼以編程方式創建一個Part并將其添加到Diagram中。了解模型和數據綁定后，通常不會以編程方式創建部件（節點或鏈接）。

 diagram.add（
    $（go.Part，
      $（go.Picture，“images / 100 x65.png”）
    ））;

但是，對于更復雜的控件，您可以將Picture.element設置為HTMLImageElement或HTMLCanvasElement。

尺寸

壓縮圖片以適應。

• 以下圖片均顯示了100x65像素的小貓圖片。

• 第一張圖片以自然尺寸顯示圖像。

• 第二張圖片還以自然尺寸顯示圖像，但顯式設置了所需的尺寸。

• 第三張圖片增加了圖片的大小，使圖像均勻展開。

• 第四張圖片將100x65圖像壓縮成50x32.5空間 - 半尺寸。這也保持了圖像的原始寬高比。

• 最后一張圖片將圖片大小設置為50x70，這會將寬高比更改為比原始更高更薄。

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 })
    ));

請注意，加載媒體可能需要一段時間。在媒體加載到足以知道其自然大小的時間之前，Picture可能具有錯誤的大小，例如0x0。我們建議您指定desiredSize（或寬度和高度），以便在加載介質后，保持圖片的面板不必重新排列。

然而，對于您無法提前知道自然尺寸的時代，有其他方法可以拉伸圖像以適應給定的空間。

圖像拉伸

您可以設置Picture.imageStretch屬性來控制繪制圖像的大小和寬高比，而不是始終拉伸或壓縮以填充desiredSize 。

以下圖片演示了Picture.imageStretch的四個可能值。這里的所有四張圖片的大小均為60x80，并顯示相同的100x65 PNG文件。圖片也有淺綠色背景，以顯示可能未使用的可用空間，但仍然是圖片邊界的一部分。

• 第一張圖片演示了默認行為，可以向兩個方向拉伸。請注意圖像如何變形以使其比應有的更窄。但是，顯示了所有圖像。由于圖像填充整個區域并且圖像不是半透明的，因此背景顏色不會顯示在任何地方。

• 您可以在第二張圖片中看到，使用GraphObject.None的imageStretch ，它如何只顯示整個小貓圖像的一小部分。因為desiredSize小于圖像的自然尺寸，所以圖像的一部分被剪裁。

• 第三張圖片顯示了GraphObject.Uniform imageStretch將如何確保顯示所有圖像，但代價是減小比例并在側面或頂部和底部留下一些空白空間。在這種情況下，由于自然圖像寬高比比可用的60x80寬高比寬，因此空白區域將位于頂部和底部。

• 第四張圖片顯示了GraphObject.UniformToFill imageStretch 如何確保整個區域被圖像占據，但并非所有圖像都被顯示，因為有些圖像可能會被剪裁在側面或頂部和底部。這些圖像通常比使用Uniform imageStretch時具有更大的比例。在這種情況下，必須剪裁的是圖像的兩側。

• 最后，有一個單獨的部分包含原始圖像，自然大小，用于比較。

 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")
    ));

剪切圖像時，您可以使用Picture.imageAlignment屬性控制圖像的哪個部分。

剪裁

如果您的圖片必須剪裁為幾何圖形，例如生成圓形圖像，則有兩個選項。第一種是使用“框架”幾何體來隱藏部分圖像。通常，此框架與圖表背景或節點背景顏色相同。此方法不會更改圖片的區域，不允許真正的透明度，并且單擊邊界中的任何位置將始終選擇圖片。

第二種方法使用Panel.isClipping。“Spot”面板上的此屬性允許主Shape的填充區域用作剪切區域而不是繪制的形狀。此方法不會更改圖片的區域，但允許透明度它會影響對象拾取，以便只能獲取合成的繪制區域; 未繪制的圖像區域不能“被擊中”。

以下兩個例子如下：

 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 }
         )
      )
    )
  );

翻轉

您可以使用Picture.flip屬性水平和垂直翻轉圖像源：

 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）規則。如果您使用的圖像適用于CORS規則，則可能需要將Picture.sourceCrossOrigin屬性設置為返回適當值的函數。如果sourceCrossOrigin提供，則函數返回的值將用作任何構造的值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相關的問題。

使用SVG作為圖片源

幾乎所有瀏覽器都接受SVG文件作為圖片源，但在許多瀏覽器中，您必須：

• 將寬度和高度屬性分配給SVG元素。這些值應該是整數。（Firefox必備）

• 為Picture元素指定所需的大小，該大小必須與其width和height屬性相同（Internet Explorer必需）。

該第一個SVG元素具有在其SVG元素中指定的寬度和高度，并且還具有其期望的大小集。它應該在大多數瀏覽器中顯示：

< svg  xmlns = “//www.w3.org/2000/svg” 
     xmlns：xlink = “//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屬性，因此某些瀏覽器可能無法呈現它：

< svg  xmlns = “//www.w3.org/2000/svg” 
     xmlns：xlink = “//www.w3.org/1999/xlink” > 
  ...

    diagram.add   （$（go.Part，
      $（go.Picture，{ source：“images / tiger-noWidthHeightSpecified.svg” }）
    ））; 
  diagram.scale = 0.5 ;

更多GoJS相關教程，視頻，資源請點擊此處了解~

想要購買GoJS正版授權的朋友可以。

更多精彩內容，敬請關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼